C3-803: Rebrand the Certified Hardware Details Page (#14466)

* Initial rebrand for hardware details

* Implement follow-ups

* Finalise changes

* Fix black formatting

* Fix djlint formatting

templates/certified/hardware-details/_hardware-table.html

@@ -0,0 +1,33 @@
+<div class="p-section--deep row">
+  <div class="col-9 col-start-large-4">
+    <hr class="p-rule" />
+    <table aria-label="Hardware details for {{ release_details.make }} {{ release_details.model }}">
+      <tbody>
+        {% for category, devices in hardware_details.items() %}
+          {% if category != "Other" %}
+            <tr>
+              <th colspan="3" class="u-text--muted">{{ category }}</th>
+              <td colspan="6">
+                <ul class="p-list u-no-margin--bottom">
+                  {% for device in devices %}
+                    <li class="p-list__item u-no-padding--top">
+                      {{ device.name }}
+                      {% if device.bus in ["usb", "pci"] %}
+                        ({{ device.identifier -}}
+                        {% if device.subsystem %}
+                          {{ device.subsystem -}}
+                        {% endif %})
+                      {% endif %}
+                    </li>
+                  {% endfor %}
+                </ul>
+              </td>
+            </tr>
+          {% endif %}
+        {% else %}
+          There are no hardware details available for this machine.
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</div>

templates/certified/hardware-details/_hero-section.html

@@ -0,0 +1,25 @@
+<section class="p-section--hero">
+  <div class="row">
+    <div class="col-9 col-medium-4 col-start-medium-3 col-start-large-4">
+      <h1 class="p-muted-heading">
+        <a href="/certified/{{ category_pathname }}">{{ category_pathname }}</a> &rsaquo; <a href="/certified/platforms/{{ release_details.platform_id }}">{{ release_details.platform_name }}</a>
+        &rsaquo; <a href="/certified/{{ release_details.canonical_id }}"> {{ release_details.model }}</a>
+      </h1>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-3 col-medium-2 u-hide--small">
+      <div class="p-section--shallow">
+        {% with category=release_details.category %}
+          {% include "certified/shared/category-image.html" %}
+        {% endwith %}
+      </div>
+    </div>
+    <div class="col-9 col-medium-4">
+      <div class="p-section--shallow u-no-padding--bottom">
+        <h1 class="u-no-margin--bottom">{{ release_details.make }} {{ release_details.model }} certified on Ubuntu {{ release_details.certified_release }}</h1>
+        <h2>Hardware details</h2>
+      </div>
+    </div>
+  </div>
+</section>

templates/certified/hardware-details/hardware-details.html

@@ -0,0 +1,25 @@
+{% extends "templates/base.html" %}
+
+{% block title %}
+  {{ vendor }} {{ release_details.model }} certified with Ubuntu {{ release_details.certified_release }}
+{% endblock %}
+
+{% block meta_description %}
+  Hardware details of {{ vendor }} {{ release_details.model }} certified with Ubuntu {{ release_details.certified_release }}.
+{% endblock meta_description %}
+
+{% block body_class %}
+  is-paper
+{% endblock body_class %}
+
+{% block outer_content %}
+
+  {% with release_details=release_details %}
+    {% include "certified/hardware-details/_hero-section.html" %}
+  {% endwith %}
+
+  {% with hardware_details=hardware_details %}
+    {% include "certified/hardware-details/_hardware-table.html" %}
+  {% endwith %}
+
+{% endblock outer_content %}

webapp/certified/views.py

@@ -544,7 +544,8 @@ def certified_hardware_details(canonical_id, release):
         hardware_details[category].append(device_info)
 
     return render_template(
-        "certified/hardware-details.html",
+        "certified/hardware-details/hardware-details.html",
+        category_pathname=_get_category_pathname(models["category"]),
         canonical_id=canonical_id,
         model_name=models["model"],
         form=models["category"],