darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-09 03:23:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
1050 responsive header
This commit is contained in:
Carlo Costino
2024-03-05 12:56:52 -05:00
committed by GitHub
parent 4635b21c01 ffd911b764
commit 9a62c9df27
13 changed files with 276 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/assets/sass/uswds/_uswds-theme-custom-styles.scss
View File

@@ -26,7 +26,7 @@ i.e.
.usa-logo { .usa-logo {
font-family: family("sans"); font-family: family("sans");
margin: units(4) 0; margin: units(4) 0;
@include at-media-max('mobile-lg') { @include at-media-max('desktop') {
margin: units(4) 0 units(4) units(2); margin: units(4) 0 units(4) units(2);
} }
img { img {
@@ -43,6 +43,16 @@ i.e.
text-decoration: underline; 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); background-image: url(../img/material-icons/description.svg);
} }
} }
.table-wrapper {
overflow-x: scroll;
}
} }
.dashboard-table { .dashboard-table {

112
app/templates/components/components/header/template.njk
View File

@@ -44,61 +44,63 @@
<!-- usa header --> <!-- usa header -->
<header class="usa-header usa-header--extended"> <header class="usa-header usa-header--extended">
<div class="usa-navbar"> <div class="usa-nav-container">
<div class="usa-logo display-flex flex-align-center" id="-logo"> <div class="usa-navbar">
{# <div class="logo-img display-flex"> <div class="usa-logo display-flex flex-align-center flex-justify" id="-logo">
<span class="usa-sr-only">US Notify Logo</span> {# <div class="logo-img display-flex">
<image src="{{ params.assetsPath | default('/static/images') }}/us-notify-color.png" alt="US Notify logo" xlink:href="" <span class="usa-sr-only">US Notify Logo</span>
class="usa-flag-logo margin-right-1" width="40" height="35"></image> <image src="{{ params.assetsPath | default('/static/images') }}/us-notify-color.png" alt="US Notify logo" xlink:href=""
</div> #} class="usa-flag-logo margin-right-1" width="40" height="35"></image>
<em class="logo-text usa-logo__text"> </div> #}
<a href="/" title="notify.gov">notify.gov</a> <em class="logo-text usa-logo__text">
</em> <a href="/" title="Notify.gov">Notify.gov</a>
</div> </em>
{% if current_user.is_authenticated %} {% if params.navigation %}
<button type="button" class="usa-menu-btn">Menu</button> <button type="button" class="usa-menu-btn">Menu</button>
{% endif %} {% 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> </div>
</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> </header>

4
app/templates/content_template.html
View File

@@ -11,10 +11,10 @@
<div class="grid-row"> <div class="grid-row">
{% if navigation_links %} {% if navigation_links %}
<div class="tablet:grid-col-2"> <div class="tablet:grid-col-2 margin-bottom-4">
{{ sub_navigation(navigation_links) }} {{ sub_navigation(navigation_links) }}
</div> </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 %} {% else %}
<div class="tablet:grid-col-10"> <div class="tablet:grid-col-10">
{% endif %} {% endif %}

2
app/templates/main_nav.html
View File

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

2
app/templates/partials/notifications/notifications.html
View File

@@ -1,7 +1,7 @@
{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading, notification_status_field %} {% 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 %} {% 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"> <div class="dashboard-table bottom-gutter-3-2">
{% call(item, row_number) list_table( {% call(item, row_number) list_table(

8
app/templates/settings_template.html
View File

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

2
app/templates/views/activity/notifications.html
View File

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

38
app/templates/views/api/callbacks.html
View File

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

206
app/templates/views/dashboard/_jobs.html
View File

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

2
app/templates/views/dashboard/dashboard.html
View File

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

124
app/templates/views/performance.html
View File

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

2
app/templates/views/usage.html
View File

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

6
app/templates/withnav_template.html
View File

@@ -9,16 +9,16 @@
{% include "service_navigation.html" %} {% include "service_navigation.html" %}
<div class="grid-row margin-top-5"> <div class="grid-row margin-top-5">
{% if help %} {% if help %}
<div class="grid-col-3"> <div class="tablet:grid-col-3">
{% else %} {% else %}
<div class="grid-col-3"> <div class="tablet:grid-col-3">
{% endif %} {% endif %}
{% include "main_nav.html" %} {% include "main_nav.html" %}
</div> </div>
{% if help %} {% if help %}
<div class="grid-col-8"> <div class="grid-col-8">
{% else %} {% else %}
<div class="grid-col-9 padding-left-4"> <div class="tablet:grid-col-9 tablet:padding-left-4">
{% endif %} {% endif %}
{% block beforeContent %} {% block beforeContent %}
{% block backLink %}{% endblock %} {% block backLink %}{% endblock %}