app/templates/components/big-number.html

{% macro big_number(number, label, link=None, currency='', smaller=False, smallest=False) %}
  {% if link %}
    <a class="usa-link display-flex" href="{{ link }}">
  {% endif %}
      <span class="big-number{% if smaller %}-smaller{% endif %}{% if smallest %}-smallest{% endif %}">
        <span class="big-number-number">
          {% if number is number %}
            {% if currency %}
              {{ "{}{:,.2f}".format(currency, number) }}
            {% else %}
              {{ "{:,}".format(number) }}
            {% endif %}
          {% else %}
            {{ number }}
          {% endif %}
        </span>
        {% if label %}
          <span class="big-number-label">{{ label }}</span>
        {% endif %}
      </span>
  {% if link %}
    </a>
  {% endif %}
{% endmacro %}
Give headline numbers a blue, not black background These numbers don’t look very clickable white-on-black. Blue is the colour of links, so lets see if they are more clickable in blue. The same clicking-a-big-number thing is also happening on the activity page, so this commit also changes the activity page to look the same. 2016-06-08 15:41:02 +01:00			`{% macro big_number(number, label, link=None, currency='', smaller=False, smallest=False) %}`
			`{% if link %}`
Reworking checkboxes to adhere to USWDS styling 2023-08-14 10:35:11 -04:00			`<a class="usa-link display-flex" href="{{ link }}">`
Give headline numbers a blue, not black background These numbers don’t look very clickable white-on-black. Blue is the colour of links, so lets see if they are more clickable in blue. The same clicking-a-big-number thing is also happening on the activity page, so this commit also changes the activity page to look the same. 2016-06-08 15:41:02 +01:00			`{% endif %}`
Remove <div>s from big_number text An accessiblity audit done as part of Notify's service assessment raised the following problem with our big_number component. When you turn CSS off, the sentence in the component is split onto separate lines. This was because the number part is wrapped in a <div> which browsers were interpreting as being a separate sentence to the label. So "1 letter", where "letter" is the label, was seen as: "1" "letter" The accessibility expert consulted on this pointed out that this would sound confusing for users of screen readers when moving through the document sentence by sentence. These changes: - make the <div>s into <span>s which are 'phrasing content' and so are interpreted as part of the same sentence - change the CSS so the number will still sit on top of its label text The HTML5 spec has a section on how browsers should arrange text into paragraphs that explains what was happening in more detail: https://www.w3.org/TR/html52/dom.html#paragraphs 2020-12-23 15:29:57 +00:00			`<span class="big-number{% if smaller %}-smaller{% endif %}{% if smallest %}-smallest{% endif %}">`
			`<span class="big-number-number">`
			`{% if number is number %}`
			`{% if currency %}`
			`{{ "{}{:,.2f}".format(currency, number) }}`
			`{% else %}`
			`{{ "{:,}".format(number) }}`
			`{% endif %}`
			`{% else %}`
			`{{ number }}`
			`{% endif %}`
			`</span>`
			`{% if label %}`
			`<span class="big-number-label">{{ label }}</span>`
Make template usage on dashboard easier to scan The dashboard looked a bit table-y. This commit makes four main changes: - show a bar chart (drawn in CSS) for template usage (only shown if you’ve used more than one template recently) - only break down template usage by template name, not template type (because that’s happening with the big numbers) - change the style of the ‘show more’ links under each section so that they are all consistent, and a little less busy (one less keyline) - remove the ‘recent templates‘ title so that the first two sections of the page group under ‘in the last 7 days’ 2016-05-11 15:05:40 +01:00			`{% endif %}`
Remove <div>s from big_number text An accessiblity audit done as part of Notify's service assessment raised the following problem with our big_number component. When you turn CSS off, the sentence in the component is split onto separate lines. This was because the number part is wrapped in a <div> which browsers were interpreting as being a separate sentence to the label. So "1 letter", where "letter" is the label, was seen as: "1" "letter" The accessibility expert consulted on this pointed out that this would sound confusing for users of screen readers when moving through the document sentence by sentence. These changes: - make the <div>s into <span>s which are 'phrasing content' and so are interpreted as part of the same sentence - change the CSS so the number will still sit on top of its label text The HTML5 spec has a section on how browsers should arrange text into paragraphs that explains what was happening in more detail: https://www.w3.org/TR/html52/dom.html#paragraphs 2020-12-23 15:29:57 +00:00			`</span>`
Give headline numbers a blue, not black background These numbers don’t look very clickable white-on-black. Blue is the colour of links, so lets see if they are more clickable in blue. The same clicking-a-big-number thing is also happening on the activity page, so this commit also changes the activity page to look the same. 2016-06-08 15:41:02 +01:00			`{% if link %}`
			`</a>`
			`{% endif %}`
Add big number component… …and count the messages to display some totals 2015-12-17 11:52:24 +00:00			`{% endmacro %}`