web: Refactor distro detail page

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/distros/show.html b/src/templates/distros/show.html
index a717c6be8a7159ca41318d4c944ec8d27f111738..752a2e176f32983b669b452a65c9518fd7686bb4 100644 (file)
--- a/src/templates/distros/show.html
+++ b/src/templates/distros/show.html
@@ -1,50 +1,55 @@
 {% extends "../base.html" %}
 
-{% block title %}{{ _("Distribution") }} - {{ distro }}{% end block %}
+{% block title %}{{ _("Distributions") }} - {{ distro }}{% end block %}
 
 {% block container %}
-       <nav aria-label="{{ _("You are here:") }}" role="navigation">
-               <ul class="breadcrumbs">
-                       <li>
-                               <a href="/">{{ _("Home") }}</a>
-                       </li>
+       <nav class="breadcrumb" aria-label="breadcrumbs">
+               <ul>
                        <li>
                                <a href="/distros">{{ _("Distributions") }}</a>
                        </li>
-                       <li>
-                               <span class="show-for-sr">{{ _("Current") }}: </span> {{ distro }}
+                       <li class="is-active">
+                               <a href="#" aria-current="page">{{ distro }}</a>
                        </li>
                </ul>
        </nav>
 
-       <h1>
-               {{ distro }}
-
-               {% if distro.slogan %}
-                       <small>{{ distro.slogan }}</small>
-               {% end %}
-       </h1>
+       <h1 class="title is-1">{{ distro }}</h1>
+       {% if distro.slogan %}
+               <h4 class="subtitle is-4">{{ distro.slogan }}</h4>
+       {% end %}
 
        {% if distro.description %}
-               <div class="callout">
-                       {% module Text(distro.description) %}
+               <div class="block">
+                       <div class="box">
+                               <div class="content">
+                                       {% module Text(distro.description) %}
+                               </div>
+
+                               <nav class="level">
+                                       <div class="level-left">
+                                               <div class="level-item has-text-centered">
+                                                       <div>
+                                                               <p class="heading">{{ _("Supported Architectures") }}</p>
+                                                               <p>
+                                                                       <span class="tags">
+                                                                               {% for arch in distro.arches %}
+                                                                                       <span class="tag is-dark">{{ arch }}</span>
+                                                                               {% end %}
+                                                                       </span>
+                                                               </p>
+                                                       </div>
+                                               </div>
+                                       </div>
+                               </nav>
+                       </div>
                </div>
        {% end %}
 
-       {% if distro.arches %}
-               <p>
-                       {{ _("Supported Architectures") }}
-
-                       {% for arch in distro.arches %}
-                               <span class="label">{{ arch }}</span>
-                       {% end %}
-               </p>
-       {% end %}
-
        {# Repositories #}
 
        {% if distro.repos %}
-               <h4>{{ _("Repositories") }}</h4>
+               <h4 class="title is-4">{{ _("Repositories") }}</h4>
 
                {% module ReposList(distro.repos) %}
        {% end %}