Full cleanup / refactor

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

@@ -12,14 +12,24 @@
   }
 }
 
+
 // The icon was off center for some reason
 // Fixes that issue
 @media (min-width: 64em){
-  .usa-alert__body::before {
-    left: 2.5rem !important;
+  .usa-alert--warning{
+    .usa-alert__body::before {
+      left: 1rem !important;
+    }
+  }
+  .usa-alert__body.margin-left-1 {
+    margin-left: 0.5rem!important;
   }
-  .usa-alert__body {
-    padding-left: 5rem!important;
+
+  .usa-alert__body--widescreen::before {
+    left: 4rem !important;
+  }
+  .usa-alert__body--widescreen {
+    padding-left: 7rem!important;
   }
 }
 

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

@@ -2,8 +2,8 @@
 @use "cisa_colors" as *;
 
 $widescreen-max-width: 1920px;
-$widescreen-left-padding: 48px;
-$widescreen-right-padding: 48px;
+$widescreen-left-padding: 4.5rem;
+$widescreen-right-padding: 4.5rem;
 
 $hot-pink: #FFC3F9;
 
@@ -252,11 +252,13 @@ abbr[title] {
 
 // This is used in cases where we want to align content to widescreen margins
 // but we don't want the content itself to have widescreen widths
-.padding-left--widescreen {
-  padding-left: $widescreen-left-padding !important;
-}
-.padding-right--widescreen {
-  padding-left: $widescreen-right-padding !important;
+@media (min-width: 64em) {
+  .padding-left--widescreen {
+    padding-left: $widescreen-left-padding !important;
+  }
+  .padding-right--widescreen {
+    padding-right: $widescreen-right-padding !important;
+  }
 }
 
 .margin-right-neg-4px {

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

@@ -10,8 +10,16 @@
 
 // NOTE: !important is used because _font.scss overrides this
 @media (min-width: 64em) {
-    .usa-footer__secondary-section .grid-container--widescreen {
+    .grid-container--widescreen {
       padding-left: $widescreen-left-padding !important;
       padding-right: $widescreen-right-padding !important;
     }
 }
+
+// matches max-width to equal the max-width of .grid-container
+// used to trick the eye into thinking we have left-aligned a 
+// regular grid-container within a widescreen (see instances
+// where is_widescreen_left_justified is used in the html).
+.max-width--grid-container {
+  max-width: 64rem;
+}

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

@@ -110,8 +110,8 @@
             }
         }
         .usa-nav__secondary {
-            // I don't know why USWDS has this at 2 rem, which puts it out of alignment
-            right: 3rem;
+            right: 1rem;
+            padding-right: $widescreen-right-padding;
             color: color('white');
             bottom: 4.3rem;
             .usa-nav-link,

src/registrar/config/settings.py

@@ -252,6 +252,7 @@
                 "registrar.context_processors.add_path_to_context",
                 "registrar.context_processors.portfolio_permissions",
                 "registrar.context_processors.is_widescreen_mode",
+                "registrar.context_processors.is_widescreen_left_justified"
             ],
         },
     },

src/registrar/context_processors.py

@@ -99,30 +99,69 @@ def portfolio_permissions(request):
 
 
 def is_widescreen_mode(request):
-    widescreen_paths = []  # If this list is meant to include specific paths, populate it.
+    widescreen_paths = [
+        "/domain-request/",
+        ]  # If this list is meant to include specific paths, populate it.
     portfolio_widescreen_paths = [
         "/domains/",
         "/requests/",
-        "/request/",
         "/no-organization-requests/",
         "/no-organization-domains/",
-        "/domain-request/",
+        "/members/"
     ]
     # widescreen_paths can be a bear as it trickles down sub-urls. exclude_paths gives us a way out.
     exclude_paths = [
         "/domains/edit",
+        "/admin/"
     ]
 
     # Check if the current path matches a widescreen path or the root path.
-    is_widescreen = any(path in request.path for path in widescreen_paths) or request.path == "/"
+    is_widescreen = ( 
+        any(path in request.path for path in widescreen_paths)
+        or request.path == "/" )
 
     # Check if the user is an organization user and the path matches portfolio paths.
     is_portfolio_widescreen = (
         hasattr(request.user, "is_org_user")
         and request.user.is_org_user(request)
         and any(path in request.path for path in portfolio_widescreen_paths)
-        and not any(exclude_path in request.path for exclude_path in exclude_paths)
     )
 
+    is_excluded = any(exclude_path in request.path for exclude_path in exclude_paths)
+
+    # Return a dictionary with the widescreen mode status.
+    return {"is_widescreen_mode": (is_widescreen or is_portfolio_widescreen or get_is_widescreen_left_justified(request)) and not is_excluded}
+
+def get_is_widescreen_left_justified(request):
+    include_paths = [
+        "/user-profile",
+        "/request/",
+        "/domain/",
+        ]
+    portfolio_include_paths = [
+        "/organization/",
+        "/senior-official/",
+        "/member/",
+        "/members/new-member",
+    ]
+    exclude_paths = [
+    ]
+
+    is_excluded = any(exclude_path in request.path for exclude_path in exclude_paths)
+
+    # Check if the current path matches a path in included_paths or the root path.
+    is_widescreen_left_justified = any(path in request.path for path in include_paths)
+
+    # Check if the user is an organization user and the path matches portfolio_only paths.
+    is_portfolio_widescreen_left_justified = (
+        hasattr(request.user, "is_org_user")
+        and request.user.is_org_user(request)
+        and any(path in request.path for path in portfolio_include_paths)
+    )
+
+    return (is_widescreen_left_justified or is_portfolio_widescreen_left_justified) and not is_excluded
+
+def is_widescreen_left_justified(request):
+
     # Return a dictionary with the widescreen mode status.
-    return {"is_widescreen_mode": is_widescreen or is_portfolio_widescreen}
+    return {"is_widescreen_left_justified": get_is_widescreen_left_justified(request)}

src/registrar/templates/401.html

@@ -6,7 +6,7 @@
 
 {% block content %}
 <main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-  <div class="grid-row grow-gap"> 
+  <div class="grid-row grow-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}"> 
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
         {% translate "You are not authorized to view this page" %}

src/registrar/templates/403.html

@@ -6,7 +6,7 @@
 
 {% block content %}
 <main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-  <div class="grid-row grow-gap"> 
+  <div class="grid-row grow-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}"> 
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
         {% translate "You're not authorized to view this page." %}

src/registrar/templates/404.html

@@ -6,7 +6,7 @@
 
 {% block content %}
 <main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-  <div class="grid-row grid-gap">
+  <div class="grid-row grid-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
         {% translate "We couldn’t find that page" %}

src/registrar/templates/500.html

@@ -6,7 +6,7 @@
 
 {% block content %}
 <main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-  <div class="grid-row grid-gap">
+  <div class="grid-row grid-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
     <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
       <h1>
         {% translate "We're having some trouble." %}

src/registrar/templates/base.html

@@ -97,7 +97,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 usa-banner__inner--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen">
+        <div class="usa-banner__inner usa-banner__inner--widescreen padding-left--widescreen padding-right--widescreen">
           <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/domain_base.html

@@ -4,10 +4,10 @@
 {% block title %}{{ domain.name }} | {% endblock %}
 
 {% block content %}
-<div class="grid-container grid-container--widescreen desktop:padding-left-6">
+<div class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
 
-  <div class="grid-row grid-gap">
-    <div class="tablet:grid-col-3 maxw-fit-content">
+  <div class="grid-row grid-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
+    <div class="tablet:grid-col-3 ">
       <p class="font-body-md margin-top-0 margin-bottom-2
                 text-primary-darker text-semibold domain-name-wrap"
       >

src/registrar/templates/domain_request_form.html

@@ -3,8 +3,8 @@
 
 {% block title %}{{form_titles|get_item:steps.current}} | Request a .gov | {% endblock %}
 {% block content %}
-<div class="grid-container grid-container--widescreen desktop:padding-left-6">
-  <div class="grid-row grid-gap">
+<div class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
+  <div class="grid-row grid-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
     <div class="tablet:grid-col-3">
       {% include 'domain_request_sidebar.html' %}
     </div>

src/registrar/templates/includes/banner-error.html

@@ -1,6 +1,6 @@
 <div class="margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
     <div class="usa-alert usa-alert--error">
-      <div class="usa-alert__body usa-alert__body--widescreen">
+      <div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
         <h4 class="usa-alert__heading">
           Header
         </h4>

src/registrar/templates/includes/banner-info.html

@@ -1,6 +1,6 @@
 <section class="usa-site-alert usa-site-alert--info margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
     <div class="usa-alert">
-      <div class="usa-alert__body usa-alert__body--widescreen">
+      <div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
         <h4 class="usa-alert__heading">
           Header
         </h4>

src/registrar/templates/includes/banner-non-production-alert.html

@@ -1,6 +1,6 @@
 <section class="usa-site-alert usa-site-alert--emergency usa-site-alert--hot-pink 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 %} usa-alert__body--widescreen">
+        <div class="usa-alert__body {% if add_body_class %}{{ add_body_class }}{% endif %} {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
             <p class="usa-alert__text maxw-none">
                 <strong>Attention:</strong> You are on a test site.
             </p>

src/registrar/templates/includes/banner-service-disruption.html

@@ -1,6 +1,6 @@
 <section class="usa-site-alert 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 usa-alert__body--widescreen">
+      <div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
         <h3 class="usa-alert__heading">
             Service disruption
         </h3>

src/registrar/templates/includes/banner-site-alert.html

@@ -1,6 +1,6 @@
 <section class="usa-site-alert 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 usa-alert__body--widescreen">
+      <div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
         <h3 class="usa-alert__heading">
             Header here
         </h3>

src/registrar/templates/includes/banner-system-outage.html

@@ -1,6 +1,6 @@
 <section class="usa-site-alert 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 usa-alert__body--widescreen">
+      <div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
         <h3 class="usa-alert__heading">
             System outage
         </h3>

src/registrar/templates/includes/banner-warning.html

@@ -1,6 +1,6 @@
 <div class="margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
     <div class="usa-alert usa-alert--warning">
-      <div class="usa-alert__body usa-alert__body--widescreen">
+      <div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
         <h4 class="usa-alert__heading">
           Header
         </h4>

src/registrar/templates/includes/footer.html

@@ -3,7 +3,7 @@
 
 <footer class="usa-footer">
     <div class="usa-footer__secondary-section">
-      <div class="grid-container grid-container--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen">
+      <div class="grid-container grid-container--widescreen">
         <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 usa-identifier__container--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen">
+      <div class="usa-identifier__container usa-identifier__container--widescreen padding-left--widescreen padding-right--widescreen">
         <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 usa-identifier__container--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen">
+      <div class="usa-identifier__container usa-identifier__container--widescreen padding-left--widescreen padding-right--widescreen">
         <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 usa-identifier__container--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen">
+      <div class="usa-identifier__container usa-identifier__container--widescreen padding-left--widescreen padding-right--widescreen">
         <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 usa-nav-container--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen">
+  <div class="usa-nav-container usa-nav-container--widescreen padding-left--widescreen padding-right--widescreen">
     <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 usa-navbar--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen">
+    <div class="usa-navbar usa-navbar--widescreen padding-left--widescreen padding-right--widescreen">
         {% 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 usa-nav__inner--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen">
+    <div class="usa-nav__inner usa-nav__inner--widescreen padding-left--widescreen padding-right--widescreen">
         <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

@@ -8,22 +8,25 @@
             {% if user.is_authenticated %}
             {# the entire logged in page goes here #}
 
-            <div class="tablet:grid-col-11 desktop:grid-col-10 tablet:grid-offset-1">
+            <div class="grid-row {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
+              <div class="tablet:grid-col-11 desktop:grid-col-10 {% if not is_widescreen_left_justified %} tablet:grid-offset-1 {% endif %}">
                 {% block messages %}
                     {% include "includes/form_messages.html" %}
                 {% endblock %}
 
                 {% block portfolio_content %}{% endblock %}
 
-            </div>            
-            {% else %} {# not user.is_authenticated #}
-            {# the entire logged out page goes here #}
-
-            <p><a class="usa-button" href="{% url 'login' %}">
-            Sign in
-            </a></p>
-
-            {% endif %}
+              </div>            
+              {% else %} {# not user.is_authenticated #}
+              {# the entire logged out page goes here #}
+
+              <p><a class="usa-button" href="{% url 'login' %}">
+              Sign in
+              </a></p>
+
+              {% endif %}
+            </div>
+
         </main>
 
       {% endblock content%}