design: use summary list style for details page metadata

also left align the "entry last updated" text.

scss/_details.scss

@@ -6,6 +6,5 @@
 }
 
 .app-summary-card .app-summary-card__footer  {
-    text-align: right;
     margin-bottom: 0;
 }

templates/details_base.html

@@ -33,11 +33,8 @@
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-full">
-      <h1 class="govuk-heading-l">{{h1_value}}
-        <strong class="govuk-tag govuk-!-margin-left-2">
-          {{entity_type}}
-        </strong>
-      </h1>
+      <span class="govuk-caption-l">{{entity_type}}</span>
+      <h1 class="govuk-heading-l">{{h1_value}}</h1>
     </div>
   </div>
   <div class="govuk-grid-row">
@@ -56,49 +53,7 @@ <h2 class="govuk-heading-s govuk-!-margin-top-3">
         {% block extra_description %}
         {% endblock extra_description %}
         {% block metadata_list %}
-          <ul class="govuk-list govuk-body" id="metadata-property-list">
-            {% if entity.created %}
-              <li>
-                <span class="govuk-!-font-weight-bold">Data first created:</span>
-                {{entity.created | date:"jS F Y"}} ({{entity.created|naturaltime}})
-              </li>
-            {% endif %}
-            {% if entity.data_last_modified and entity.platform.urn != PlatformUrns.CADET %}
-              <li>
-                <span class="govuk-!-font-weight-bold">Data last updated:</span>
-                {{entity.data_last_modified | date:"jS F Y"}}
-              </li>
-            {% endif %}
-              <li>
-                <span class="govuk-!-font-weight-bold">Refresh period:</span>
-                {{entity.custom_properties.data_summary.refresh_period | default:'Not provided' }}
-              </li>
-            {% if entity.custom_properties.security_classification %}
-              <li>
-                <span class="govuk-!-font-weight-bold">Security classification:</span>
-                {{entity.custom_properties.security_classification}}
-              </li>
-            {% endif %}
-            {% if entity.last_datajob_run_date %}
-              <li>
-                <span class="govuk-!-font-weight-bold">Data last updated:</span>
-                {{entity.last_datajob_run_date|date:"d M Y"}}
-              </li>
-            {% endif %}
-            <li>
-              {% include 'partial/subject_area_list.html' with subject_areas=entity.subject_areas %}
-            </li>
-            {% switch 'display-result-tags' %}
-              {% if entity.tags_to_display %}
-                <li>
-                  <span class="govuk-!-font-weight-bold">Tags:</span>
-                  {% for tag in entity.tags_to_display %}
-                    <a aria-label="link to search results for all entities tagged {{ tag }}" href="{% url 'home:search' %}{% querystring clear_label=None clear_filter=None new=None tags=tag%}">{{ tag }}</a>{% if not forloop.last %}, {% endif %}
-                  {% endfor %}
-                </li>
-              {% endif %}
-            {% endswitch %}
-          </ul>
+          {% include "partial/details_metadata.html" with entity=entity entity_type=entity_type %}
           {% include "partial/esda_info.html" with is_esda=is_esda %}
         {% endblock metadata_list %}
         {% if entity.metadata_last_ingested %}

templates/partial/details_metadata.html

@@ -0,0 +1,95 @@
+{% load humanize %}
+{% load lookup %}
+{% load waffle_tags %}
+<dl class="app-metadata-list" id="metadata-property-list">
+  <div class="app-metadata-list__row">
+    <dt class="app-metadata-list__key">
+      Entity type
+    </dt>
+    <dd class="app-metadata-list__value">
+      <strong class="govuk-tag">
+        {{ entity_type }}
+      </strong>
+    </dd>
+  </div>
+
+  <div class="app-metadata-list__row">
+    <dt class="app-metadata-list__key">
+      Subject area{{entity.subject_areas|length|pluralize}}
+    </dt>
+    <dd class="app-metadata-list__value">
+      {% for subject_area in entity.subject_areas %}
+      {{ subject_area.display_name }}{% if not forloop.last %}, {% endif %}
+      {% endfor %}
+      {% if not entity.subject_areas %}
+      Not provided
+      {% endif %}
+    </dd>
+  </div>
+
+  {% if entity.created %}
+  <div class="app-metadata-list__row">
+    <dt class="app-metadata-list__key">
+      Data first created
+    </dt>
+    <dd class="app-metadata-list__value">
+    {{entity.created | date:"jS F Y"}} ({{entity.created|naturaltime}})
+    </dd>
+  </div>
+  {% endif %}
+
+  {% if entity.data_last_modified and entity.platform.urn != PlatformUrns.CADET %}
+  <div class="app-metadata-list__row">
+    <dt class="app-metadata-list__key">
+      Data last updated
+    </dt>
+    <dd class="app-metadata-list__value">
+      {{entity.data_last_modified | date:"jS F Y"}}
+    </dd>
+  </div>
+  {% elif entity.last_datajob_run_date %}
+  <div class="app-metadata-list__row">
+    <dt class="app-metadata-list__key">
+      Data last updated
+    </dt>
+    <dd class="app-metadata-list__value">
+      {{entity.last_datajob_run_date|date:"jS F Y"}}
+    </dd>
+  </div>
+  {% endif %}
+
+  <div class="app-metadata-list__row">
+    <dt class="app-metadata-list__key">
+      Refresh period
+    </dt>
+    <dd class="app-metadata-list__value">
+      {{entity.custom_properties.data_summary.refresh_period | default:'Not provided' }}
+    </dd>
+  </div>
+
+  {% if entity.custom_properties.security_classification %}
+  <div class="app-metadata-list__row">
+    <dt class="app-metadata-list__key">
+      Security classification
+    </dt>
+    <dd class="app-metadata-list__value">
+      {{entity.custom_properties.security_classification}}
+    </dd>
+  </div>
+  {% endif %}
+
+  {% switch 'display-result-tags' %}
+  {% if entity.tags_to_display %}
+  <div class="app-metadata-list__row">
+    <dt class="app-metadata-list__key">
+      Tags
+    </dt>
+    <dd class="app-metadata-list__value">
+      {% for tag in entity.tags_to_display %}
+      <a aria-label="link to search results for all entities tagged {{ tag }}" href="{% url 'home:search' %}{% querystring clear_label=None clear_filter=None new=None tags=tag %}">{{ tag }}</a>{% if not forloop.last %}, {% endif %}
+      {% endfor %}
+    </dd>
+  </div>
+  {% endif %}
+  {% endswitch %}
+</dl>