diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js index 70659b009..e6b5a039f 100644 --- a/src/registrar/assets/js/get-gov.js +++ b/src/registrar/assets/js/get-gov.js @@ -1220,7 +1220,7 @@ document.addEventListener('DOMContentLoaded', function() { const expirationDateFormatted = expirationDate ? expirationDate.toLocaleDateString('en-US', options) : ''; const expirationDateSortValue = expirationDate ? expirationDate.getTime() : ''; const actionUrl = domain.action_url; - const suborganization = domain.suborganization ? domain.suborganization : ''; + const suborganization = domain.suborganization ? domain.suborganization : '⎯'; const row = document.createElement('tr'); @@ -1229,7 +1229,7 @@ document.addEventListener('DOMContentLoaded', function() { if (!noPortfolioFlag) { markupForSuborganizationRow = ` - ${suborganization} + ${suborganization} ` } @@ -1910,7 +1910,7 @@ document.addEventListener('DOMContentLoaded', function() { let editableFormGroup = button.parentElement.parentElement.parentElement; if (editableFormGroup){ - let readonlyField = editableFormGroup.querySelector(".input-with-edit-button__readonly-field") + let readonlyField = editableFormGroup.querySelector(".toggleable_input__readonly-field") let inputField = document.getElementById(`id_${fieldName}`); if (!inputField || !readonlyField) { return; @@ -1936,8 +1936,8 @@ document.addEventListener('DOMContentLoaded', function() { // Keep the path before '#' and replace the part after '#' with 'invalid' const newHref = parts[0] + '#error'; svg.setAttribute('xlink:href', newHref); - fullNameField.classList.add("input-with-edit-button__error") - label = fullNameField.querySelector(".input-with-edit-button__readonly-field") + fullNameField.classList.add("toggleable_input__error") + label = fullNameField.querySelector(".toggleable_input__readonly-field") label.innerHTML = "Unknown"; } } @@ -2043,11 +2043,11 @@ document.addEventListener('DOMContentLoaded', function() { // Due to the nature of how uswds works, this is slightly hacky. // Use a MutationObserver to watch for changes in the dropdown list - const dropdownList = document.querySelector(`#${input.id}--list`); + const dropdownList = comboBox.querySelector(`#${input.id}--list`); const observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.type === "childList") { - addBlankOption(clearInputButton, dropdownList, initialValue); + addBlankOption(clearInputButton, dropdownList, initialValue); } }); }); @@ -2111,7 +2111,7 @@ document.addEventListener('DOMContentLoaded', function() { if (!initialValue){ blankOption.classList.add("usa-combo-box__list-option--selected") } - blankOption.textContent = "---------"; + blankOption.textContent = "⎯"; dropdownList.insertBefore(blankOption, dropdownList.firstChild); blankOption.addEventListener("click", (e) => { diff --git a/src/registrar/assets/sass/_theme/_base.scss b/src/registrar/assets/sass/_theme/_base.scss index 9f8a0cbb6..e3ab4d538 100644 --- a/src/registrar/assets/sass/_theme/_base.scss +++ b/src/registrar/assets/sass/_theme/_base.scss @@ -33,16 +33,19 @@ body { } #wrapper.dashboard--portfolio { - background-color: color('gray-1'); padding-top: units(4)!important; } +#wrapper.dashboard--grey-1 { + background-color: color('gray-1'); +} + -.section--outlined { +.section-outlined { background-color: color('white'); border: 1px solid color('base-lighter'); border-radius: 4px; - padding: 0 units(2) units(3); + padding: 0 units(4) units(3) units(2); margin-top: units(3); &.margin-top-0 { @@ -72,9 +75,13 @@ body { } } -.section--outlined__header--no-portfolio { - .section--outlined__search, - .section--outlined__utility-button { +.section-outlined--border-base-light { + border: 1px solid color('base-light'); +} + +.section-outlined__header--no-portfolio { + .section-outlined__search, + .section-outlined__utility-button { margin-top: units(2); } @@ -82,11 +89,11 @@ body { display: flex; column-gap: units(3); - .section--outlined__search, - .section--outlined__utility-button { + .section-outlined__search, + .section-outlined__utility-button { margin-top: 0; } - .section--outlined__search { + .section-outlined__search { flex-grow: 4; // Align right max-width: 383px; @@ -192,3 +199,7 @@ abbr[title] { max-width: 50ch; } } + +.margin-right-neg-4px { + margin-right: -4px; +} diff --git a/src/registrar/assets/sass/_theme/_buttons.scss b/src/registrar/assets/sass/_theme/_buttons.scss index d246366d8..12eee9926 100644 --- a/src/registrar/assets/sass/_theme/_buttons.scss +++ b/src/registrar/assets/sass/_theme/_buttons.scss @@ -124,10 +124,6 @@ a.withdraw:active { background-color: color('error-darker'); } -.usa-button--unstyled .usa-icon { - vertical-align: bottom; -} - a.usa-button--unstyled:visited { color: color('primary'); } @@ -162,14 +158,14 @@ a.usa-button--unstyled:visited { } } -.input-with-edit-button { +.toggleable_input { svg.usa-icon { width: 1.5em !important; height: 1.5em !important; color: #{$dhs-green}; position: absolute; } - &.input-with-edit-button__error { + &.toggleable_input__error { svg.usa-icon { color: #{$dhs-red}; } @@ -205,12 +201,32 @@ a.usa-button--unstyled:visited { } } +.dotgov-table a, +.usa-link--icon, +.usa-button--with-icon { + display: flex; + align-items: flex-start; + color: color('primary'); + column-gap: units(.5); + align-items: center; +} + + +.dotgov-table a, +.usa-link--icon { + &:visited { + color: color('primary'); + } +} + +a .usa-icon, +.usa-button--with-icon .usa-icon { + height: 1.3em; + width: 1.3em; +} + .usa-icon.usa-icon--big { margin: 0; height: 1.5em; width: 1.5em; } - -.margin-right-neg-4px { - margin-right: -4px; -} \ No newline at end of file diff --git a/src/registrar/assets/sass/_theme/_links.scss b/src/registrar/assets/sass/_theme/_links.scss deleted file mode 100644 index fd1c3dee9..000000000 --- a/src/registrar/assets/sass/_theme/_links.scss +++ /dev/null @@ -1,18 +0,0 @@ -@use "uswds-core" as *; - -.dotgov-table a, -.usa-link--icon { - display: flex; - align-items: flex-start; - color: color('primary'); - - &:visited { - color: color('primary'); - } - .usa-icon { - // align icon with x height - margin-top: units(0.5); - margin-right: units(0.5); - } -} - diff --git a/src/registrar/assets/sass/_theme/_tables.scss b/src/registrar/assets/sass/_theme/_tables.scss index e78715da8..d57b51117 100644 --- a/src/registrar/assets/sass/_theme/_tables.scss +++ b/src/registrar/assets/sass/_theme/_tables.scss @@ -1,5 +1,10 @@ @use "uswds-core" as *; +td, +th { + vertical-align: top; +} + .dotgov-table--stacked { td, th { padding: units(1) units(2) units(2px) 0; @@ -12,7 +17,7 @@ tr { border-bottom: none; - border-top: 2px solid color('base-light'); + border-top: 2px solid color('base-lighter'); margin-top: units(2); &:first-child { @@ -39,10 +44,6 @@ .dotgov-table { width: 100%; - th[data-sortable]:not([aria-sort]) .usa-table__header__button { - right: auto; - } - tbody th { word-break: break-word; } @@ -56,7 +57,7 @@ } td, th { - border-bottom: 1px solid color('base-light'); + border-bottom: 1px solid color('base-lighter'); } thead th { @@ -72,11 +73,17 @@ td, th, .usa-tabel th{ - padding: units(2) units(2) units(2) 0; + padding: units(2) units(4) units(2) 0; } thead tr:first-child th:first-child { border-top: none; } } + + @include at-media(tablet-lg) { + th[data-sortable]:not([aria-sort]) .usa-table__header__button { + right: auto; + } + } } diff --git a/src/registrar/assets/sass/_theme/styles.scss b/src/registrar/assets/sass/_theme/styles.scss index f9df015b4..5616b7509 100644 --- a/src/registrar/assets/sass/_theme/styles.scss +++ b/src/registrar/assets/sass/_theme/styles.scss @@ -10,7 +10,6 @@ --- Custom Styles ---------------------------------*/ @forward "base"; @forward "typography"; -@forward "links"; @forward "lists"; @forward "accordions"; @forward "buttons"; diff --git a/src/registrar/forms/domain.py b/src/registrar/forms/domain.py index a7a006788..84fcbe973 100644 --- a/src/registrar/forms/domain.py +++ b/src/registrar/forms/domain.py @@ -417,7 +417,7 @@ def save(self, commit=True): # This action should be blocked by the UI, as the text fields are readonly. # If they get past this point, we forbid it this way. # This could be malicious, so lets reserve information for the backend only. - raise ValueError("Senior Official cannot be modified for federal or tribal domains.") + raise ValueError("Senior official cannot be modified for federal or tribal domains.") elif db_so.has_more_than_one_join("information_senior_official"): # Handle the case where the domain information object is available and the SO Contact # has more than one joined object. diff --git a/src/registrar/templates/django/forms/widgets/combobox.html b/src/registrar/templates/django/forms/widgets/combobox.html index 107c2e14e..7ff31945b 100644 --- a/src/registrar/templates/django/forms/widgets/combobox.html +++ b/src/registrar/templates/django/forms/widgets/combobox.html @@ -7,7 +7,9 @@
{% include "django/forms/widgets/select.html" %} diff --git a/src/registrar/templates/domain_dsdata.html b/src/registrar/templates/domain_dsdata.html index b62ad7ec5..1dd1e1abe 100644 --- a/src/registrar/templates/domain_dsdata.html +++ b/src/registrar/templates/domain_dsdata.html @@ -63,10 +63,10 @@

DS data record {{forloop.counter}}

-
@@ -74,10 +74,10 @@

DS data record {{forloop.counter}}

{% endfor %} -
-
{% endfor %} - {% comment %} Work around USWDS' button margins to add some spacing between the submit and the 'add more' diff --git a/src/registrar/templates/domain_org_name_address.html b/src/registrar/templates/domain_org_name_address.html index 1e6176aa0..a7eb02b59 100644 --- a/src/registrar/templates/domain_org_name_address.html +++ b/src/registrar/templates/domain_org_name_address.html @@ -42,7 +42,7 @@

Organization name and mailing address

{% input_with_errors form.state_territory %} - {% with add_class="usa-input--small" %} + {% with add_class="usa-input--small" sublabel_text="Enter a zip code in the required format, like 12345 or 12345-6789." %} {% input_with_errors form.zipcode %} {% endwith %} diff --git a/src/registrar/templates/domain_request_org_contact.html b/src/registrar/templates/domain_request_org_contact.html index f145ee3bf..d4f3c2071 100644 --- a/src/registrar/templates/domain_request_org_contact.html +++ b/src/registrar/templates/domain_request_org_contact.html @@ -33,7 +33,7 @@

What is the name and mailing address of the organization you represent?

{% input_with_errors forms.0.state_territory %} - {% with add_class="usa-input--small" %} + {% with add_class="usa-input--small" sublabel_text="Enter a zip code in the required format, like 12345 or 12345-6789." %} {% input_with_errors forms.0.zipcode %} {% endwith %} diff --git a/src/registrar/templates/domain_suborganization.html b/src/registrar/templates/domain_suborganization.html index ad96f1d65..823629213 100644 --- a/src/registrar/templates/domain_suborganization.html +++ b/src/registrar/templates/domain_suborganization.html @@ -1,7 +1,7 @@ {% extends "domain_base.html" %} {% load static field_helpers%} -{% block title %}Suborganization{% endblock %} +{% block title %}Suborganization{% if suborganization_name %} | suborganization_name{% endif %} | {% endblock %} {% block domain_content %} {# this is right after the messages block in the parent template #} diff --git a/src/registrar/templates/domain_users.html b/src/registrar/templates/domain_users.html index 8e4f04fcd..412f4ee73 100644 --- a/src/registrar/templates/domain_users.html +++ b/src/registrar/templates/domain_users.html @@ -21,7 +21,7 @@

Domain managers

{% if domain.permissions %} -
+

Domain managers

@@ -112,7 +112,7 @@

Domain managers

{% if domain.invitations.exists %} -
+

Invitations

Domain managers
diff --git a/src/registrar/templates/includes/domain_requests_table.html b/src/registrar/templates/includes/domain_requests_table.html index bd909350c..f73f8079f 100644 --- a/src/registrar/templates/includes/domain_requests_table.html +++ b/src/registrar/templates/includes/domain_requests_table.html @@ -3,7 +3,7 @@ {% comment %} Stores the json endpoint in a url for easier access {% endcomment %} {% url 'get_domain_requests_json' as url %} -
+
{% if not has_domain_requests_portfolio_permission %}
diff --git a/src/registrar/templates/includes/domains_table.html b/src/registrar/templates/includes/domains_table.html index 48de2d98c..c00409ff8 100644 --- a/src/registrar/templates/includes/domains_table.html +++ b/src/registrar/templates/includes/domains_table.html @@ -5,8 +5,8 @@ {% comment %} Stores the json endpoint in a url for easier access {% endcomment %} {% url 'get_domains_json' as url %} -
-
+
+
{% if not portfolio %}

Domains

@@ -14,7 +14,7 @@

Domains

{% endif %} -
Domain invitations