Refactored to check for centered pages instead of left-justified pages. Simplified global application of widescreen in context processor. Fixed unformatted pages.

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

@@ -19,7 +19,7 @@
 // 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).
+// where is_widescreen_centered is used in the html).
 .max-width--grid-container {
   max-width: 64rem;
 }

src/registrar/config/settings.py

@@ -252,7 +252,7 @@ TEMPLATES = [
                 "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",
+                "registrar.context_processors.is_widescreen_centered",
             ],
         },
     },

src/registrar/context_processors.py

@@ -99,68 +99,30 @@ def portfolio_permissions(request):
 
 
 def is_widescreen_mode(request):
-    widescreen_paths = [
+    exclude_paths = ["/admin/"]
-        "/domain-request/",
-    ]  # If this list is meant to include specific paths, populate it.
-    portfolio_widescreen_paths = [
-        "/domains/",
-        "/requests/",
-        "/no-organization-requests/",
-        "/no-organization-domains/",
-        "/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 == "/"
-
-    # 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)
-    )
 
+    # Widescreen is now global for all pages EXCEPT admin
     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))
+        "is_widescreen_mode": not is_excluded
-        and not is_excluded
     }
 
-
+def is_widescreen_centered(request):
-def get_is_widescreen_left_justified(request):
     include_paths = [
-        "/user-profile",
+        "/domains/",
-        "/request/",
+        "/requests/",
-        "/domain/",
+        "/members/",
     ]
-    portfolio_include_paths = [
+    exclude_paths = [
-        "/organization/",
+        "/domains/edit",
-        "/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)
+    is_widescreen_centered = any(path in request.path for path in include_paths) or request.path=="/"
-
-    # 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_left_justified": get_is_widescreen_left_justified(request)}
+    return {"is_widescreen_centered": is_widescreen_centered and not is_excluded}

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 {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}"> 
+  <div class="grid-row grow-gap {% if not is_widescreen_centered %} 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 {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}"> 
+  <div class="grid-row grow-gap {% if not is_widescreen_centered %} 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 {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
+  <div class="grid-row grid-gap {% if not is_widescreen_centered %} 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 {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
+  <div class="grid-row grid-gap {% if not is_widescreen_centered %} 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/domain_base.html

@@ -6,7 +6,7 @@
 {% block content %}
 <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="grid-row grid-gap {% if not is_widescreen_centered %} 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

@@ -4,7 +4,7 @@
 {% block title %}{{form_titles|get_item:steps.current}} | Request a .gov | {% endblock %}
 {% block content %}
 <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="grid-row grid-gap {% if not is_widescreen_centered %} max-width--grid-container {% endif %}">
     <div class="tablet:grid-col-3">
       {% include 'domain_request_sidebar.html' %}
     </div>

src/registrar/templates/domain_request_intro.html

@@ -4,8 +4,9 @@
 {% block title %} Start a request | {% 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-col desktop:grid-offset-2 desktop:grid-col-8">
+    <div class="grid-row {% if not is_widescreen_centered %} max-width--grid-container {% endif %}">
+      <div class="grid-col {% if is_widescreen_centered %} desktop:grid-offset-2 {% endif %} desktop:grid-col-8">
 
       <form class="usa-form usa-form--extra-large" method="post" novalidate>
           {% csrf_token %}
@@ -25,7 +26,7 @@
           {% include "includes/profile_information.html" with user=user%}
           
 
-{% block form_buttons %}
+  {% block form_buttons %}
           <div class="stepnav">
               <button
                 type="submit"
@@ -34,7 +35,7 @@
                 class="usa-button"
               >Continue</button>
           </div>
-{% endblock %}
+  {% endblock %}
 
           </form>
 

src/registrar/templates/domain_request_withdraw_confirmation.html

@@ -8,18 +8,20 @@
 {% endblock wrapperdiv %}
 
 {% block content %}
-<div class="grid-container">
+<div class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-<div class="grid-col desktop:grid-offset-2 desktop:grid-col-8">
+  <div class="grid-row {% if not is_widescreen_centered %} max-width--grid-container {% endif %}">
+    <div class="grid-col {% if is_widescreen_centered %} desktop:grid-offset-2 {% endif %} desktop:grid-col-8">
     
 
-<h1>Withdraw request for {{ DomainRequest.requested_domain.name }}?</h1>
+    <h1>Withdraw request for {{ DomainRequest.requested_domain.name }}?</h1>
 
-<p>If you withdraw your request, we won't review it. Once you withdraw your request, you can edit it and submit it again. </p>
+    <p>If you withdraw your request, we won't review it. Once you withdraw your request, you can edit it and submit it again. </p>
 
-<p><a href="{% url 'domain-request-withdrawn' DomainRequest.id %}" class="usa-button withdraw">Withdraw request</a>  
+    <p><a href="{% url 'domain-request-withdrawn' DomainRequest.id %}" class="usa-button withdraw">Withdraw request</a>  
       <a href="{% url 'domain-request-status' DomainRequest.id %}">Cancel</a></p>
 
-</div>
+    </div>
+  </div>
 
 </div>
 {% endblock %}

src/registrar/templates/home.html

@@ -10,7 +10,7 @@
 {# the entire logged in page goes here #}
 
 {% block homepage_content %}
-  <div class="tablet:grid-col-11 desktop:grid-col-10 tablet:grid-offset-1">
+  <div class="tablet:grid-col-11 desktop:grid-col-10 {% if is_widescreen_centered %} tablet:grid-offset-1 {% endif %}">
     {% block messages %}
       {% include "includes/form_messages.html" %}
     {% endblock %}

src/registrar/templates/includes/domain_request_status_manage.html

@@ -1,7 +1,8 @@
 {% load custom_filters %}
 {% load static url_helpers %}
-<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-col desktop:grid-offset-2 desktop:grid-col-8">
+    <div class="grid-row {% if not is_widescreen_centered %} max-width--grid-container {% endif %}">
+        <div class="grid-col {% if is_widescreen_centered %} desktop:grid-offset-2 {% endif %} desktop:grid-col-8">
             {% block breadcrumb %}
             {% if portfolio %}
                 {% url 'domain-requests' as url %}
@@ -139,7 +140,7 @@
             {% endblock modify_request %}
         </div>
 
-    <div class="grid-col desktop:grid-offset-2 maxw-tablet">
+        <div class="grid-col {% if is_widescreen_centered %} desktop:grid-offset-2 maxw-tablet{% endif %}">
             {% block request_summary_header %}
             <h2 class="text-primary-darker"> Summary of your domain request </h2> 
             {% endblock request_summary_header%}
@@ -233,4 +234,5 @@
         {% endwith %}
         {% endblock request_summary%}
         </div>
+    </div>
 </main>

src/registrar/templates/includes/request_status_manage.html

@@ -1,7 +1,8 @@
 {% load custom_filters %}
 {% load static url_helpers %}
-<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-col desktop:grid-offset-2 desktop:grid-col-8">
+    <div class="grid-row {% if not is_widescreen_centered %} max-width--grid-container {% endif %}">
+        <div class="grid-col desktop:grid-col-8 {% if is_widescreen_centered %} desktop:grid-offset-2 {% endif %}">
             {% block breadcrumb %}
             {% if portfolio %}
                 {% url 'domain-requests' as url %}
@@ -139,7 +140,7 @@
             {% endblock modify_request %}
         </div>
 
-    <div class="grid-col desktop:grid-offset-2 maxw-tablet">
+        <div class="grid-col {% if is_widescreen_centered %} desktop:grid-offset-2 maxw-tablet{% endif %}">
             {% block request_summary_header %}
             <h2 class="text-primary-darker"> Summary of your domain request </h2> 
             {% endblock request_summary_header%}
@@ -237,4 +238,5 @@
         {% endif %}
         {% endblock request_summary%}
         </div>
+    </div>
 </main>

src/registrar/templates/portfolio_base.html

@@ -8,8 +8,8 @@
             {% if user.is_authenticated %}
             {# the entire logged in page goes here #}
             
-            <div class="grid-row {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
+            <div class="grid-row {% if not is_widescreen_centered %} 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 %}">
+              <div class="tablet:grid-col-11 desktop:grid-col-10 {% if is_widescreen_centered %} tablet:grid-offset-1 {% endif %}">
                 {% block messages %}
                     {% include "includes/form_messages.html" %}
                 {% endblock %}

src/registrar/templates/profile.html

@@ -12,7 +12,7 @@ Edit your User Profile |
 
 {% block content %}
 <main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
-    <div class="grid-row {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
+    <div class="grid-row {% if not is_widescreen_centered %} max-width--grid-container {% endif %}">
         <div class="desktop:grid-col-8">
             {% if messages %}
             {% for message in messages %}