805 - Making the clickable area on dashboard a button

This commit is contained in:
Jonathan Bobel
2024-03-18 12:43:56 -04:00
parent 0e608599c3
commit ee1c4efb03
4 changed files with 22 additions and 19 deletions

View File

@@ -312,18 +312,15 @@ td.table-empty-message {
.dashboard { .dashboard {
.big-number-with-status { .big-number-with-status {
a { // a {
background: color("blue-60v"); // background: color("blue-60v");
padding: units(2); // padding: units(2);
margin-bottom: units(1); // margin-bottom: units(1);
text-decoration: none; // text-decoration: none;
&:hover{ // &:hover{
background: color("blue-warm-70v"); // background: color("blue-warm-70v");
} // }
} // }
span {
color: white;
}
.big-number-smaller { .big-number-smaller {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@@ -9,5 +9,9 @@ in the form $setting: value,
@use "uswds-core" with ( @use "uswds-core" with (
$theme-font-type-sans: "public-sans", $theme-font-type-sans: "public-sans",
$theme-show-notifications: false $theme-show-notifications: false,
$theme-banner-max-width: "desktop-lg",
$theme-grid-container-max-width: "desktop-lg",
$theme-footer-max-width: "desktop-lg",
$theme-header-max-width: "desktop-lg"
); );

View File

@@ -1,18 +1,21 @@
<div class="ajax-block-container"> <div class="ajax-block-container">
<div class="grid-row grid-gap"> <div class="grid-row grid-gap">
<div id="total-sms" class="grid-col-12"> <div id="total-sms" class="grid-col-12">
<span class="big-number-with-status"> <span class="big-number-with-status display-block margin-bottom-2">
<a class="usa-link display-flex" href="{{ url_for('.view_notifications', service_id=service_id, message_type='sms', status='sending,delivered,failed') }}"> <p>
<span class="big-number-smaller"> <span class="big-number-smaller">
<span class="big-number-number"> <span class="big-number-number">
{% if statistics['sms']['requested'] is number %} {% if statistics['sms']['requested'] is number %}
{{ "{:,}".format(statistics['sms']['requested']) }} {{ "{:,}".format(statistics['sms']['requested']) }}
{% else %} {% else %}
{{ statistics['sms']['requested'] }} {{ statistics['sms']['requested'] }}
{% endif %} {% endif %}
</span> </span>
<span class="big-number-label">{{ statistics['sms']['requested']|message_count_label('sms', suffix='sent') }}</span> <span class="big-number-label">{{ statistics['sms']['requested']|message_count_label('sms', suffix='sent') }} in the last seven days</span>
</span> </span>
</p>
<a class="usa-button usa-button--outline" href="{{ url_for('.view_notifications', service_id=service_id, message_type='sms', status='sending,delivered,failed') }}">
Details
</a> </a>
{% if show_failures %} {% if show_failures %}
<span class="big-number-status{% if statistics['sms']['show_warning'] is sameas true %} big-number-status--failing{% endif %}"> <span class="big-number-status{% if statistics['sms']['show_warning'] is sameas true %} big-number-status--failing{% endif %}">

View File

@@ -21,7 +21,6 @@
<h2 class="font-body-xl margin-0"> <h2 class="font-body-xl margin-0">
Messages sent Messages sent
</h2> </h2>
<p class="margin-top-0">In the last seven days</p>
{{ ajax_block(partials, updates_url, 'inbox') }} {{ ajax_block(partials, updates_url, 'inbox') }}