Merge pull request #14367 from andrejvelichkovski/c3-803-rebrand-comp…

…onents-page

Rebrand public representation for components

templates/certified/components/_certified-releases.html

@@ -0,0 +1,30 @@
+<section class="p-section">
+  <div class="row">
+    <div class="col-9 col-medium-4 col-start-large-4 col-start-medium-3">
+      <table aria-label="Components certified in ubuntu releases">
+        <thead>
+          <tr>
+            <th>Ubuntu Release</th>
+            <th>Status</th>
+            <th>Third-party driver</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for name, details in lts_releases.items() %}
+            <tr>
+              <td class="u-text--muted">{{ details.0.release }}</td>
+              <td class="u-text--muted">{{ details.0.status.title() }}</td>
+              <td class="u-text--muted">
+                {% if details.0.third_party_driver != True %}
+                  No
+                {% else %}
+                  Yes
+                {% endif %}
+              </td>
+            </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  </div>
+</section>

templates/certified/components/_hardware-details.html

@@ -0,0 +1,67 @@
+<section class="p-section">
+  <div class="row--25-75">
+    <div class="col">
+      <h2 class="p-muted-heading">Component details</h2>
+    </div>
+    <div class="col">
+      <table aria-label="Component details table">
+        <tbody>
+          {% if component.vendor_name %}
+            <tr>
+              <th colspan="3" class="u-text--muted">Vendor</th>
+              <td colspan="6">{{ component.vendor_name }}</td>
+            </tr>
+          {% endif %}
+          {% if component.model %}
+            <tr>
+              <th colspan="3" class="u-text--muted">Model name</th>
+              <td colspan="6">{{ component.model }}</td>
+            </tr>
+          {% endif %}
+          {% if component.identifier %}
+            <tr>
+              <th colspan="3" class="u-text--muted">Identifier</th>
+              <td colspan="6">{{ component.identifier }}</td>
+            </tr>
+          {% endif %}
+          {% if component.subsystem_identifier %}
+            <tr>
+              <th colspan="3" class="u-text--muted">Subsystem Identifier</th>
+              <td colspan="6">{{ component.subsystem_identifier }}</td>
+            </tr>
+          {% endif %}
+          {% if component.hardware_vendor_make %}
+            <tr>
+              <th colspan="3" class="u-text--muted">Hardware Vendor make</th>
+              <td colspan="6">{{ component.hardware_vendor_make }}</td>
+            </tr>
+          {% endif %}
+          {% if component.vendor_make %}
+            <tr>
+              <th colspan="3" class="u-text--muted">Vendor make</th>
+              <td colspan="6">{{ component.vendor_make }}</td>
+            </tr>
+          {% endif %}
+          {% if component.part_number %}
+            <tr>
+              <th colspan="3" class="u-text--muted">Part number</th>
+              <td colspan="6">{{ component.part_number }}</td>
+            </tr>
+          {% endif %}
+          {% if component.category %}
+            <tr>
+              <th colspan="3" class="u-text--muted">Device category</th>
+              <td colspan="6">{{ component.category }}</td>
+            </tr>
+          {% endif %}
+          {% if component.note %}
+            <tr>
+              <th colspan="3" class="u-text--muted">Note</th>
+              <td colspan="6">{{ component.note }}</td>
+            </tr>
+          {% endif %}
+        </tbody>
+      </table>
+    </div>
+  </div>
+</section>

templates/certified/components/_hero-section.html

@@ -0,0 +1,10 @@
+<section class="p-section--hero">
+  <div class="row">
+    <div class="col-9 col-medium-4 col-start-large-4 col-start-medium-3">
+      <div class="p-section--shallow">
+        <h1 class="p-muted-heading">Component</h1>
+        <h2 class="u-no-margin--bottom p-heading--1">{{ vendor_name }} {{ component_name }}</h2>
+      </div>
+    </div>
+  </div>
+</section>

templates/certified/components/_machines-present.html

@@ -0,0 +1,19 @@
+<section class="p-section--deep">
+  <div class="row--25-75">
+    <div class="col">
+      <h2 class="p-muted-heading">
+        Present in {{ machines|length }} certified system
+        {%- if machines|length > 1 -%}s{% endif %}
+      </h2>
+    </div>
+    <div class="col">
+      <ul class="p-list--divided">
+        {% for machine in machines %}
+          <li class="p-list__item">
+            <a href="/certified/{{ machine.canonical_id }}">{{ machine.canonical_id }} {{ machine.make }} {{ machine.model }}</a>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+</section>

templates/certified/components/component-details.html

@@ -0,0 +1,34 @@
+{% extends "templates/base.html" %}
+
+{% block title %}Ubuntu certified component: {{ component.vendor_name }} {{ component.model }}{% endblock %}
+
+{% block meta_description %}Hardware that have been certified for use with Ubuntu.{% endblock meta_description %}
+
+{% block body_class %}is-paper{% endblock body_class %}
+
+{% block outer_content %}
+
+{% with 
+  vendor_name=component.vendor_name,
+  component_name=component.model
+%}
+  {% include "/certified/components/_hero-section.html" %}
+{% endwith %}
+
+{% with
+  lts_releases=component.lts_releases
+%}
+  {% include "/certified/components/_certified-releases.html" %}
+{% endwith %}
+
+<hr class="p-rule is-fixed-width"/>
+{% with component=component %}
+  {% include "/certified/components/_hardware-details.html" %}
+{% endwith %}
+
+<hr class="p-rule is-fixed-width"/>
+{% with machines=machines %}
+  {% include "/certified/components/_machines-present.html" %}
+{% endwith %}
+
+{% endblock %}

webapp/certified/views.py

@@ -424,7 +424,7 @@ def certified_component_details(component_id):
     machines = machines_by_id.values()
 
     return render_template(
-        "certified/component-details.html",
+        "certified/components/component-details.html",
         component=component,
         machines=sorted(
             machines, key=lambda machine: machine["canonical_id"], reverse=True