From 80ef99f979526f1279abc5dab7a9422f38e02715 Mon Sep 17 00:00:00 2001 From: Csaky Date: Mon, 20 Nov 2023 14:37:15 -0800 Subject: [PATCH] CSS tidy consolidate our style sheets resolve style conflicts use primevue defaults where possible make semi-responsive --- app/app.ts | 7 +- app/tsconfig.json | 2 +- frontend/package-lock.json | 14 +- frontend/package.json | 2 +- frontend/src/App.vue | 35 +- frontend/src/assets/base.css | 86 ---- frontend/src/assets/main.scss | 383 ++++++++++++------ frontend/src/assets/variables.scss | 12 +- frontend/src/components/bucket/BucketList.vue | 74 ++-- .../src/components/bucket/BucketSidebar.vue | 35 +- .../src/components/bucket/BucketTable.vue | 10 +- frontend/src/components/layout/AppLayout.vue | 30 +- frontend/src/components/layout/Footer.vue | 103 ++--- frontend/src/components/layout/Header.vue | 32 +- frontend/src/components/layout/Navbar.vue | 3 +- .../src/components/layout/ProgressLoader.vue | 1 + .../components/object/ObjectFileDetails.vue | 12 +- frontend/src/components/object/ObjectList.vue | 3 +- .../src/components/object/ObjectSidebar.vue | 25 +- .../src/components/object/ObjectTable.vue | 14 +- .../src/components/object/ObjectVersion.vue | 17 +- frontend/src/views/HomeView.vue | 263 ++++++------ .../unit/components/layout/Footer.spec.ts | 7 +- 23 files changed, 577 insertions(+), 593 deletions(-) delete mode 100644 frontend/src/assets/base.css diff --git a/app/app.ts b/app/app.ts index 090b170b..d3ea43d6 100644 --- a/app/app.ts +++ b/app/app.ts @@ -6,6 +6,7 @@ import { join } from 'path'; import Problem from 'api-problem'; import querystring from 'querystring'; +import { name as appName, version as appVersion } from './package.json'; import { getLogger, httpLogger } from './src/components/log'; import { getGitRevision, readIdpList } from './src/components/utils'; @@ -64,9 +65,9 @@ appRouter.get('/api', (_req: Request, res: Response): void => { res.status(200).json({ app: { gitRev: state.gitRev, - name: process.env.npm_package_name, + name: appName, nodeVersion: process.version, - version: process.env.npm_package_version + version: appVersion }, endpoints: ['/api/v1'], versions: [1] @@ -91,7 +92,7 @@ app.use((err: Problem, _req: Request, res: Response, _next: () => void): void => err.send(res, null); } else { new Problem(500, 'Server Error', { - detail: (err.message) ? err.message : err + detail: err.message ? err.message : err }).send(res); } }); diff --git a/app/tsconfig.json b/app/tsconfig.json index bbb05680..e5ca9a50 100644 --- a/app/tsconfig.json +++ b/app/tsconfig.json @@ -32,7 +32,7 @@ // "types": [], /* Specify type package names to be included without being referenced in a source file. */ // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ - // "resolveJsonModule": true, /* Enable importing .json files. */ + "resolveJsonModule": true, /* Enable importing .json files. */ // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ /* JavaScript Support */ // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 22cb29e3..283dab19 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -21,7 +21,7 @@ "pinia-plugin-persistedstate": "^3.2.0", "primeflex": "^3.3.1", "primeicons": "^6.0.1", - "primevue": "~3.34.1", + "primevue": "^3.40.1", "qrcode.vue": "^3.4.1", "vee-validate": "^4.11.8", "vue": "^3.3.7", @@ -5472,9 +5472,9 @@ "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA==" }, "node_modules/primevue": { - "version": "3.34.1", - "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.34.1.tgz", - "integrity": "sha512-5QPy8I+TMYSQgC0Bs/9vINsOVjgCOQFAr6uz49Wzcj8u04qJ2mG/z6OhAana+f4yKTTHVwHLVnuGkrIp/nI9DA==", + "version": "3.40.1", + "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.40.1.tgz", + "integrity": "sha512-TIFjoSUDiTmlxwQddaWckzcPIpj0F8a6ZMnm0tpAD/ieyUIHnNpbAi5de8LQf8eF0b+x5EkOkdjdngSlD+iPCw==", "peerDependencies": { "vue": "^3.0.0" } @@ -10983,9 +10983,9 @@ "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA==" }, "primevue": { - "version": "3.34.1", - "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.34.1.tgz", - "integrity": "sha512-5QPy8I+TMYSQgC0Bs/9vINsOVjgCOQFAr6uz49Wzcj8u04qJ2mG/z6OhAana+f4yKTTHVwHLVnuGkrIp/nI9DA==", + "version": "3.40.1", + "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.40.1.tgz", + "integrity": "sha512-TIFjoSUDiTmlxwQddaWckzcPIpj0F8a6ZMnm0tpAD/ieyUIHnNpbAi5de8LQf8eF0b+x5EkOkdjdngSlD+iPCw==", "requires": {} }, "property-expr": { diff --git a/frontend/package.json b/frontend/package.json index 41137823..f7ffd692 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -36,7 +36,7 @@ "pinia-plugin-persistedstate": "^3.2.0", "primeflex": "^3.3.1", "primeicons": "^6.0.1", - "primevue": "~3.34.1", + "primevue": "^3.40.1", "qrcode.vue": "^3.4.1", "vee-validate": "^4.11.8", "vue": "^3.3.7", diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 1400ec50..04abafb9 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -44,15 +44,28 @@ onErrorCaptured((e: Error) => { + + diff --git a/frontend/src/assets/base.css b/frontend/src/assets/base.css deleted file mode 100644 index e910a752..00000000 --- a/frontend/src/assets/base.css +++ /dev/null @@ -1,86 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -/* @media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} */ - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: - color 0.5s, - background-color 0.5s; - line-height: 1.6; - font-family: - BCSans, - Inter, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/frontend/src/assets/main.scss b/frontend/src/assets/main.scss index 13ba55d4..58a5ea10 100644 --- a/frontend/src/assets/main.scss +++ b/frontend/src/assets/main.scss @@ -1,13 +1,75 @@ -@import './base.css'; -@import './primevue.scss'; -@import './variables.scss'; +:root { + font-size: 16px; +} + +body, +body::before, +body::after { + box-sizing: border-box; + margin: 0; +} -#app { - margin: 0 auto; +body { + min-height: 100vh; + color: var(--text-color); + background: white; + transition: + color 0.5s, + background-color 0.5s; + font-family: + BCSans, + Inter, + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + Oxygen, + Ubuntu, + Cantarell, + "Fira Sans", + "Droid Sans", + "Helvetica Neue", + sans-serif; font-weight: normal; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* text */ +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + padding: 0; + font-weight: 600; + // line-height: 1.2em; +} + +h1 { + font-size: 2.074rem; +} +h2 { + font-size: 1.728rem; +} +h3 { + font-size: 1.44rem; +} +h4 { + font-size: 1.2rem; +} +h5 { + font-size: 1.1rem; +} + +p { + line-height: 1.5rem; + margin-top: 0; } -// ----- links and buttons: a, a:visited { color: $bcbox-link-text; @@ -17,20 +79,14 @@ a:visited { } } -.p-button, -.p-inputswitch-slider { - &:hover { - opacity: 0.8; - } -} -// underline button text -.p-button:hover { - text-decoration: underline; -} -// don't underline button icons -.p-button .p-button-icon:before { - text-decoration: none; +.wrap-block { display: inline-block; + overflow-wrap: break-word; + width: 100%; + + td { + width: inherit; + } } .truncate { @@ -47,130 +103,143 @@ a:visited { text-indent: 0 !important; } -// -------- layout - -.content-center { - text-align: center !important; +.drop-shadow { + box-shadow: 0 6px 6px -1px rgb(145, 145, 145); } -.content-right { - text-align: right !important; +/* layout */ +.layout-main { + max-width: 1400px; } - -.permissions-modal { - width: 800px; +.bucket-table { + max-width: 800px; +} +.object-table { + max-width: 1200px; } -// details page / sidebar -.details-grid { - h2 { - margin-bottom: 1rem; - } - .col-fixed { - width: 150px; // label column - } - // make datatable look like grid - .p-datatable { - thead th { - padding-top: 0; +/* footer */ +.gov-footer { + background-color: #003366 !important; + border-top: 2px solid #fcba19; + a { + display: inline-block; + padding: 0.5rem 1rem; + color: #ffffff; + font-size: 1rem; + text-decoration: none; + &:hover { + text-decoration: underline; } - // highlight the row for the currently selected version - tr.selected-row { - background-color: $bcbox-highlight-background !important; + &:focus { + outline: none; } - td { - padding: 0.5rem; + &:visited { + color: #ffffff; } - th:first-child, - td:first-child { - padding-left: 0; + } + + & > div:last-child { + order: 1; + } + .version { + color: #ffffff; + float: right; + } +} + +/* buttons */ +.p-button:hover { + text-decoration: underline; + opacity: 0.8; +} +.p-button .p-button-icon:before { + text-decoration: none; + display: inline-block; +} + +.p-button { + &:not(.p-button-secondary, .p-button-success, .p-button-info, .p-button-warning, .p-button-help, .p-button-danger) { + color: $bcbox-primary; + &:not(.p-button-outlined, .p-button-text) { + background-color: $bcbox-primary; + border-color: $bcbox-primary; + color: $bcbox-outline-on-primary; } } } -.details-value-column { - width: 40rem; + +.p-button-outlined { + border-width: 2px; } -.sidebar .details-value-column { - width: 20rem; +.p-confirm-dialog-reject { + border: 2px solid $bcbox-primary; } -// eof details page / sidebar -// wrap text -.wrap-block { - display: inline-block; - overflow-wrap: break-word; - width: 100%; +/* checkboxes, radios, input switches */ +.p-checkbox-checked .p-checkbox-box, +.p-checkbox-box.p-highlight, +.p-radiobutton-checked .p-radiobutton-box, +.p-inputswitch-checked .p-inputswitch-slider:not(.p-disabled) { + background-color: $bcbox-primary; + border-color: $bcbox-primary; + &:hover { + opacity: 0.8; + } } -td .wrap-block { - width: inherit; +.p-tag { + background-color: $bcbox-primary; + font-size: 1rem; + padding: 0.25rem 0.75rem; + font-weight: 400; } -// --------- Info/settings dialog modals -.bcbox-info-dialog { - &.p-dialog { - .p-dialog-header { - padding-bottom: 0; - - .svg-inline--fa { - color: $bcbox-primary; - font-size: 1.8rem; - padding-right: 0.75rem; - padding-top: 0.15rem; - } +/* datatable */ +.p-datatable, +.p-treetable { + .p-datatable-loading-overlay, + .p-treetable-loading-overlay { + background: white; + opacity: 0.8; + } - .p-dialog-title { - flex-grow: 1; - font-size: 1.8rem; - font-weight: bold; - } - } + thead > tr > th { + background-color: transparent !important; + } - .bcbox-info-dialog-subhead { - font-weight: normal; - margin-bottom: 1.5rem; - padding-left: 3.1rem; - @extend .wrap-block; + &.p-datatable-striped tbody > tr { + &:nth-child(even) { + background-color: $bcbox-table-stripe-background; } } -} -.drop-shadow { - box-shadow: 0 6px 6px -1px rgb(145, 145, 145); -} - -.gov-footer { - background-color: #003366 !important; - border-top: 2px solid #fcba19; - flex-shrink: 0; - min-height: 2.5rem; - min-width: 100%; - padding-bottom: 0; - padding-top: 0; - - a { - color: #ffffff; - font-size: 1rem; - text-decoration: none; - &:focus { - outline: none; + tbody { + tr { + &.p-highlight, + &.selected-row { + background: $bcbox-highlight-background !important; + } + &:focus { + outline: none !important; + } } } - .button > span { - color: #ffffff; - font-size: 1rem; - font-weight: normal; - text-decoration: none; - text-transform: none; + .p-column-title { + font-weight: bold; } -} -// ---------- datatables + .p-paginator { + justify-content: right; + } -.p-datatable { - .p-datatable-loading-overlay { - background: white; - opacity: 0.8; + .action-buttons { + text-align: right; + } + .action-buttons .p-button { + padding: 0; + margin-left: 1rem; + font-size: 1.25rem; } } @@ -180,7 +249,91 @@ td .wrap-block { cursor: pointer; } } + .p-input-icon-clear-right { position: absolute !important; right: 0rem; } + +/* modals */ +.bcbox-info-dialog { + .p-dialog-header { + padding-bottom: 0; + + .svg-inline--fa { + color: $bcbox-primary; + font-size: 1.8rem; + padding-right: 0.75rem; + border: 0; + } + + .p-dialog-title { + flex-grow: 1; + @extend h2; + } + } + + .bcbox-info-dialog-subhead { + font-weight: normal; + margin-bottom: 1.5rem; + padding-left: 3.1rem; + @extend .wrap-block; + } +} + +.p-confirm-dialog { + max-width: 50%; +} + +.p-dialog-footer { + display: flex; + flex-direction: row-reverse; + justify-content: left; +} + +/* side panel */ + +.side-panel { + .panel-header { + margin-bottom: 1.5rem; + + & > .svg-inline--fa { + color: $bcbox-primary; + margin-top: 0.4rem; + font-size: 1.7rem; + } + .p-button .svg-inline--fa { + margin-top: 0.5rem; + font-size: 1.2rem; + } + } + h1 { + font-size: 1.728rem; + } + h2 { + font-size: 1.44rem; + margin-bottom: 0.5rem; + } +} + +/* details grid */ + +.details-grid { + h2 { + margin-bottom: 1rem; + } + .col-fixed { + width: 150px; // label column + } + .details-value-column { + width: 40rem; + } + .sidebar .details-value-column { + width: 20rem; + } +} + +/* share modal */ +a.p-tabview-header-action { + text-decoration: none; +} diff --git a/frontend/src/assets/variables.scss b/frontend/src/assets/variables.scss index de191499..a7c46cdb 100644 --- a/frontend/src/assets/variables.scss +++ b/frontend/src/assets/variables.scss @@ -1,9 +1,17 @@ -// General font/etc colors +/* --------- variable overrides for primevue--------- */ +// ref: https://primevue.org/colors/ +:root { + --text-color: #495057; + --primary-color: #036; +} + +/* -------- custom css variables --------- */ +// buttons, links $bcbox-primary: #036; $bcbox-link-text: #1a5a96; $bcbox-link-text-hover: #00f; $bcbox-outline-on-primary: #fff; -// Panel/row/etc backgrounds +// highlighted sections, table rows $bcbox-highlight-background: #d9e1e8; $bcbox-table-stripe-background: #f2f2f2; diff --git a/frontend/src/components/bucket/BucketList.vue b/frontend/src/components/bucket/BucketList.vue index 711c2039..ccebaa06 100644 --- a/frontend/src/components/bucket/BucketList.vue +++ b/frontend/src/components/bucket/BucketList.vue @@ -46,29 +46,30 @@ onMounted(async () => { - - diff --git a/frontend/src/components/bucket/BucketSidebar.vue b/frontend/src/components/bucket/BucketSidebar.vue index 513b34fd..1b3011b5 100644 --- a/frontend/src/components/bucket/BucketSidebar.vue +++ b/frontend/src/components/bucket/BucketSidebar.vue @@ -65,32 +65,25 @@ watch(props, () => { - - diff --git a/frontend/src/components/bucket/BucketTable.vue b/frontend/src/components/bucket/BucketTable.vue index 42be96f2..21657a73 100644 --- a/frontend/src/components/bucket/BucketTable.vue +++ b/frontend/src/components/bucket/BucketTable.vue @@ -242,7 +242,7 @@ watch(getBuckets, () => {