fireinfo/vendor(s): restyled vendor pages

diff --git a/src/templates/fireinfo/vendor.html b/src/templates/fireinfo/vendor.html
index 1862bc806906e45d2f02314fb4fa421dd6c71c5f..5ae32ee2650d8bebb218ed0f5bfbca2d0db82632 100644 (file)
--- a/src/templates/fireinfo/vendor.html
+++ b/src/templates/fireinfo/vendor.html
@@ -2,17 +2,36 @@
 
 {% block title %}{{ vendor_name }}{% end block %}
 
-{% block content %}
-       <section>
-               <div class="container">
-                       <div class="row">
-                               <div class="col-12">
-                                       <h1>{{ vendor_name }}</h1>
+{% block container %}
+       <section class="hero is-primary">
+               <div class="hero-body">
+                       <div class="container">
+                               <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+                                       <ul>
+                                               <li>
+                                                       <a href="https://ipfire.org/">
+                                                               Home
+                                                       </a>
+                                               </li>
+                                               <li>
+                                                       <a href="/">
+                                                               {{ _("Fireinfo") }}
+                                                       </a>
+                                               </li>
+                                               <li>
+                                                       <a href="/vendors">
+                                                               {{ _("Vendors") }}
+                                                       </a>
+                                               </li>
+                                               <li class="is-active">
+                                                       <a href="#">
+                                                               {{ vendor_name }}
+                                                       </a>
+                                               </li>
+                                       </ul>
+                               </nav>
 
-                                       <p>
-                                               {{ _("All known devices by %s") % vendor_name }}
-                                       </p>
-                               </div>
+                               <h2 class="title is-2">{{ _("All known devices by %s") % vendor_name }}</h2>
                        </div>
                </div>
        </section>

diff --git a/src/templates/fireinfo/vendors.html b/src/templates/fireinfo/vendors.html
index 5e66ed74ecd41a8eae1495c1a6b8f1a64d0ff82f..fe5718a667e2845b11d6df40cabd44bced29829c 100644 (file)
--- a/src/templates/fireinfo/vendors.html
+++ b/src/templates/fireinfo/vendors.html
@@ -3,32 +3,48 @@
 {% block title %}{{ _("Vendors") }}{% end block %}
 
 {% block container %}
-       <section>
+<section class="hero is-primary">
+       <div class="hero-body">
                <div class="container">
-                       <div class="row">
-                               <div class="col-12">
-                                       <h1>{{ _("Vendors") }}</h1>
-                               </div>
-                       </div>
+                       <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+                               <ul>
+                                       <li>
+                                               <a href="https://ipfire.org/">
+                                                       Home
+                                               </a>
+                                       </li>
+                                       <li>
+                                               <a href="/">
+                                                       {{ _("Fireinfo") }}
+                                               </a>
+                                       </li>
+                                       <li class="is-active">
+                                               <a href="#">
+                                                       {{ _("Vendors") }}
+                                               </a>
+                                       </li>
+                               </ul>
+                       </nav>
+
+                       <h1 class="title is-1">{{ _("Vendors") }}</h1>
                </div>
-       </section>
+       </div>
+</section>
 
+<section class="section">
        <div class="container">
-               <div class="row justify-content-center">
-                       <div class="col-12 col-md-6">
-                               <dl class="row">
-                                       {% for vendor, subsystems in vendors %}
-                                               {% if vendor %}
-                                                       <dt class="col-sm-9">{{ vendor }}</dt>
-                                                       <dd class="col-sm-3">
-                                                               {% for subsystem, vendor_id in sorted(subsystems) %}
-                                                                       <a href="/vendors/{{ subsystem }}/{{ vendor_id }}">{{ subsystem.upper() }}</a>
-                                                               {% end %}
-                                                       </dd>
+               {% for vendor, subsystems in vendors %}
+                       <div class="columns">
+                               {% if vendor %}
+                                       <div class="column is-4">{{ vendor }}</div>
+                                       <div class="column is-3">
+                                               {% for subsystem, vendor_id in sorted(subsystems) %}
+                                                       <a href="/vendors/{{ subsystem }}/{{ vendor_id }}">{{ subsystem.upper() }}</a>
                                                {% end %}
-                                       {% end %}
-                               </dl>
+                                       </div>
+                               {% end %}
                        </div>
-               </div>
+               {% end %}
        </div>
+</section>
 {% end block %}