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

When resizing the viewport for the header, I noticed other responsive issues and addressed them here

Browse Source
This commit is contained in:
Jonathan Bobel
2024-03-05 09:51:25 -05:00
parent 0d15734110
commit 026ed52ce5
12 changed files with 206 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -355,7 +355,7 @@ td.table-empty-message {
background-image: url(../img/material-icons/description.svg); background-image: url(../img/material-icons/description.svg);
} }
} }
.job-table, .dashboard-table { .table-wrapper {
overflow-x: scroll; overflow-x: scroll;
} }
} }

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