Merge pull request #3335 from alphagov/style-org-usage

Style the organisation usage page
This commit is contained in:
Chris Hill-Scott
2020-02-28 14:53:33 +00:00
committed by GitHub
5 changed files with 152 additions and 26 deletions

View File

@@ -1,3 +1,5 @@
{% from "components/big-number.html" import big_number %}
{% from "components/pill.html" import pill %}
{% extends "org_template.html" %}
{% block org_page_title %}
@@ -10,17 +12,81 @@
Usage
</h1>
<ul>
{% for service in services['services'] %}
<li class="browse-list-item">
<a href="{{ url_for('main.usage', service_id=service.service_id) }}" class="govuk-link govuk-link--no-visited-state browse-list-link">{{ service.service_name }}</a>
</li>
<div class="grid-row">
<div class="column-one-third">{{ service.emails_sent|format_thousands }} emails sent</div>
<div class="column-one-third">{{ "£{:,.2f}".format(service.sms_cost) }} spent on text messages</div>
<div class="column-one-third">{{ "£{:,.2f}".format(service.letter_cost) }} spent on letters</div>
<div class="bottom-gutter-3-2">
{{ pill(years, selected_year, big_number_args={'smallest': True}) }}
</div>
<div class="govuk-grid-row bottom-gutter">
<div class="govuk-grid-column-one-third">
<div class="keyline-block">
{{ big_number(
total_emails_sent,
label='emails sent',
smaller=True
) }}
</div>
</div>
<div class="govuk-grid-column-one-third">
<div class="keyline-block">
{{ big_number(
total_sms_cost,
'spent on text messages',
currency="£",
smaller=True
) }}
</div>
</div>
<div class="govuk-grid-column-one-third">
<div class="keyline-block">
{{ big_number(
total_letter_cost,
'spent on letters',
currency="£",
smaller=True
) }}
</div>
</div>
</div>
{% for service in services %}
<div class="keyline-block govuk-!-margin-top-2">
<h2 class="govuk-!-font-weight-bold govuk-!-font-size-24 govuk-!-margin-bottom-1 govuk-!-margin-top-1">
<a href="{{ url_for('main.usage', service_id=service.service_id) }}" class="govuk-link govuk-link--no-visited-state browse-list-link">{{ service.service_name }}</a>
</h2>
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
{{ big_number(
service.emails_sent,
label='emails sent',
smallest=True
) }}
</div>
<div class="govuk-grid-column-one-third">
{% if service.sms_cost %}
{{ big_number(
service.sms_cost,
'spent on text messages',
currency="£",
smallest=True
) }}
{% else %}
{{ big_number(
service.free_sms_limit - service.sms_remainder,
'free text messages sent',
smallest=True
) }}
{% endif %}
</div>
<div class="govuk-grid-column-one-third">
{{ big_number(
service.letter_cost,
'spent on letters',
currency="£",
smallest=True
) }}
</div>
</div>
</div>
{% endfor %}
</ul>
<div class="keyline-block govuk-!-margin-top-2"></div>
{% endblock %}