Merge pull request #2716 from cisagov/nl/2669-max-width-adjustment-fo…

…r-wide-screens

Issue #2669: Pages with tables have the max width set to 1920 [-NL]

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;
+}

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;
 }

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;
+}

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;
+}

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

@@ -23,6 +23,7 @@
 @forward "identifier";
 @forward "header";
 @forward "register-form";
+@forward "containers";
 
 /*--------------------------------------------------
 --- Admin ---------------------------------*/

src/registrar/config/settings.py

@@ -246,6 +246,7 @@
                 "registrar.context_processors.org_user_status",
                 "registrar.context_processors.add_path_to_context",
                 "registrar.context_processors.portfolio_permissions",
+                "registrar.context_processors.is_widescreen_mode",
             ],
         },
     },

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 == "/"}

src/registrar/templates/401.html

@@ -5,7 +5,7 @@
 {% block title %}{% translate "Unauthorized | " %}{% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container">
+<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
   <div class="grid-row grow-gap"> 
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>

src/registrar/templates/403.html

@@ -5,7 +5,7 @@
 {% block title %}{% translate "Forbidden | " %}{% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container">
+<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
   <div class="grid-row grow-gap"> 
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>

src/registrar/templates/404.html

@@ -5,7 +5,7 @@
 {% block title %}{% translate "Page not found | " %}{% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container">
+<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
   <div class="grid-row grid-gap">
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>

src/registrar/templates/500.html

@@ -5,7 +5,7 @@
 {% block title %}{% translate "Server error | " %}{% endblock %}
 
 {% block content %}
-<main id="main-content" class="grid-container">
+<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
   <div class="grid-row grid-gap">
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>

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/home.html

@@ -5,7 +5,7 @@
 {% block title %} Home | {% endblock %}
 
 {% 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 #}
 

src/registrar/templates/includes/domains_table.html

@@ -13,7 +13,7 @@ <h2 id="domains-header" class="display-inline-block">Domains</h2>
         <!-- Embedding the portfolio value in a data attribute -->
         <span id="portfolio-js-value" data-portfolio="{{ portfolio.id }}"></span>
       {% endif %}
-      <div class="section-outlined__search {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6{% endif %}">
+      <div class="section-outlined__search {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6{% endif %} {% if is_widescreen_mode %} section-outlined__search--widescreen {% endif %}">
         <section aria-label="Domains search component" class="margin-top-2">
           <form class="usa-search usa-search--small" method="POST" role="search">
             {% csrf_token %}
@@ -44,7 +44,7 @@ <h2 id="domains-header" class="display-inline-block">Domains</h2>
       {% if user_domain_count and user_domain_count > 0 %}
       <div class="section-outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6 desktop:padding-left-3{% endif %}">
         <section aria-label="Domains report component" class="margin-top-205">
-          <a href="{% url 'export_data_type_user' %}" class="usa-button usa-button--unstyled usa-button--with-icon" role="button">
+          <a href="{% url 'export_data_type_user' %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right" role="button">
             <svg class="usa-icon usa-icon--big" aria-hidden="true" focusable="false" role="img" width="24" height="24">
               <use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
             </svg>Export as CSV

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_basic.html

@@ -1,7 +1,7 @@
 {% load static %}
 
 <header class="usa-header usa-header--basic">
-  <div class="usa-nav-container">
+  <div class="usa-nav-container {% if is_widescreen_mode %} usa-nav-container--widescreen {% endif %}">
     <div class="usa-navbar">
         {% include "includes/gov_extended_logo.html" with logo_clickable=logo_clickable %}
       <button type="button" class="usa-menu-btn">Menu</button>

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/includes/non-production-alert.html

@@ -1,6 +1,6 @@
 <div class="usa-site-alert--emergency margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
     <div class="usa-alert">
-        <div class="usa-alert__body {% if add_body_class %}{{ add_body_class }}{% endif %}">
+        <div class="usa-alert__body {% if add_body_class %}{{ add_body_class }}{% endif %} {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
             <b>Attention:</b> You are on a test site.
         </div>
     </div>

src/registrar/templates/portfolio_base.html

@@ -4,11 +4,14 @@
   <div id="wrapper" class="{% block wrapper_class %}dashboard--portfolio{% endblock %}">
     {% block content %}
 
-        <main class="grid-container">
+        <main class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
             {% if user.is_authenticated %}
             {# the entire logged in page goes here #}
 
-            <div class="tablet:grid-col-12">
+            <div class="tablet:grid-col-11 desktop:grid-col-10 tablet:grid-offset-1">
+                {% block messages %}
+                    {% include "includes/form_messages.html" %}
+                {% endblock %}
 
                 {% block portfolio_content %}{% endblock %}
 

src/registrar/tests/test_views_portfolio.py

@@ -535,6 +535,41 @@ def test_org_member_can_only_see_domains_with_appropriate_permissions(self):
         self.assertContains(response, "Domain name")
         permission.delete()
 
+    def check_widescreen_is_loaded(self, page_to_check):
+        """Tests if class modifiers for widescreen mode are appropriately loaded into the DOM
+        for the given page"""
+
+        self.client.force_login(self.user)
+
+        # Ensure that this user can see domains with the right permissions
+        permission, _ = UserPortfolioPermission.objects.get_or_create(
+            user=self.user, portfolio=self.portfolio, roles=[UserPortfolioRoleChoices.ORGANIZATION_MEMBER]
+        )
+        permission.additional_permissions = [UserPortfolioPermissionChoices.VIEW_ALL_DOMAINS]
+        permission.save()
+        permission.refresh_from_db()
+
+        response = self.client.get(reverse(page_to_check))
+        # Make sure that the page is loaded correctly
+        self.assertEqual(response.status_code, 200)
+
+        # Test for widescreen modifier
+        self.assertContains(response, "--widescreen")
+
+    @less_console_noise_decorator
+    @override_flag("organization_feature", active=True)
+    def test_widescreen_css_org_model(self):
+        """Tests if class modifiers for widescreen mode are appropriately
+        loaded into the DOM for org model pages"""
+        self.check_widescreen_is_loaded("domains")
+
+    @less_console_noise_decorator
+    @override_flag("organization_feature", active=False)
+    def test_widescreen_css_non_org_model(self):
+        """Tests if class modifiers for widescreen mode are appropriately
+        loaded into the DOM for non-org model pages"""
+        self.check_widescreen_is_loaded("home")
+
     @less_console_noise_decorator
     @override_flag("organization_feature", active=True)
     @override_flag("organization_requests", active=False)