From 5de149394932407d49a0002c0592fed22ac3bfa6 Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Thu, 6 Feb 2025 17:10:53 -0500 Subject: [PATCH 01/10] Change sort icon and sort header ui --- src/registrar/assets/js/uswds-edited.js | 20 +++++++++- .../assets/src/js/getgov/formset-forms.js | 1 + .../assets/src/sass/_theme/_tables.scss | 39 ++++++++++++++----- 3 files changed, 49 insertions(+), 11 deletions(-) diff --git a/src/registrar/assets/js/uswds-edited.js b/src/registrar/assets/js/uswds-edited.js index 9d4dd2e51..ae246b05c 100644 --- a/src/registrar/assets/js/uswds-edited.js +++ b/src/registrar/assets/js/uswds-edited.js @@ -5695,19 +5695,35 @@ const createHeaderButton = (header, headerName) => { buttonEl.setAttribute("tabindex", "0"); buttonEl.classList.add(SORT_BUTTON_CLASS); // ICON_SOURCE + // ---- END DOTGOV EDIT + // Change icons on sort, use source from arro_upward and arrow_downward + // buttonEl.innerHTML = Sanitizer.escapeHTML` + // + // + // + // + // + // + // + // + // + // + // + // `; buttonEl.innerHTML = Sanitizer.escapeHTML` - + - + `; + // ---- END DOTGOV EDIT header.appendChild(buttonEl); updateSortLabel(header, headerName); }; diff --git a/src/registrar/assets/src/js/getgov/formset-forms.js b/src/registrar/assets/src/js/getgov/formset-forms.js index 27b85212e..faad54639 100644 --- a/src/registrar/assets/src/js/getgov/formset-forms.js +++ b/src/registrar/assets/src/js/getgov/formset-forms.js @@ -208,6 +208,7 @@ function hideDeletedForms() { * it everywhere. */ export function initFormsetsForms() { + console.log('init formsets'); let formIdentifier = "form" let repeatableForm = document.querySelectorAll(".repeatable-form"); let container = document.querySelector("#form-container"); diff --git a/src/registrar/assets/src/sass/_theme/_tables.scss b/src/registrar/assets/src/sass/_theme/_tables.scss index 37ae22b1b..d13cb8b0a 100644 --- a/src/registrar/assets/src/sass/_theme/_tables.scss +++ b/src/registrar/assets/src/sass/_theme/_tables.scss @@ -1,4 +1,5 @@ @use "uswds-core" as *; +@use "cisa_colors" as *; td, th { @@ -68,7 +69,9 @@ th { border-bottom: 1px solid color('base-lighter'); } - thead th { + thead th, + thead th[aria-sort], + thead th[aria-sort] { color: color('primary-darker'); border-bottom: 2px solid color('base-light'); } @@ -93,17 +96,35 @@ th { } } - @include at-media(tablet-lg) { - th[data-sortable] .usa-table__header__button { - right: auto; - - &[aria-sort=ascending], - &[aria-sort=descending], - &:not([aria-sort]) { - right: auto; + th[aria-sort], + th[data-sortable][aria-sort=ascending], + th[data-sortable][aria-sort=descending] { + background-color: transparent; + .usa-table__header__button { + background-color: rgba(214, 233, 242, 0.6); + background-color: $theme-color-accent-cool-lightest; + border-radius: 4px; + // position: relative; + // left: 4px; + // top: 16px; + color: color('primary-darker'); + + &:hover { + background-color: rgba(214, 233, 242, 0.6); } } } + + @include at-media(tablet-lg) { + th[data-sortable] .usa-table__header__button, + th[data-sortable] .usa-table__header__button:not([aria-sort]), + th[data-sortable][aria-sort=ascending] .usa-table__header__button, + th[data-sortable][aria-sort=descending] .usa-table__header__button { + right: auto; + top: 12px; + transform: translateX(10px); + } + } } .dotgov-table--cell-padding-2 { From ec9df83154565e8d1ae74e4cbeed4ba6594b0454 Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Thu, 6 Feb 2025 20:01:15 -0500 Subject: [PATCH 02/10] Finish tweaking the UI --- .../assets/src/sass/_theme/_tables.scss | 49 ++++++++++--------- 1 file changed, 26 insertions(+), 23 deletions(-) diff --git a/src/registrar/assets/src/sass/_theme/_tables.scss b/src/registrar/assets/src/sass/_theme/_tables.scss index d13cb8b0a..4b9ccbb8a 100644 --- a/src/registrar/assets/src/sass/_theme/_tables.scss +++ b/src/registrar/assets/src/sass/_theme/_tables.scss @@ -1,5 +1,4 @@ @use "uswds-core" as *; -@use "cisa_colors" as *; td, th { @@ -42,13 +41,8 @@ th { } } -// The member table has an extra "expand" row, which looks like a single row. -// But the DOM disagrees - so we basically need to hide the border on both rows. -#members__table-wrapper .dotgov-table tr:nth-last-child(2) td, -#members__table-wrapper .dotgov-table tr:nth-last-child(2) th { - border-bottom: none; -} - +// .dotgov-table allows us to customize .usa-table on the user-facing pages, +// while leaving the default styles for use on the admin pages .dotgov-table { width: 100%; @@ -96,35 +90,44 @@ th { } } - th[aria-sort], + // Sortable headers th[data-sortable][aria-sort=ascending], th[data-sortable][aria-sort=descending] { background-color: transparent; .usa-table__header__button { - background-color: rgba(214, 233, 242, 0.6); - background-color: $theme-color-accent-cool-lightest; - border-radius: 4px; - // position: relative; - // left: 4px; - // top: 16px; + background-color: color('accent-cool-lightest'); + border-radius: units(.5); color: color('primary-darker'); - &:hover { - background-color: rgba(214, 233, 242, 0.6); + background-color: color('accent-cool-lightest'); } } } - @include at-media(tablet-lg) { th[data-sortable] .usa-table__header__button, - th[data-sortable] .usa-table__header__button:not([aria-sort]), - th[data-sortable][aria-sort=ascending] .usa-table__header__button, - th[data-sortable][aria-sort=descending] .usa-table__header__button { + th[data-sortable] .usa-table__header__button:not([aria-sort]) { + // position next to the copy right: auto; - top: 12px; - transform: translateX(10px); + // slide left to mock a margin between the copy and the icon + transform: translateX(units(1)); + // fix vertical alignment + top: units(1.5); } } + + // Currently the 'flash' when sort is clicked, + // this will become persistent if the double-sort bug is fixed + td[data-sort-active], + th[data-sort-active] { + background-color: color('primary-lightest'); + } +} + +// The member table has an extra "expand" row, which looks like a single row. +// But the DOM disagrees - so we basically need to hide the border on both rows. +#members__table-wrapper .dotgov-table tr:nth-last-child(2) td, +#members__table-wrapper .dotgov-table tr:nth-last-child(2) th { + border-bottom: none; } .dotgov-table--cell-padding-2 { From 1ca3fba2f74f1065e40c7ad8145978595bdc9763 Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Thu, 6 Feb 2025 20:04:29 -0500 Subject: [PATCH 03/10] cleanup --- src/registrar/assets/src/js/getgov/formset-forms.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/registrar/assets/src/js/getgov/formset-forms.js b/src/registrar/assets/src/js/getgov/formset-forms.js index faad54639..27b85212e 100644 --- a/src/registrar/assets/src/js/getgov/formset-forms.js +++ b/src/registrar/assets/src/js/getgov/formset-forms.js @@ -208,7 +208,6 @@ function hideDeletedForms() { * it everywhere. */ export function initFormsetsForms() { - console.log('init formsets'); let formIdentifier = "form" let repeatableForm = document.querySelectorAll(".repeatable-form"); let container = document.querySelector("#form-container"); From f28ec7cf74d132eab38f328a179f9858b7706091 Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Thu, 6 Feb 2025 20:06:54 -0500 Subject: [PATCH 04/10] cleanup --- src/registrar/assets/src/sass/_theme/_tables.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/registrar/assets/src/sass/_theme/_tables.scss b/src/registrar/assets/src/sass/_theme/_tables.scss index 4b9ccbb8a..d67b08041 100644 --- a/src/registrar/assets/src/sass/_theme/_tables.scss +++ b/src/registrar/assets/src/sass/_theme/_tables.scss @@ -64,7 +64,6 @@ th { } thead th, - thead th[aria-sort], thead th[aria-sort] { color: color('primary-darker'); border-bottom: 2px solid color('base-light'); From e827a0559940e0a208475c4b11da9e0f3bb41350 Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Tue, 18 Feb 2025 12:47:30 -0700 Subject: [PATCH 05/10] add aria-label --- src/registrar/templates/admin/app_list.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/registrar/templates/admin/app_list.html b/src/registrar/templates/admin/app_list.html index aaf3dc423..c97f4cfee 100644 --- a/src/registrar/templates/admin/app_list.html +++ b/src/registrar/templates/admin/app_list.html @@ -45,16 +45,17 @@ {% endif %} {% if model.add_url %} - {% translate 'Add' %} + {% comment %} Remove the 's' from the end of the string to avoid text like "Add domain requests" {% endcomment %} + {% translate 'Add' %} {% else %} {% endif %} {% if model.admin_url and show_changelinks %} {% if model.view_only %} - {% translate 'View' %} + {% translate 'View' %} {% else %} - {% translate 'Change' %} + {% translate 'Change' %} {% endif %} {% elif show_changelinks %} From 10d1f79668d88ff6e68f57ca0214320caa6a60a3 Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Tue, 18 Feb 2025 13:12:13 -0700 Subject: [PATCH 06/10] Add heading --- src/registrar/templates/admin/app_list.html | 23 +++++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/src/registrar/templates/admin/app_list.html b/src/registrar/templates/admin/app_list.html index c97f4cfee..30bdfb40b 100644 --- a/src/registrar/templates/admin/app_list.html +++ b/src/registrar/templates/admin/app_list.html @@ -3,6 +3,8 @@ {% if app_list %} {% for app in app_list %}
+ {# .gov override: display the app name as a h2 rather than a table header #} +

{{ app.name }}

{# .gov override: add headers #} @@ -13,15 +15,18 @@ {% endif %} - {% if show_changelinks %} - - {% else %} - - {% endif %} + {# .gov override: hide headers #} + {% comment %} + {% if show_changelinks %} + + {% else %} + + {% endif %} + {% endcomment %} From d394e47f4c5a3e6e5d89cbe25896758327358854 Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Wed, 19 Feb 2025 10:02:18 -0700 Subject: [PATCH 07/10] use caption instead --- .../assets/src/sass/_theme/_admin.scss | 20 +++++++------ .../assets/src/sass/_theme/_uswds-theme.scss | 1 + src/registrar/templates/admin/app_list.html | 28 +++++++++++-------- 3 files changed, 28 insertions(+), 21 deletions(-) diff --git a/src/registrar/assets/src/sass/_theme/_admin.scss b/src/registrar/assets/src/sass/_theme/_admin.scss index a15d1eabe..9a00cf022 100644 --- a/src/registrar/assets/src/sass/_theme/_admin.scss +++ b/src/registrar/assets/src/sass/_theme/_admin.scss @@ -520,15 +520,6 @@ input[type=submit].button--dja-toolbar:focus, input[type=submit].button--dja-too } } -.module--custom { - a { - font-size: 13px; - font-weight: 600; - border: solid 1px var(--darkened-bg); - background: var(--darkened-bg); - } -} - .usa-modal--django-admin .usa-prose ul > li { list-style-type: inherit; // Styling based off of the

styling in django admin @@ -839,6 +830,17 @@ div.dja__model-description{ text-transform: capitalize; } +.module caption { + // Match the old

size for django admin + font-size: 0.8125rem; +} + +// text-bold doesn't work here due to style overrides, unfortunately. +// This is a workaround. +caption.text-bold { + font-weight: font-weight('bold'); +} + .wrapped-button-group { // This button group has too many items flex-wrap: wrap; diff --git a/src/registrar/assets/src/sass/_theme/_uswds-theme.scss b/src/registrar/assets/src/sass/_theme/_uswds-theme.scss index 21bb48e96..951141a2b 100644 --- a/src/registrar/assets/src/sass/_theme/_uswds-theme.scss +++ b/src/registrar/assets/src/sass/_theme/_uswds-theme.scss @@ -70,6 +70,7 @@ in the form $setting: value, ----------------------------*/ $theme-font-weight-medium: 400, $theme-font-weight-semibold: 600, + $theme-font-weight-bold: 700, /*--------------------------- ## Font roles diff --git a/src/registrar/templates/admin/app_list.html b/src/registrar/templates/admin/app_list.html index 30bdfb40b..ecce12a3e 100644 --- a/src/registrar/templates/admin/app_list.html +++ b/src/registrar/templates/admin/app_list.html @@ -3,16 +3,9 @@ {% if app_list %} {% for app in app_list %}
- {# .gov override: display the app name as a h2 rather than a table header #} -

{{ app.name }}

- {{ app.name }} - - {{ app.name }} - + {{ app.name }} + + {{ app.name }} +
Model
- - {# .gov override: add headers #} - {% if show_changelinks %} - - {% else %} - - {% endif %} + {# .gov override: display the app name as a caption rather than a table header #} + {# .gov override: hide headers #} @@ -70,9 +63,20 @@
{{ app.name }}
{% endfor %} -
-

Analytics

- Dashboard +
+ + + + + + + + + + + + +
Analytics
Reports
Dashboard
{% else %}

{% translate 'You don’t have permission to view or edit anything.' %}

From 0890e0afd9482384a4f80b49c9b55b9d03d8e114 Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Wed, 19 Feb 2025 12:11:51 -0500 Subject: [PATCH 08/10] Special alignment for the sort button on the checkbox column --- src/registrar/assets/src/sass/_theme/_tables.scss | 7 +++++-- .../templates/includes/member_domains_edit_table.html | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/registrar/assets/src/sass/_theme/_tables.scss b/src/registrar/assets/src/sass/_theme/_tables.scss index d67b08041..c050f21f1 100644 --- a/src/registrar/assets/src/sass/_theme/_tables.scss +++ b/src/registrar/assets/src/sass/_theme/_tables.scss @@ -103,8 +103,8 @@ th { } } @include at-media(tablet-lg) { - th[data-sortable] .usa-table__header__button, - th[data-sortable] .usa-table__header__button:not([aria-sort]) { + th[data-sortable]:not(.left-align-sort-button) .usa-table__header__button, + th[data-sortable]:not(.left-align-sort-button) .usa-table__header__button:not([aria-sort]) { // position next to the copy right: auto; // slide left to mock a margin between the copy and the icon @@ -112,6 +112,9 @@ th { // fix vertical alignment top: units(1.5); } + th[data-sortable].left-align-sort-button .usa-table__header__button { + left: 0; + } } // Currently the 'flash' when sort is clicked, diff --git a/src/registrar/templates/includes/member_domains_edit_table.html b/src/registrar/templates/includes/member_domains_edit_table.html index fd63e5aa7..a67919413 100644 --- a/src/registrar/templates/includes/member_domains_edit_table.html +++ b/src/registrar/templates/includes/member_domains_edit_table.html @@ -45,7 +45,7 @@ member domains - Assigned domains + Assigned domains Domains From c501eac13392b7cb7b9a88742a8e227b5d53681a Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Wed, 19 Feb 2025 12:13:39 -0500 Subject: [PATCH 09/10] simplify css selectors --- src/registrar/assets/src/sass/_theme/_tables.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/registrar/assets/src/sass/_theme/_tables.scss b/src/registrar/assets/src/sass/_theme/_tables.scss index c050f21f1..614d0348e 100644 --- a/src/registrar/assets/src/sass/_theme/_tables.scss +++ b/src/registrar/assets/src/sass/_theme/_tables.scss @@ -103,8 +103,7 @@ th { } } @include at-media(tablet-lg) { - th[data-sortable]:not(.left-align-sort-button) .usa-table__header__button, - th[data-sortable]:not(.left-align-sort-button) .usa-table__header__button:not([aria-sort]) { + th[data-sortable]:not(.left-align-sort-button) .usa-table__header__button { // position next to the copy right: auto; // slide left to mock a margin between the copy and the icon From 52cfdca1c91ba24d8cee6b820822c529fb6a2de5 Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Wed, 19 Feb 2025 11:09:21 -0700 Subject: [PATCH 10/10] fix unrelated failing unit test --- src/registrar/tests/test_admin_domain.py | 2 +- src/registrar/tests/test_admin_request.py | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/registrar/tests/test_admin_domain.py b/src/registrar/tests/test_admin_domain.py index 4cae9a9e0..3776acabc 100644 --- a/src/registrar/tests/test_admin_domain.py +++ b/src/registrar/tests/test_admin_domain.py @@ -881,7 +881,7 @@ class TestDomainAdminWithClient(TestCase): response = self.client.get("/admin/registrar/domain/") # There are 4 template references to Federal (4) plus four references in the table # for our actual domain_request - self.assertContains(response, "Federal", count=56) + self.assertContains(response, "Federal", count=57) # This may be a bit more robust self.assertContains(response, 'Federal', count=1) # Now let's make sure the long description does not exist diff --git a/src/registrar/tests/test_admin_request.py b/src/registrar/tests/test_admin_request.py index f7dfed108..968de0d65 100644 --- a/src/registrar/tests/test_admin_request.py +++ b/src/registrar/tests/test_admin_request.py @@ -662,7 +662,7 @@ class TestDomainRequestAdmin(MockEppLib): response = self.client.get("/admin/registrar/domainrequest/?generic_org_type__exact=federal") # There are 2 template references to Federal (4) and two in the results data # of the request - self.assertContains(response, "Federal", count=54) + self.assertContains(response, "Federal", count=55) # This may be a bit more robust self.assertContains(response, 'Federal', count=1) # Now let's make sure the long description does not exist