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/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/_tables.scss b/src/registrar/assets/src/sass/_theme/_tables.scss index 37ae22b1b..614d0348e 100644 --- a/src/registrar/assets/src/sass/_theme/_tables.scss +++ b/src/registrar/assets/src/sass/_theme/_tables.scss @@ -41,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%; @@ -68,7 +63,8 @@ th { border-bottom: 1px solid color('base-lighter'); } - thead th { + thead th, + thead th[aria-sort] { color: color('primary-darker'); border-bottom: 2px solid color('base-light'); } @@ -93,17 +89,46 @@ 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; + // Sortable headers + th[data-sortable][aria-sort=ascending], + th[data-sortable][aria-sort=descending] { + background-color: transparent; + .usa-table__header__button { + background-color: color('accent-cool-lightest'); + border-radius: units(.5); + color: color('primary-darker'); + &:hover { + background-color: color('accent-cool-lightest'); } } } + @include at-media(tablet-lg) { + 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 + transform: translateX(units(1)); + // 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, + // 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 { 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 aaf3dc423..ecce12a3e 100644 --- a/src/registrar/templates/admin/app_list.html +++ b/src/registrar/templates/admin/app_list.html @@ -4,24 +4,22 @@ {% for app in app_list %}
- - {# .gov override: add headers #} - {% if show_changelinks %} - - {% else %} - - {% endif %} + {# .gov override: display the app name as a caption rather than a table header #} + - {% if show_changelinks %} - - {% else %} - - {% endif %} + {# .gov override: hide headers #} + {% comment %} + {% if show_changelinks %} + + {% else %} + + {% endif %} + {% endcomment %} @@ -45,16 +43,17 @@ {% endif %} {% if model.add_url %} - + {% comment %} Remove the 's' from the end of the string to avoid text like "Add domain requests" {% endcomment %} + {% else %} {% endif %} {% if model.admin_url and show_changelinks %} {% if model.view_only %} - + {% else %} - + {% endif %} {% elif show_changelinks %} @@ -64,9 +63,20 @@
{{ app.name }}
- {{ app.name }} - - {{ app.name }} - + {{ app.name }} + + {{ app.name }} +
Model{% translate 'Add' %}{% translate 'Add' %}{% translate 'View' %}{% translate 'View' %}{% translate 'Change' %}{% translate 'Change' %}
{% endfor %} -
-

Analytics

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

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

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 diff --git a/src/registrar/tests/test_admin_domain.py b/src/registrar/tests/test_admin_domain.py index 76406bfad..969d043d7 100644 --- a/src/registrar/tests/test_admin_domain.py +++ b/src/registrar/tests/test_admin_domain.py @@ -882,7 +882,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