From 9e51d32904aa43b4d045dc35fb169f090747b758 Mon Sep 17 00:00:00 2001 From: jrgriffiniii <1443986+jrgriffiniii@users.noreply.github.com> Date: Tue, 10 Dec 2024 12:59:15 -0500 Subject: [PATCH] Implementing user interface updates for the Project Dashboard filter feature set --- app/assets/stylesheets/_dashboard.scss | 543 ++++++++++--------- app/assets/stylesheets/_projects.scss | 154 +++--- app/javascript/entrypoints/pulDataTables.js | 4 +- app/views/welcome/_projects_listing.html.erb | 79 ++- package.json | 1 + yarn.lock | 10 + 6 files changed, 446 insertions(+), 345 deletions(-) diff --git a/app/assets/stylesheets/_dashboard.scss b/app/assets/stylesheets/_dashboard.scss index 022be1ca..98082d98 100644 --- a/app/assets/stylesheets/_dashboard.scss +++ b/app/assets/stylesheets/_dashboard.scss @@ -1,357 +1,392 @@ - @import "variables"; @import "typography"; @import "bootstrap"; .fixed-table { - width: 100%; - table-layout: fixed; + width: 100%; + table-layout: fixed; } .fixed-table td { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } // hide pagination menu .dataTables_length { - display: none; + display: none; } // put pages and totals on the same line .dataTables_info { - float: left; + float: left; } // Put pagination on the far right .dataTables_paginate { - float: right; - .paginate_button { - padding: 0.25em; - color: $gray-60; - } - .paginate_button.current, .paginate_button.disabled { - text-decoration: none; + float: right; + .paginate_button { + padding: 0.25em; + color: $gray-60; + } + .paginate_button.current, + .paginate_button.disabled { + text-decoration: none; + } +} + +.projects { + &-tabs { + align-content: center; + } + + &-filter { + text-align: center; + + &-btn { + height: 100%; } + } } -#projects-listing, #projects-listing-pending, #projects-listing-approved { - table-layout: fixed; - border: 1px solid $gray-20; - border-radius: 3px; - padding: 5px 0px; +#projects-listing, +#projects-listing-pending, +#projects-listing-approved { + table-layout: fixed; + border: 1px solid $gray-20; + border-radius: 3px; + padding: 5px 0px; + align-items: center; + gap: 16px; + color: $gray-60; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 18px; + width: 100%; + + a { + text-decoration: none !important; + } + + thead .project th, + tbody .project td { + border: none; + } + + .project { + display: flex; + flex-wrap: wrap; + font-family: $libre-franklin; + border-bottom: 1px solid $gray-20; + background: $white; + padding: 12px; align-items: center; - gap: 16px; - color: $gray-60; - font-size: 12px; - font-style: normal; - font-weight: 400; - line-height: 18px; - width: 100%; - a { - text-decoration: none !important; + gap: 8px; + align-self: stretch; + + td:first-child { + width: 100%; } - thead .project th, tbody .project td { - border: none; + td: { + border: none; } .project { - display: flex; - flex-wrap: wrap; - font-family: $libre-franklin; - border-bottom: 1px solid $gray-20; - background: $white; - padding: 12px; - align-items: center; - gap: 8px; - align-self: stretch; - - td:first-child { - width: 100%; - } + display: flex; + flex-wrap: wrap; + font-family: $libre-franklin; + border-bottom: 1px solid $gray-20; + background: $white; + padding: 12px; + align-items: center; + gap: 8px; + align-self: stretch; + + td:first-child { + width: 100%; + } + } - td: { - border: none; - } + h2 { + display: block; + overflow: hidden; + text-overflow: ellipsis; + color: $black; + font-family: $libre-franklin; + font-size: 16px !important; + font-style: normal; + font-weight: 600; + line-height: 24px; + text-decoration: none; + } - h2 { - display: block; - overflow: hidden; - text-overflow: ellipsis; - color: $black; - font-family: $libre-franklin; - font-size: 16px !important; - font-style: normal; - font-weight: 600; - line-height: 24px; - text-decoration: none; - } - .details { - display: flex; - padding: 5px 0px; - align-items: center; - gap: 16px; - color: $gray-60; - font-size: 12px; - font-style: normal; - font-weight: 400; - line-height: 18px; - li { - float: left; - list-style: none; - padding: 0em .2em 0em 2em; - } - } + .details { + display: flex; + padding: 5px 0px; + align-items: center; + gap: 16px; + color: $gray-60; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 18px; + + li { + float: left; + list-style: none; + padding: 0em 0.2em 0em 2em; + } } .last { - border-bottom: none; + border-bottom: none; } .status { - text-transform: capitalize; + text-transform: capitalize; } .status::before { - content: ""; - display: inline-flex; - width: 20px; - height: 20px; - vertical-align: top; + content: ""; + display: inline-flex; + width: 20px; + height: 20px; + vertical-align: top; } .active { - background: url("status_active.svg") no-repeat; + background: url("status_active.svg") no-repeat; } .pending { - background: url("status_pending.svg") no-repeat; + background: url("status_pending.svg") no-repeat; } .approved { - background: url("status_approved.svg") no-repeat; + background: url("status_approved.svg") no-repeat; } .rejected { - background: url("status_rejected.svg") no-repeat; + background: url("status_rejected.svg") no-repeat; } .project-type { - text-transform: capitalize; + text-transform: capitalize; } .project-type::before { - content: ""; - display: inline-flex; - background: url("project_type.svg") no-repeat; - width: 20px; - height: 20px; - vertical-align: top; + content: ""; + display: inline-flex; + background: url("project_type.svg") no-repeat; + width: 20px; + height: 20px; + vertical-align: top; } .user-role { - text-transform: capitalize; + text-transform: capitalize; } .user-role::before { - content: ""; - display: inline-flex; - background: url("user_role.svg") no-repeat; - width: 20px; - height: 20px; - vertical-align: top; + content: ""; + display: inline-flex; + background: url("user_role.svg") no-repeat; + width: 20px; + height: 20px; + vertical-align: top; } .last-download::before { - content: ""; - display: inline-flex; - background: url("last_download.svg") no-repeat; - width: 20px; - height: 20px; - vertical-align: top; + content: ""; + display: inline-flex; + background: url("last_download.svg") no-repeat; + width: 20px; + height: 20px; + vertical-align: top; } .last-activity::before { - content: ""; - display: inline-flex; - background: url("last_activity.svg") no-repeat; - width: 20px; - height: 20px; - vertical-align: top; + content: ""; + display: inline-flex; + background: url("last_activity.svg") no-repeat; + width: 20px; + height: 20px; + vertical-align: top; } - + } } #admin-listing { - .section { - margin-top: 2em; - } + .section { + margin-top: 2em; + } } .welcome-container { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 3.75rem; + align-self: stretch; + + .welcome-pane { display: flex; - flex-direction: column; - align-items: flex-start; - gap: 3.75rem; + justify-content: space-between; + align-items: center; align-self: stretch; + } - .welcome-pane { - display: flex; - justify-content: space-between; - align-items: center; - align-self: stretch; + .detail-pane { + display: flex; + align-items: center; + gap: 1.25rem; + align-self: stretch; + + .main { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1.25rem; } - .detail-pane { + .sidebar { + display: flex; + flex-direction: column; + align-items: center; + gap: 1.25rem; + align-self: stretch; + + .downloads { display: flex; + width: 17.8125rem; + flex-direction: column; align-items: center; - gap: 1.25rem; - align-self: stretch; - .main { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 1.25rem; + border-radius: 0.75rem; + background: $gray-10; + + .header { + display: flex; + padding: 0.75rem 0.75rem 0rem 0.75rem; + justify-content: space-between; + align-items: center; + align-self: stretch; } + .details { + display: flex; + align-items: center; + align-self: stretch; - .sidebar { + .content { display: flex; + padding: 0.5rem 0rem 0.5rem 0.5rem; flex-direction: column; - align-items: center; - gap: 1.25rem; - align-self: stretch; - - .downloads { + align-items: flex-start; + flex: 1 0 0; + overflow: hidden; + + .container1 { + display: flex; + padding: 0.5rem 0.5rem 0.5rem 0.5rem; + flex-direction: column; + align-self: stretch; + align-items: flex-start; + flex: 1 0 0; + + .container2 { display: flex; - width: 17.8125rem; flex-direction: column; - align-items: center; + align-items: flex-start; + align-self: stretch; + border-radius: 0.5rem; - border-radius: 0.75rem; - background: $gray-10; + .container3 { + display: flex; + flex-direction: column; + align-items: flex-start; + align-self: stretch; - .header { + .download-item { display: flex; - padding: 0.75rem 0.75rem 0rem 0.75rem; - justify-content: space-between; - align-items: center; + padding: 0.75rem; + flex-direction: column; + align-items: flex-start; + gap: 0.125rem; align-self: stretch; - } - .details { - display: flex; - align-items: center; - align-self: stretch; - - .content { - display: flex; - padding: 0.5rem 0rem 0.5rem 0.5rem; - flex-direction: column; - align-items: flex-start; - flex: 1 0 0; - overflow: hidden; - - .container1 { - display: flex; - padding: 0.5rem 0.5rem 0.5rem 0.5rem; - flex-direction: column; - align-self: stretch; - align-items: flex-start; - flex: 1 0 0; - - .container2 { - display: flex; - flex-direction: column; - align-items: flex-start; - align-self: stretch; - border-radius: 0.5rem; - - .container3 { - display: flex; - flex-direction: column; - align-items: flex-start; - align-self: stretch; - - .download-item { - display: flex; - padding: 0.75rem; - flex-direction: column; - align-items: flex-start; - gap: 0.125rem; - align-self: stretch; - border-bottom: 1px solid $gray-10; - background: $white; - - .title { - height: 1.3125rem; - align-self: stretch; - overflow: hidden; - color: $black; - text-overflow: ellipsis; - white-space: nowrap; - /* Body XXS Bold */ - font-family: "Libre Franklin"; - font-size: 0.75rem; - font-style: normal; - font-weight: 600; - line-height: 1.125rem; /* 150% */ - - a { - text-decoration: none; - color: $black; - } - } - - .details { - display: flex; - justify-content: space-between; - align-items: center; - align-self: stretch; - - .expiration { - color: $gray-60; - /* Body XXS */ - font-family: "Libre Franklin"; - font-size: 0.75rem; - font-style: normal; - font-weight: 400; - line-height: 1.125rem; /* 150% */ - } - - .size { - color: $gray-60; - /* Body XXS */ - font-family: "Libre Franklin"; - font-size: 0.75rem; - font-style: normal; - font-weight: 400; - line-height: 1.125rem; /* 150% */ - } - } - } - } - } - } + border-bottom: 1px solid $gray-10; + background: $white; + + .title { + height: 1.3125rem; + align-self: stretch; + overflow: hidden; + color: $black; + text-overflow: ellipsis; + white-space: nowrap; + /* Body XXS Bold */ + font-family: "Libre Franklin"; + font-size: 0.75rem; + font-style: normal; + font-weight: 600; + line-height: 1.125rem; /* 150% */ + + a { + text-decoration: none; + color: $black; + } } - .scrollbar { - display: flex; - padding: 1rem 0.125rem 0.25rem 0.125rem; - flex-direction: column; - align-items: center; - align-self: stretch; - - .indicator { - width: 0.25rem; - height: 3.125rem; - border-radius: 0.5rem; - background: $gray-10; - } + .details { + display: flex; + justify-content: space-between; + align-items: center; + align-self: stretch; + + .expiration { + color: $gray-60; + /* Body XXS */ + font-family: "Libre Franklin"; + font-size: 0.75rem; + font-style: normal; + font-weight: 400; + line-height: 1.125rem; /* 150% */ + } + + .size { + color: $gray-60; + /* Body XXS */ + font-family: "Libre Franklin"; + font-size: 0.75rem; + font-style: normal; + font-weight: 400; + line-height: 1.125rem; /* 150% */ + } } + } } + } + } + } + + .scrollbar { + display: flex; + padding: 1rem 0.125rem 0.25rem 0.125rem; + flex-direction: column; + align-items: center; + align-self: stretch; + + .indicator { + width: 0.25rem; + height: 3.125rem; + border-radius: 0.5rem; + background: $gray-10; } + } } + } } + } } diff --git a/app/assets/stylesheets/_projects.scss b/app/assets/stylesheets/_projects.scss index cfca9070..ca52e632 100644 --- a/app/assets/stylesheets/_projects.scss +++ b/app/assets/stylesheets/_projects.scss @@ -3,97 +3,95 @@ @import "bootstrap"; #project-details-heading { - margin-bottom: 1.5em; + margin-bottom: 1.5em; - .status { - float: right; - border-radius: 0.5em; - padding: 0.5em 0.75em 0.5em 0.5em; - text-transform: capitalize; - font-weight: bold; - } + .status { + float: right; + border-radius: 0.5em; + padding: 0.5em 0.75em 0.5em 0.5em; + text-transform: capitalize; + font-weight: bold; + } - .status::before { - content: ""; - width: 20px; - height: 20px; - } + .status::before { + content: ""; + width: 20px; + height: 20px; + } - .active { - background: url("status_active.svg") no-repeat; - background-color: $status-info; - background-position: left; - padding-left: 20px; - color: $blue-dark; - } + .active { + background: url("status_active.svg") no-repeat; + background-color: $status-info; + background-position: left; + padding-left: 20px; + color: $blue-dark; + } - .pending { - background: url("status_pending.svg") no-repeat; - background-color: $status-warning; - background-position: left; - padding-left: 20px; - color: $yellow-dark; + .pending { + background: url("status_pending.svg") no-repeat; + background-color: $status-warning; + background-position: left; + padding-left: 20px; + color: $yellow-dark; + } - } + .approved { + background: url("status_approved.svg") no-repeat; + background-color: $status-success; + background-position: left; + padding-left: 20px; + color: $green-dark; + } - .approved { - background: url("status_approved.svg") no-repeat; - background-color: $status-success; - background-position: left; - padding-left: 20px; - color: $green-dark; - } + .rejected { + background: url("status_rejected.svg") no-repeat; + background-color: $status-error; + background-position: left; + padding-left: 20px; + color: $red-darker; + } - .rejected { - background: url("status_rejected.svg") no-repeat; - background-color: $status-error; - background-position: left; - padding-left: 20px; - color: $red-darker; - } - - #project-description { - color: $black; - font-family: "Libre Franklin"; - font-size: 1em; - font-style: normal; - font-weight: 400; - line-height: 1.5em; - } + #project-description { + color: $black; + font-family: "Libre Franklin"; + font-size: 1em; + font-style: normal; + font-weight: 400; + line-height: 1.5em; + } - .truncate { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - } + .truncate { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + } - a#show-more-less-link { - color: $gray-60; - } + a#show-more-less-link { + color: $gray-60; + } - .label { - font-weight: bold; - } - - .date-and-data-info ul { - padding: 0; - } - - .date-and-data-info li { - float: left; - list-style-type: none; - line-height: 1em; - } + .label { + font-weight: bold; + } - .date-and-data-info li:first-child:after { - content: "|"; - padding: 0 .5em; - } + .date-and-data-info ul { + padding: 0; + } + .date-and-data-info li { + float: left; + list-style-type: none; + line-height: 1em; + } + + .date-and-data-info li:first-child:after { + content: "|"; + padding: 0 0.5em; + } } .latest-download-link { - margin: 1em 0em 1em 0em; - display: block; + margin: 1em 0em 1em 0em; + display: block; } diff --git a/app/javascript/entrypoints/pulDataTables.js b/app/javascript/entrypoints/pulDataTables.js index 759e47d8..47b7a117 100644 --- a/app/javascript/entrypoints/pulDataTables.js +++ b/app/javascript/entrypoints/pulDataTables.js @@ -19,7 +19,9 @@ export function setupTable(tableId) { // If we have a table initialize it with DataTables if (table) { - table.dataTable(datasetOptions); + if (table.dataTable) { + table.dataTable(datasetOptions); + } } } diff --git a/app/views/welcome/_projects_listing.html.erb b/app/views/welcome/_projects_listing.html.erb index 53b765f3..5b90e68a 100644 --- a/app/views/welcome/_projects_listing.html.erb +++ b/app/views/welcome/_projects_listing.html.erb @@ -1,18 +1,73 @@
- - + +
+ +
+ +
+ +
+ +
+
+
+ +
+
+
+ + +
+ + + +
+
+ +
+ +
+ +
+
+ +
+
+
+ +
+ +
+
+ +
+ + - - - - - - + + + + + + - - + + + <%= render :partial => "project_list_view", :collection => projects, :as => :project %> - +
titlestatustype - roledownloadactivityquota_usagetitlestatustype + roledownloadactivityquota_usage
diff --git a/package.json b/package.json index ac89936d..ab958486 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "eslint-config-airbnb-base": "^15.0.0", "eslint-plugin-import": "^2.27.5", "jsdom": "^21.1.0", + "prettier": "3.4.2", "rollup": "^4.24.0", "vite": "^5.4.8", "vite-plugin-ruby": "^5.0.0", diff --git a/yarn.lock b/yarn.lock index 3afdb47a..3a4b19c3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3506,6 +3506,15 @@ __metadata: languageName: node linkType: hard +"prettier@npm:3.4.2": + version: 3.4.2 + resolution: "prettier@npm:3.4.2" + bin: + prettier: bin/prettier.cjs + checksum: 10c0/99e076a26ed0aba4ebc043880d0f08bbb8c59a4c6641cdee6cdadf2205bdd87aa1d7823f50c3aea41e015e99878d37c58d7b5f0e663bba0ef047f94e36b96446 + languageName: node + linkType: hard + "pretty-format@npm:^27.5.1": version: 27.5.1 resolution: "pretty-format@npm:27.5.1" @@ -4152,6 +4161,7 @@ __metadata: eslint-plugin-import: "npm:^2.27.5" jquery: "npm:^3.6.3" jsdom: "npm:^21.1.0" + prettier: "npm:3.4.2" rollup: "npm:^4.24.0" vite: "npm:^5.4.8" vite-plugin-rails: "npm:^0.5.0"