Merge pull request #3759 from alphagov/make-big-number-inline

Make big number inline

app/assets/stylesheets/components/big-number.scss

@@ -3,14 +3,17 @@
 
   display: block;
 
+  &-number,
+  &-label {
+    display: block;
+  }
+
   &-number {
     @include bold-48($tabular-numbers: true);
-    display: block;
   }
 
   &-label {
     @include core-19;
-    display: inline-block;
     padding-bottom: 10px;
   }
 

app/templates/components/big-number.html

@@ -2,22 +2,22 @@
   {% if link %}
     <a class="govuk-link govuk-link--no-visited-state big-number-link" href="{{ link }}">
   {% endif %}
-  <div class="big-number{% if smaller %}-smaller{% endif %}{% if smallest %}-smallest{% endif %}">
-    <div class="big-number-number">
-      {% if number is number %}
-        {% if currency %}
-          {{ "{}{:,.2f}".format(currency, number) }}
-        {% else %}
-          {{ "{:,}".format(number) }}
+      <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 %}
-      {% else %}
-        {{ number }}
-      {% endif %}
-    </div>
-    {% if label %}
-      <span class="big-number-label">{{ label }}</span>
-    {% endif %}
-  </div>
+      </span>
   {% if link %}
     </a>
   {% endif %}
@@ -36,10 +36,10 @@
   smaller=False,
   smallest=False
 ) %}
-  <div class="big-number-with-status">
+  <span class="big-number-with-status">
     {{ big_number(number, label, link=link, smaller=smaller, smallest=smallest) }}
     {% if show_failures %}
-      <div class="big-number-status{% if danger_zone %}-failing{% endif %}">
+      <span class="big-number-status{% if danger_zone %}-failing{% endif %}">
         {% if failures %}
           {% if failure_link %}
             <a class="govuk-link govuk-link--no-visited-state" href="{{ failure_link }}">
@@ -53,23 +53,23 @@
         {% else %}
           No failures
         {% endif %}
-      </div>
+      </span>
     {% endif %}
-  </div>
+  </span>
 {% endmacro %}
 
 
 {% macro big_number_simple(number, label) %}
-  <div class="big-number-dark bottom-gutter-2-3">
-    <div class="big-number-number">
+  <span class="big-number-dark bottom-gutter-2-3">
+    <span class="big-number-number">
       {% if number is number %}
         {{ "{:,}".format(number) }}
       {% else %}
         {{ number }}
       {% endif %}
-    </div>
+    </span>
     {% if label %}
       <span class="big-number-label">{{ label }}</span>
     {% endif %}
-  </div>
+  </span>
 {% endmacro %}

app/templates/components/table.html

@@ -1,5 +1,3 @@
-{% from "components/big-number.html" import big_number %}
-
 {% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True, equal_length=False) -%}
   <table class="table table-font-xsmall">
     <caption class="heading-medium table-heading{{ ' govuk-visually-hidden' if not caption_visible}}">

app/templates/views/dashboard/_inbox.html

@@ -1,4 +1,3 @@
-{% from "components/big-number.html" import big_number, big_number_with_status %}
 {% from "components/message-count-label.html" import message_count_label %}
 
 <div class="ajax-block">

app/templates/views/dashboard/_upcoming.html

@@ -1,5 +1,4 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
-{% from "components/big-number.html" import big_number %}
 {% from "components/show-more.html" import show_more %}
 
 <div class="ajax-block-container">

app/templates/views/dashboard/dashboard.html

@@ -1,6 +1,5 @@
 {% extends "withnav_template.html" %}
 
-{% from "components/big-number.html" import big_number, big_number_with_status %}
 {% from "components/show-more.html" import show_more %}
 {% from "components/message-count-label.html" import message_count_label %}
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, hidden_field_heading %}

app/templates/views/jobs/_scheduled.html

@@ -1,34 +0,0 @@
-{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
-{% from "components/big-number.html" import big_number %}
-{% from "components/show-more.html" import show_more %}
-
-{% if current_service.scheduled_jobs %}
-  <div class='dashboard-table'>
-    {% call(item, row_number) list_table(
-      current_service.scheduled_jobs,
-      caption="In the next few days",
-      caption_visible=False,
-      empty_message='Nothing to see here',
-      field_headings=[
-        'File',
-        'Messages to be sent'
-      ],
-      field_headings_visible=True
-    ) %}
-      {% call row_heading() %}
-        <div class="file-list">
-          <a class="file-list-filename" href="{{ url_for('.view_job', service_id=current_service.id, job_id=item.id) }}">{{ item.original_file_name }}</a>
-          <span class="file-list-hint">
-            Sending {{ item.scheduled_for|format_datetime_relative }}
-          </span>
-        </div>
-      {% endcall %}
-      {% call field() %}
-        {{ big_number(
-          item.notification_count,
-          smallest=True
-        ) }}
-      {% endcall %}
-    {% endcall %}
-  </div>
-{% endif %}

app/templates/views/uploads/uploaded-letters.html

@@ -1,5 +1,4 @@
 {% extends "withnav_template.html" %}
-{% from 'components/big-number.html' import big_number %}
 {% from 'components/message-count-label.html' import message_count_label %}
 {% from "components/page-header.html" import page_header %}
 

tests/app/main/views/test_dashboard.py

@@ -1426,7 +1426,7 @@ def test_service_dashboard_updates_gets_dashboard_totals(
         service_id=SERVICE_ONE_ID,
     )
 
-    numbers = [number.text.strip() for number in page.find_all('div', class_='big-number-number')]
+    numbers = [number.text.strip() for number in page.find_all('span', class_='big-number-number')]
     assert '123' in numbers
     assert '456' in numbers
 

tests/app/main/views/test_platform_admin.py

@@ -627,7 +627,7 @@ def test_platform_admin_displays_stats_in_right_boxes_and_with_correct_styling(
     # Email complaints status box - link exists and number is correct
     assert page.find('a', string='15 complaints')
     # SMS total box - number is correct
-    assert page.find_all('div', class_='big-number-number')[1].text.strip() == '168'
+    assert page.find_all('span', class_='big-number-number')[1].text.strip() == '168'
     # Test SMS box - number is correct
     assert '5' in page.find_all('div', class_='govuk-grid-column-one-third')[4].text
     # SMS technical failure status box - number is correct and failure class is used