Added widescreen detection and scss adjustments for Domains and Domain Request page

src/registrar/assets/sass/_navigation.scss

@@ -0,0 +1,6 @@
+@use "uswds-core" as *;
+
+.usa-nav__inner--widescreen,
+.usa-navbar--widescreen  {
+    max-width: 1920px;
+}

src/registrar/assets/sass/_theme/_base.scss

@@ -192,3 +192,7 @@ abbr[title] {
     max-width: 50ch;
   }
 }
+
+.usa-banner__inner--widescreen  {
+  max-width: 1920px;
+}

src/registrar/assets/sass/_theme/_containers.scss

@@ -0,0 +1,6 @@
+@use "uswds-core" as *;
+
+.grid-container--widescreen,
+.usa-identifier__container--widescreen {
+    max-width: 1920px;
+}

src/registrar/assets/sass/_theme/styles.scss

@@ -24,6 +24,8 @@
 @forward "identifier";
 @forward "header";
 @forward "register-form";
+@forward "containers";
+@forward "navigation";
 
 /*--------------------------------------------------
 --- Admin ---------------------------------*/

src/registrar/config/settings.py

@@ -244,6 +244,7 @@ TEMPLATES = [
                 "registrar.context_processors.add_path_to_context",
                 "registrar.context_processors.add_has_profile_feature_flag_to_context",
                 "registrar.context_processors.portfolio_permissions",
+                "registrar.context_processors.is_widescreen_mode",
             ],
         },
     },

src/registrar/context_processors.py

@@ -95,3 +95,7 @@ def portfolio_permissions(request):
             "portfolio": None,
             "has_organization_feature_flag": False,
         }
+
+def is_widescreen_mode(request):
+    widescreen_paths = ["/domains/", "/requests/"]
+    return {"is_widescreen_mode": any(path in request.path for path in widescreen_paths)} #any(path in request.path for path in widescreen_paths)

src/registrar/templates/base.html

@@ -78,7 +78,7 @@
   <section class="usa-banner" aria-label="Official website of the United States government">
     <div class="usa-accordion">
       <header class="usa-banner__header">
-        <div class="usa-banner__inner">
+        <div class="usa-banner__inner {% if is_widescreen_mode %} usa-banner__inner--widescreen {% endif %}">
           <div class="grid-col-auto">
             <img class="usa-banner__header-flag" src="{% static 'img/us_flag_small.png' %}" alt="U.S. flag" />
           </div>

src/registrar/templates/includes/footer.html

@@ -3,7 +3,7 @@
 
 <footer class="usa-footer">
     <div class="usa-footer__secondary-section">
-      <div class="grid-container">
+      <div class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
         <div class="grid-row grid-gap">
           <div
             class="
@@ -51,7 +51,7 @@
       class="usa-identifier__section usa-identifier__section--masthead"
       aria-label="Agency identifier"
     >
-      <div class="usa-identifier__container">
+      <div class="usa-identifier__container {% if is_widescreen_mode %} usa-identifier__container--widescreen {% endif %}">
         <div class="usa-identifier__logos">
           <a rel="noopener noreferrer" target="_blank" href="https://www.cisa.gov" class="usa-identifier__logo"
             ><img
@@ -77,7 +77,7 @@
       class="usa-identifier__section usa-identifier__section--required-links"
       aria-label="Important links"
     >
-      <div class="usa-identifier__container">
+      <div class="usa-identifier__container {% if is_widescreen_mode %} usa-identifier__container--widescreen {% endif %}">
         <ul class="usa-identifier__required-links-list">
           <li class="usa-identifier__required-links-item">
         <a rel="noopener noreferrer" target="_blank" href="{% public_site_url 'about/' %}"
@@ -119,7 +119,7 @@
       class="usa-identifier__section usa-identifier__section--usagov"
       aria-label="U.S. government information and services"
     >
-      <div class="usa-identifier__container">
+      <div class="usa-identifier__container {% if is_widescreen_mode %} usa-identifier__container--widescreen {% endif %}">
         <div class="usa-identifier__usagov-description">
           Looking for U.S. government information and services?
         </div>

src/registrar/templates/includes/header_extended.html

@@ -2,13 +2,13 @@
 {% load custom_filters %}
 
 <header class="usa-header usa-header--extended">
-    <div class="usa-navbar">
+    <div class="usa-navbar {% if is_widescreen_mode %} usa-navbar--widescreen {% endif %}">
         {% include "includes/gov_extended_logo.html" with logo_clickable=logo_clickable %}
     <button type="button" class="usa-menu-btn">Menu</button>
     </div>
     {% block usa_nav %}
     <nav class="usa-nav" aria-label="Primary navigation">
-    <div class="usa-nav__inner">
+    <div class="usa-nav__inner {% if is_widescreen_mode %} usa-nav__inner--widescreen {% endif %}">
         <button type="button" class="usa-nav__close">
             <img src="{%static 'img/usa-icons/close.svg'%}" role="img" alt="Close" />
         </button>

src/registrar/templates/portfolio_base.html

@@ -4,7 +4,7 @@
   <div id="wrapper" class="dashboard--portfolio">
       {% block content %}
         
-        <main id="main-content" class="grid-container">
+        <main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
             {% if user.is_authenticated %}
             {# the entire logged in page goes here #}