diff --git a/src/registrar/assets/sass/_theme/_alerts.scss b/src/registrar/assets/sass/_theme/_alerts.scss index 163f243d3..08404232e 100644 --- a/src/registrar/assets/sass/_theme/_alerts.scss +++ b/src/registrar/assets/sass/_theme/_alerts.scss @@ -1,3 +1,5 @@ +@use "base" as *; + // Fixes some font size disparities with the Figma // for usa-alert alert elements .usa-alert { @@ -22,3 +24,8 @@ margin-left: 0.5rem!important; } } + +// NOTE: !important is used because _font.scss overrides this +.usa-alert__body--widescreen { + max-width: $widescreen-max-width !important; +} diff --git a/src/registrar/assets/sass/_theme/_base.scss b/src/registrar/assets/sass/_theme/_base.scss index 9d2ed4177..85f453dac 100644 --- a/src/registrar/assets/sass/_theme/_base.scss +++ b/src/registrar/assets/sass/_theme/_base.scss @@ -1,6 +1,8 @@ @use "uswds-core" as *; @use "cisa_colors" as *; +$widescreen-max-width: 1920px; + /* Styles for making visible to screen reader / AT users only. */ .sr-only { @include sr-only; @@ -102,6 +104,24 @@ body { } } +/* +This is a hack to keep the "Export" button on Domain Requests page inline +with the searchbar in widescreen mode. + +EXPLANATION: The existing frontend implementation puts the searchbar and export +button in two separate columns in a grid, which creates a solid wrap-around effect +for mobile devices. The searchbar had a max-width that exactly equaled the max width +of its parent column (for non-widescreens), so there wasn't any issue at this time of +implementation. +However, during immplementation of widescreen mode this small max-width caused the searchbar to +no longer fill its parent grid column for larger screen sizes, creating a visual gap between +it and the adjacent export button. To fix this, we will limit the width of the first +grid column to the max-width of the searchbar, which was calculated to be 33rem. +*/ +.section-outlined__search--widescreen { + max-width: 33rem; +} + .break-word { word-break: break-word; } @@ -222,6 +242,14 @@ abbr[title] { left: auto!important; } +.usa-banner__inner--widescreen { + max-width: $widescreen-max-width; +} + +.margin-right-neg-4px { + margin-right: -4px; +} + .break-word { word-break: break-word; } diff --git a/src/registrar/assets/sass/_theme/_containers.scss b/src/registrar/assets/sass/_theme/_containers.scss new file mode 100644 index 000000000..7473615ad --- /dev/null +++ b/src/registrar/assets/sass/_theme/_containers.scss @@ -0,0 +1,8 @@ +@use "uswds-core" as *; +@use "base" as *; + +//NOTE: !important is needed because it gets overriden by other .scss for footer nav +.grid-container--widescreen, +.usa-identifier__container--widescreen { + max-width: $widescreen-max-width !important; +} diff --git a/src/registrar/assets/sass/_theme/_header.scss b/src/registrar/assets/sass/_theme/_header.scss index d79774d98..53eab90d8 100644 --- a/src/registrar/assets/sass/_theme/_header.scss +++ b/src/registrar/assets/sass/_theme/_header.scss @@ -1,5 +1,6 @@ @use "uswds-core" as *; @use "cisa_colors" as *; +@use "base" as *; // Define some styles for the .gov header/logo .usa-logo button { @@ -127,3 +128,9 @@ } } } + +.usa-nav__inner--widescreen, +.usa-navbar--widescreen, +.usa-nav-container--widescreen { + max-width: $widescreen-max-width !important; +} diff --git a/src/registrar/assets/sass/_theme/styles.scss b/src/registrar/assets/sass/_theme/styles.scss index 5616b7509..8c38ae0b4 100644 --- a/src/registrar/assets/sass/_theme/styles.scss +++ b/src/registrar/assets/sass/_theme/styles.scss @@ -23,6 +23,7 @@ @forward "identifier"; @forward "header"; @forward "register-form"; +@forward "containers"; /*-------------------------------------------------- --- Admin ---------------------------------*/ diff --git a/src/registrar/config/settings.py b/src/registrar/config/settings.py index 03d9e38c6..9eb649ad8 100644 --- a/src/registrar/config/settings.py +++ b/src/registrar/config/settings.py @@ -246,6 +246,7 @@ TEMPLATES = [ "registrar.context_processors.org_user_status", "registrar.context_processors.add_path_to_context", "registrar.context_processors.portfolio_permissions", + "registrar.context_processors.is_widescreen_mode", ], }, }, diff --git a/src/registrar/context_processors.py b/src/registrar/context_processors.py index 3ceb25af1..c62c9a7c4 100644 --- a/src/registrar/context_processors.py +++ b/src/registrar/context_processors.py @@ -94,3 +94,8 @@ def portfolio_permissions(request): except AttributeError: # Handles cases where request.user might not exist return portfolio_context + + +def is_widescreen_mode(request): + widescreen_paths = ["/domains/", "/requests/"] + return {"is_widescreen_mode": any(path in request.path for path in widescreen_paths) or request.path == "/"} diff --git a/src/registrar/templates/401.html b/src/registrar/templates/401.html index dd1801cc5..20ca0420e 100644 --- a/src/registrar/templates/401.html +++ b/src/registrar/templates/401.html @@ -5,7 +5,7 @@ {% block title %}{% translate "Unauthorized | " %}{% endblock %} {% block content %} -
+

diff --git a/src/registrar/templates/403.html b/src/registrar/templates/403.html index 660e5d34c..ef910a191 100644 --- a/src/registrar/templates/403.html +++ b/src/registrar/templates/403.html @@ -5,7 +5,7 @@ {% block title %}{% translate "Forbidden | " %}{% endblock %} {% block content %} -
+

diff --git a/src/registrar/templates/404.html b/src/registrar/templates/404.html index cf6983c60..024c2803b 100644 --- a/src/registrar/templates/404.html +++ b/src/registrar/templates/404.html @@ -5,7 +5,7 @@ {% block title %}{% translate "Page not found | " %}{% endblock %} {% block content %} -
+

diff --git a/src/registrar/templates/500.html b/src/registrar/templates/500.html index dfbd90142..95c17e069 100644 --- a/src/registrar/templates/500.html +++ b/src/registrar/templates/500.html @@ -5,7 +5,7 @@ {% block title %}{% translate "Server error | " %}{% endblock %} {% block content %} -
+

diff --git a/src/registrar/templates/base.html b/src/registrar/templates/base.html index e5bd1b0b9..b14dab2fa 100644 --- a/src/registrar/templates/base.html +++ b/src/registrar/templates/base.html @@ -78,7 +78,7 @@
-
+
U.S. flag
diff --git a/src/registrar/templates/home.html b/src/registrar/templates/home.html index 63924bc1d..65c52ec9e 100644 --- a/src/registrar/templates/home.html +++ b/src/registrar/templates/home.html @@ -5,7 +5,7 @@ {% block title %} Home | {% endblock %} {% block content %} -
+
{% if user.is_authenticated %} {# the entire logged in page goes here #} diff --git a/src/registrar/templates/includes/domains_table.html b/src/registrar/templates/includes/domains_table.html index 76ead3a2c..11d3ac945 100644 --- a/src/registrar/templates/includes/domains_table.html +++ b/src/registrar/templates/includes/domains_table.html @@ -13,7 +13,7 @@ {% endif %} -
+