Merge pull request #1185 from GSA/1050-responsive-header

1050 responsive header
GSA · Mar 5, 2024 · 9a62c9d · 9a62c9d
2 parents 4635b21 + ffd911b
commit 9a62c9d
Show file tree

Hide file tree

Showing 13 changed files with 267 additions and 238 deletions.
diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
@@ -26,7 +26,7 @@ i.e.
    .usa-logo {
       font-family: family("sans");
       margin: units(4) 0;
-      @include at-media-max('mobile-lg') {
+      @include at-media-max('desktop') {
          margin: units(4) 0 units(4) units(2);
       }
       img {
@@ -43,6 +43,16 @@ i.e.
           text-decoration: underline;
         }
       }
+      @include at-media-max('desktop') {
+         padding: 0 units(2);
+         ul li {
+            padding-bottom: units(1);
+         }
+      }
+   }
+   .usa-nav-container {
+      max-width: 100%;
+      padding: 0;
    }
 }
 
@@ -345,6 +355,9 @@ td.table-empty-message {
          background-image: url(../img/material-icons/description.svg);
       }
    }
+   .table-wrapper {
+      overflow-x: scroll;
+   }
 }
 
 .dashboard-table {

diff --git a/app/templates/components/components/header/template.njk b/app/templates/components/components/header/template.njk
@@ -44,61 +44,63 @@
 
 <!-- usa header -->
 <header class="usa-header usa-header--extended">
-  <div class="usa-navbar">
-    <div class="usa-logo display-flex flex-align-center" id="-logo">
-      {# <div class="logo-img display-flex">
-        <span class="usa-sr-only">US Notify Logo</span>
-        <image src="{{ params.assetsPath | default('/static/images') }}/us-notify-color.png" alt="US Notify logo" xlink:href=""
-          class="usa-flag-logo margin-right-1" width="40" height="35"></image>
-      </div> #}
-      <em class="logo-text usa-logo__text">
-        <a href="/" title="notify.gov">notify.gov</a>
-      </em>
+  <div class="usa-nav-container">
+    <div class="usa-navbar">
+      <div class="usa-logo display-flex flex-align-center flex-justify" id="-logo">
+        {# <div class="logo-img display-flex">
+          <span class="usa-sr-only">US Notify Logo</span>
+          <image src="{{ params.assetsPath | default('/static/images') }}/us-notify-color.png" alt="US Notify logo" xlink:href=""
+            class="usa-flag-logo margin-right-1" width="40" height="35"></image>
+        </div> #}
+        <em class="logo-text usa-logo__text">
+          <a href="/" title="Notify.gov">Notify.gov</a>
+        </em>
+        {% if params.navigation %}
+          <button type="button" class="usa-menu-btn">Menu</button>
+        {% endif %}
+      </div>
     </div>
-    {% if current_user.is_authenticated %}
-      <button type="button" class="usa-menu-btn">Menu</button>
-    {% endif %}
-  </div>
-  <nav aria-label="Primary navigation" class="usa-nav">
-    <div class="usa-nav__inner">
-      <button type="button" class="usa-nav__close">
-        <img src="/static/images/usa-icons/close.svg" role="img" alt="Close" />
-      </button>
-      <ul class="usa-nav__primary usa-accordion margin-right-1">
-        {% for item in params.navigation %}
-          {% if item.href and item.text %}
-          <li class="usa-nav__primary-item{{ ' is-current' if item.active }}">
-            <a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value in
-              item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
-              <span>{{ item.text }}</span>
-            </a>
-          </li>
-          {% endif %}
-        {% endfor %}
-      </ul>
-      <div class="usa-nav__secondary margin-bottom-2">
-        <ul class="usa-nav__secondary-links">
-          {% for item in params.secondaryNavigation %}
+    <nav aria-label="Primary navigation" class="usa-nav">
+      <div class="usa-nav__inner">
+        <button type="button" class="usa-nav__close">
+          <img src="/static/images/usa-icons/close.svg" role="img" alt="Close" />
+        </button>
+        <ul class="usa-nav__primary usa-accordion margin-right-1">
+          {% for item in params.navigation %}
             {% if item.href and item.text %}
-              <li class="usa-nav__secondary-item{{ ' is-current' if item.active }}">
-                <a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value in
-                  item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
-                  <span>{{ item.text }}</span>
-                </a>
-              </li>
-          {% endif %}
-        {% endfor %}
+            <li class="usa-nav__primary-item{{ ' is-current' if item.active }}">
+              <a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value in
+                item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
+                <span>{{ item.text }}</span>
+              </a>
+            </li>
+            {% endif %}
+          {% endfor %}
         </ul>
-        <!-- <section aria-label="Search component">
-          <form class="usa-search usa-search--small margin-bottom-2" role="search">
-            <label class="usa-sr-only" for="search-field">Search</label>
-            <input class="usa-input" id="search-field" type="search" name="search" />
-            <button class="usa-button" type="submit">
-              <img src="/static/images/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" />
-            </button>
-          </form>
-        </section> -->
+        <div class="usa-nav__secondary margin-bottom-2">
+          <ul class="usa-nav__secondary-links">
+            {% for item in params.secondaryNavigation %}
+              {% if item.href and item.text %}
+                <li class="usa-nav__secondary-item{{ ' is-current' if item.active }}">
+                  <a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value in
+                    item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
+                    <span>{{ item.text }}</span>
+                  </a>
+                </li>
+            {% endif %}
+          {% endfor %}
+          </ul>
+          <!-- <section aria-label="Search component">
+            <form class="usa-search usa-search--small margin-bottom-2" role="search">
+              <label class="usa-sr-only" for="search-field">Search</label>
+              <input class="usa-input" id="search-field" type="search" name="search" />
+              <button class="usa-button" type="submit">
+                <img src="/static/images/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" />
+              </button>
+            </form>
+          </section> -->
+        </div>
       </div>
-    </div>
-  </nav>
+    </nav>
+  </div>
 </header>
diff --git a/app/templates/content_template.html b/app/templates/content_template.html
@@ -11,10 +11,10 @@
   <div class="grid-row">
 
     {% if navigation_links %}
-      <div class="tablet:grid-col-2">
+      <div class="tablet:grid-col-2 margin-bottom-4">
         {{ sub_navigation(navigation_links) }}
       </div>
-      <div class="tablet:grid-col-10 padding-left-4 usa-prose site-prose">
+      <div class="tablet:grid-col-10 tablet:padding-left-4 usa-prose site-prose">
     {% else %}
       <div class="tablet:grid-col-10">
     {% endif %}

diff --git a/app/templates/main_nav.html b/app/templates/main_nav.html
@@ -1,7 +1,7 @@
 {% if help %}
   {% include 'partials/tour.html' %}
 {% else %}
-<nav class="nav">
+<nav class="nav margin-bottom-4">
   <a class="usa-button margin-top-1 margin-bottom-5 width-full"
     href="{{ url_for('.choose_template', service_id=current_service.id) }}">Send messages</a>
   <ul class="usa-sidenav">

diff --git a/app/templates/partials/notifications/notifications.html b/app/templates/partials/notifications/notifications.html
@@ -1,7 +1,7 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading, notification_status_field %}
 {% from "components/page-footer.html" import page_footer %}
 
-<div class="ajax-block-container" aria-labelledby='pill-selected-item'>
+<div class="ajax-block-container table-wrapper" aria-labelledby='pill-selected-item'>
   <div class="dashboard-table bottom-gutter-3-2">
 
   {% call(item, row_number) list_table(

diff --git a/app/templates/settings_template.html b/app/templates/settings_template.html
@@ -8,16 +8,16 @@
   <div class="grid-container">
     <div class="grid-row margin-top-5">
       {% if help %}
-        <div class="grid-col-3">
+        <div class="tablet:grid-col-3">
       {% else %}
-        <div class="grid-col-3">
+        <div class="tablet:grid-col-3 margin-bottom-4">
       {% endif %}
           {% include "settings_nav.html" %}
         </div>
       {% if help %}
-        <div class="grid-col-8">
+        <div class="tablet:grid-col-8">
       {% else %}
-        <div class="grid-col-9 padding-left-4">
+        <div class="tablet:grid-col-9 tablet:padding-left-4">
       {% endif %}
         {% block beforeContent %}
           {% block backLink %}{% endblock %}

diff --git a/app/templates/views/activity/notifications.html b/app/templates/views/activity/notifications.html
@@ -5,6 +5,7 @@
 <div class="ajax-block-container" id='pill-selected-item'>
 
   {% if notifications %}
+  <div class="table-wrapper">
     <div class='dashboard-table'>
   {% endif %}
     {% call(item, row_number) list_table(
@@ -29,6 +30,7 @@
     {% endcall %}
   {% if notifications %}
     </div>
+  </div>
   {% endif %}
 
   {% if show_pagination %}

diff --git a/app/templates/views/api/callbacks.html b/app/templates/views/api/callbacks.html
@@ -14,24 +14,26 @@
 
 {% block maincolumn_content %}
   {{ page_header('Callbacks') }}
-  <div class="bottom-gutter-3-2 dashboard-table body-copy-table">
-		{% call mapping_table(
-	    caption='General',
-	    field_headings=['Label', 'Value', 'Action'],
-	    field_headings_visible=False,
-	    caption_visible=False
-	  ) %}
-	    {% call row() %}
-	      {{ text_field('Delivery receipts') }}
-	      {{ optional_text_field(delivery_status_callback, truncate=true) }}
-	      {{ edit_field('Change', url_for('.delivery_status_callback', service_id=current_service.id)) }}
-	    {% endcall %}
+	<div class="table-wrapper">
+		<div class="bottom-gutter-3-2 dashboard-table body-copy-table">
+				{% call mapping_table(
+				caption='General',
+				field_headings=['Label', 'Value', 'Action'],
+				field_headings_visible=False,
+				caption_visible=False
+			) %}
+				{% call row() %}
+				{{ text_field('Delivery receipts') }}
+				{{ optional_text_field(delivery_status_callback, truncate=true) }}
+				{{ edit_field('Change', url_for('.delivery_status_callback', service_id=current_service.id)) }}
+				{% endcall %}
 
-	    {% call row() %}
-	      {{ text_field('Received text messages') }}
-          {{ optional_text_field(received_text_messages_callback, truncate=true) }}
-	   	  {{ edit_field('Change', url_for('.received_text_messages_callback', service_id=current_service.id)) }}
-	    {% endcall %}
-	  {% endcall %}
+				{% call row() %}
+				{{ text_field('Received text messages') }}
+				{{ optional_text_field(received_text_messages_callback, truncate=true) }}
+				{{ edit_field('Change', url_for('.received_text_messages_callback', service_id=current_service.id)) }}
+				{% endcall %}
+			{% endcall %}
+		</div>
 	</div>
 {% endblock %}