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

1050 responsive header

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 {

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>
-    {% 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 %}
-            {% 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 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>
-  </nav>
+    <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 %}
+              {% 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>
+    </nav>
+  </div>
 </header>

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

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">

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(

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

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

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

app/templates/views/dashboard/_jobs.html

@@ -1,115 +1,117 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
 
-<div class='dashboard-table ajax-block-container'>
-  {% call(item, row_number) list_table(
-    jobs,
-    caption="Recent files uploaded",
-    caption_visible=False,
-    empty_message=(
-      'You have not uploaded any files yet.'
-    ),
-    field_headings=[
-      'File',
-      'Status'
-    ],
-    field_headings_visible=False
-  ) %}
-    {% call row_heading() %}
-      <div class="file-list">
-        <a class="file-list-filename-large usa-link" href="{{ url_for('.view_job', service_id=current_service.id, job_id=item.id) }}">{{ item.original_file_name }}</a>
-        {% if item.scheduled %}
-          <span class="file-list-hint-large">
-            Sending {{
-              item.scheduled_for|format_datetime_relative
-            }}
-          </span>
-        {% else %}
-          <span class="file-list-hint-large">
-            Sent {{
-              (item.scheduled_for or item.created_at)|format_datetime_relative
-            }}
-          </span>
-        {% endif %}
-
-      </div>
-    {% endcall %}
-    {% call field() %}
-      {% if item.scheduled %}
-        {% if link %}
-          <a class="usa-link display-flex" href="{{ link }}">
-        {% endif %}
-            <span class="big-number-smallest">
-              <span class="big-number-number">
-                {% if item.notification_count is number %}
-                  {% if currency %}
-                    {{ "{}{:,.2f}".format(currency, item.notification_count) }}
-                  {% else %}
-                    {{ "{:,}".format(item.notification_count) }}
-                  {% endif %}
-                {% else %}
-                  {{ item.notification_count }}
-                {% endif %}
-              </span>
-              {% if item.notification_count %}
-                <span class="big-number-label">{{ item.notification_count|message_count_label(item.template_type,suffix='waiting to send') }}</span>
-              {% endif %}
+<div class="table-wrapper">
+  <div class='dashboard-table ajax-block-container'>
+    {% call(item, row_number) list_table(
+      jobs,
+      caption="Recent files uploaded",
+      caption_visible=False,
+      empty_message=(
+        'You have not uploaded any files yet.'
+      ),
+      field_headings=[
+        'File',
+        'Status'
+      ],
+      field_headings_visible=False
+    ) %}
+      {% call row_heading() %}
+        <div class="file-list">
+          <a class="file-list-filename-large usa-link" href="{{ url_for('.view_job', service_id=current_service.id, job_id=item.id) }}">{{ item.original_file_name }}</a>
+          {% if item.scheduled %}
+            <span class="file-list-hint-large">
+              Sending {{
+                item.scheduled_for|format_datetime_relative
+              }}
             </span>
-        {% if link %}
-          </a>
-        {% endif %}
-      {% else %}
-        <div class="grid-row">
-          <div class="grid-col-4">
-            {% if link %}
-              <a class="usa-link display-flex" href="{{ link }}">
-            {% endif %}
+          {% else %}
+            <span class="file-list-hint-large">
+              Sent {{
+                (item.scheduled_for or item.created_at)|format_datetime_relative
+              }}
+            </span>
+          {% endif %}
+
+        </div>
+      {% endcall %}
+      {% call field() %}
+        {% if item.scheduled %}
+          {% if link %}
+            <a class="usa-link display-flex" href="{{ link }}">
+          {% endif %}
               <span class="big-number-smallest">
                 <span class="big-number-number">
-                  {{ "{:,}".format(item.notifications_sending) }}
-                </span>
-                <span class="big-number-label">pending</span>
-              </span>
-            {% if link %}
-              </a>
-            {% endif %}
-          </div>
-          <div class="grid-col-4">
-          <span class="big-number-smallest">
-            <span class="big-number-number">
-              {% if item.notifications_delivered is number %}
-                {{ "{:,}".format(item.notifications_delivered) }}
-              {% else %}
-                {{ item.notifications_delivered }}
-              {% endif %}
-            </span>
-            <span class="big-number-label">delivered</span>
-          </span>
-      </div>
-      <div class="grid-col-4">
-        {% if link %}
-          <a class="usa-link display-flex" href="{{ link }}">
-        {% endif %}
-            <span class="big-number-smallest">
-              <span class="big-number-number">
-                {% if item.notifications_failed is number %}
-                  {% if currency %}
-                    {{ "{}{:,.2f}".format(currency, item.notifications_failed) }}
+                  {% if item.notification_count is number %}
+                    {% if currency %}
+                      {{ "{}{:,.2f}".format(currency, item.notification_count) }}
+                    {% else %}
+                      {{ "{:,}".format(item.notification_count) }}
+                    {% endif %}
                   {% else %}
-                    {{ "{:,}".format(item.notifications_failed) }}
+                    {{ item.notification_count }}
                   {% endif %}
-                {% else %}
-                  {{ item.notifications_failed }}
+                </span>
+                {% if item.notification_count %}
+                  <span class="big-number-label">{{ item.notification_count|message_count_label(item.template_type,suffix='waiting to send') }}</span>
                 {% endif %}
               </span>
-              <span class="big-number-label">failed</span>
+          {% if link %}
+            </a>
+          {% endif %}
+        {% else %}
+          <div class="grid-row">
+            <div class="grid-col-4">
+              {% if link %}
+                <a class="usa-link display-flex" href="{{ link }}">
+              {% endif %}
+                <span class="big-number-smallest">
+                  <span class="big-number-number">
+                    {{ "{:,}".format(item.notifications_sending) }}
+                  </span>
+                  <span class="big-number-label">pending</span>
+                </span>
+              {% if link %}
+                </a>
+              {% endif %}
+            </div>
+            <div class="grid-col-4">
+            <span class="big-number-smallest">
+              <span class="big-number-number">
+                {% if item.notifications_delivered is number %}
+                  {{ "{:,}".format(item.notifications_delivered) }}
+                {% else %}
+                  {{ item.notifications_delivered }}
+                {% endif %}
+              </span>
+              <span class="big-number-label">delivered</span>
             </span>
-        {% if link %}
-          </a>
+        </div>
+        <div class="grid-col-4">
+          {% if link %}
+            <a class="usa-link display-flex" href="{{ link }}">
+          {% endif %}
+              <span class="big-number-smallest">
+                <span class="big-number-number">
+                  {% if item.notifications_failed is number %}
+                    {% if currency %}
+                      {{ "{}{:,.2f}".format(currency, item.notifications_failed) }}
+                    {% else %}
+                      {{ "{:,}".format(item.notifications_failed) }}
+                    {% endif %}
+                  {% else %}
+                    {{ item.notifications_failed }}
+                  {% endif %}
+                </span>
+                <span class="big-number-label">failed</span>
+              </span>
+          {% if link %}
+            </a>
+          {% endif %}
+
+        </div></div>
+
         {% endif %}
-
-      </div></div>
-
-      {% endif %}
+      {% endcall %}
     {% endcall %}
-  {% endcall %}
+  </div>
 </div>

app/templates/views/dashboard/dashboard.html

@@ -29,7 +29,7 @@
 
     {{ ajax_block(partials, updates_url, 'template-statistics') }}
     <h2 class="margin-top-4 margin-bottom-1">Recent Batches</h2>
-    <div>
+    <div class="table-wrapper">
       <table class="usa-table usa-table--borderless job-table">
         <thead class="table-field-headings">
           <tr>

app/templates/views/performance.html

@@ -44,31 +44,33 @@
     </div>
   </div>
 
-  <div class="dashboard-table">
-    {% call(item, row_number) list_table(
-      notifications_by_type|reverse,
-      caption='Messages sent since May 2023',
-      caption_visible=False,
-      field_headings=[
-        'Date',
-        99|message_count_noun('email')|capitalize,
-        99|message_count_noun('sms')|capitalize,
-      ],
-      empty_message='No data to show'
-    ) %}
-      {% call field() %}
-        {{ item.date | format_date_normal }}
+  <div class="table-wrapper">
+    <div class="dashboard-table">
+      {% call(item, row_number) list_table(
+        notifications_by_type|reverse,
+        caption='Messages sent since May 2023',
+        caption_visible=False,
+        field_headings=[
+          'Date',
+          99|message_count_noun('email')|capitalize,
+          99|message_count_noun('sms')|capitalize,
+        ],
+        empty_message='No data to show'
+      ) %}
+        {% call field() %}
+          {{ item.date | format_date_normal }}
+        {% endcall %}
+        {% call field() %}
+          {{ item.emails|format_thousands }}
+        {% endcall %}
+        {% call field() %}
+          {{ item.sms|format_thousands }}
+        {% endcall %}
       {% endcall %}
-      {% call field() %}
-        {{ item.emails|format_thousands }}
-      {% endcall %}
-      {% call field() %}
-        {{ item.sms|format_thousands }}
-      {% endcall %}
-    {% endcall %}
-    <p class="table-show-more-link">
-      Only showing the last {{ notifications_by_type|length }} days
-    </p>
+      <p class="table-show-more-link">
+        Only showing the last {{ notifications_by_type|length }} days
+      </p>
+    </div>
   </div>
 
   <h2 class="govuk-heading-m">
@@ -82,26 +84,28 @@
       ) }}
     </div>
   </div>
-  <div class="dashboard-table">
-    {% call(item, row_number) list_table(
-      processing_time | reverse,
-      caption='Messages sent within 10 seconds',
-      caption_visible=False,
-      field_headings=[
-        'Date', 'Percentage'
-      ],
-      empty_message='No data to show'
-    ) %}
-      {% call field() %}
-        {{ item.date | format_date_normal }}
+  <div class="table-wrapper">
+    <div class="dashboard-table">
+      {% call(item, row_number) list_table(
+        processing_time | reverse,
+        caption='Messages sent within 10 seconds',
+        caption_visible=False,
+        field_headings=[
+          'Date', 'Percentage'
+        ],
+        empty_message='No data to show'
+      ) %}
+        {% call field() %}
+          {{ item.date | format_date_normal }}
+        {% endcall %}
+        {% call field() %}
+          {{ '{:.2f}%'.format(item.percentage_under_10_seconds) }}
+        {% endcall %}
       {% endcall %}
-      {% call field() %}
-        {{ '{:.2f}%'.format(item.percentage_under_10_seconds) }}
-      {% endcall %}
-    {% endcall %}
-    <p class="table-show-more-link">
-      Only showing the last {{ processing_time|length }} days
-    </p>
+      <p class="table-show-more-link">
+        Only showing the last {{ processing_time|length }} days
+      </p>
+    </div>
   </div>
 
   <h2 class="govuk-heading-m">
@@ -120,23 +124,25 @@
       <span class="usa-sr-only">using Notify.</span>
     </div>
   </div>
-  <div class="dashboard-table">
-    {% call(item, row_number) list_table(
-      organizations_using_notify,
-      caption='Organizations using Notify',
-      caption_visible=False,
-      field_headings=[
-        'Organization', 'Number of live services'
-      ],
-      empty_message='No data to show'
-    ) %}
-      {% call field() %}
-        {{ item.organization_name }}
+  <div class="table-wrapper">
+    <div class="dashboard-table">
+      {% call(item, row_number) list_table(
+        organizations_using_notify,
+        caption='Organizations using Notify',
+        caption_visible=False,
+        field_headings=[
+          'Organization', 'Number of live services'
+        ],
+        empty_message='No data to show'
+      ) %}
+        {% call field() %}
+          {{ item.organization_name }}
+        {% endcall %}
+        {% call field() %}
+          {{ item.count_of_live_services }}
+        {% endcall %}
       {% endcall %}
-      {% call field() %}
-        {{ item.count_of_live_services }}
-      {% endcall %}
-    {% endcall %}
+    </div>
   </div>
 
 {% endblock %}

app/templates/views/usage.html

@@ -73,6 +73,7 @@
       </div> #}
 
       {% if months %}
+      <div class="table-wrapper">
         <div class="dashboard-table usage-table body-copy-table margin-top-4">
           {% call(item, row_index) list_table(
             months,
@@ -129,6 +130,7 @@
 
           {% endcall %}
         </div>
+      </div>
       {% endif %}
     </div>
 

app/templates/withnav_template.html

@@ -9,16 +9,16 @@
     {% include "service_navigation.html" %}
     <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">
       {% endif %}
           {% include "main_nav.html" %}
         </div>
       {% if help %}
         <div class="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 %}