Changing the layout of the page to a table view

This commit is contained in:
Jonathan Bobel
2023-10-31 14:22:00 -04:00
parent c695b59385
commit 0a11211c81
4 changed files with 58 additions and 27 deletions

View File

@@ -238,9 +238,6 @@ td.table-empty-message {
// Dashboard
.dashboard {
.big-number-number {
font-weight: bold;
}
.big-number-with-status {
a {
background: color("blue-60v");

View File

@@ -2,22 +2,34 @@
<div class='grid-row grid-gap ajax-block-container'>
<div class='grid-col-12'>
<div class="keyline-block">
{% if sms_cost %}
{{ big_number(
sms_cost,
'spent on text messages',
currency="$",
smaller=True
) }}
{% else %}
{{ big_number(sms_allowance_remaining, 'free text messages left', smaller=True) }}
{% endif %}
</div>
<table class="usa-table usa-table--borderless margin-bottom-5">
<caption class="usa-sr-only">
Daily
</caption>
<thead>
<tr>
<th scope="col">Usage</th>
<th scope="col">Remaining</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ big_number(40000 - sms_allowance_remaining, smaller=True) }}</td>
<td>
{% if sms_cost %}
{{ big_number(
sms_cost,
'spent on text messages',
currency="$",
smaller=True
) }}
{% else %}
{{ big_number(sms_allowance_remaining, smaller=True) }}
{% endif %}
</td>
</tr>
</tbody>
</table>
</div>
<!-- <div class='grid-col-6 pilot-disabled'>
<div class="keyline-block">
{{ big_number("0", 'email disabled during SMS pilot', smaller=True) }}
</div>
</div> -->
</div>

View File

@@ -19,9 +19,10 @@
{{ ajax_block(partials, updates_url, 'upcoming') }}
<h2 class="font-body-lg margin-top-0 margin-bottom-1">
In the last seven days
<h2 class="font-body-xl margin-0">
Messages sent
</h2>
<p class="margin-top-0">In the last seven days</p>
{{ ajax_block(partials, updates_url, 'inbox') }}
@@ -29,15 +30,35 @@
{{ ajax_block(partials, updates_url, 'template-statistics') }}
<h2 class="heading-small margin-bottom-1">Daily messages across all services</h2>
<p class="margin-top-0"><strong>{{ daily_global_messages_remaining }}</strong> free text messages left</p>
<h2 class="margin-bottom-1">Usage</h2>
<h3 class="margin-bottom-0">Daily</h3>
<p class="margin-0">Across all services</p>
<table class="usa-table usa-table--borderless margin-bottom-5">
<caption class="usa-sr-only">
Daily
</caption>
<thead>
<tr>
<th scope="col">Usage</th>
<th scope="col">Remaining</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ 5000 - daily_global_messages_remaining }}</td>
<td>
{{ daily_global_messages_remaining }}
</td>
</tr>
</tbody>
</table>
{% if current_user.has_permissions('manage_service') %}
<h2 class='font-body-lg margin-bottom-1'>This year</h2>
<h3 class='font-body-md margin-bottom-1'>2023</h3>
{{ ajax_block(partials, updates_url, 'usage') }}
{{ show_more(
url_for(".usage", service_id=current_service['id']),
'See usage'
'See all usage'
) }}
{% endif %}
</div>

View File

@@ -22,7 +22,8 @@
<div class='grid-col-12'>
<h2 class="heading-small margin-bottom-1">Daily messages across all services</h2>
<p class="margin-top-0"><strong>{{ daily_global_messages_remaining }}</strong> free text messages left</p>
<p class="margin-0">You have sent {{ 5000 - daily_global_messages_remaining }} of your 5000 daily messages allowance.</p>
<p class="margin-0"></p>You have {{ daily_global_messages_remaining }} messages remaining.</p>
<h2 class='heading-small margin-bottom-1'>Text messages</h2>
<div class="keyline-block">
You have sent