distros: Improve design

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

diff --git a/src/templates/distros/index.html b/src/templates/distros/index.html
index 7b1e51e9bf1169b6bbb20476c0a67906be87977d..e0e7147b5b223aacec6fb8762f6681621e1bf292 100644 (file)
--- a/src/templates/distros/index.html
+++ b/src/templates/distros/index.html
@@ -3,19 +3,27 @@
 {% block title %}{{ _("Distributions") }}{% end block %}
 
 {% block body %}
+       <section class="hero is-light">
+               <div class="hero-body">
+                       <div class="container">
+                               <nav class="breadcrumb" aria-label="breadcrumbs">
+                                       <ul>
+                                               <li class="is-active">
+                                                       <a href="#" aria-current="page">
+                                                               {{ _("Distributions") }}
+                                                       </a>
+                                               </li>
+                                       </ul>
+                               </nav>
+
+                               <h1 class="title">{{ _("Distributions") }}</h1>
+                       </div>
+               </div>
+       </section>
+
        <section class="section">
                <div class="container">
-                       <nav class="breadcrumb" aria-label="breadcrumbs">
-                               <ul>
-                                       <li class="is-active">
-                                               <a href="#" aria-current="page">
-                                                       {{ _("Distributions") }}
-                                               </a>
-                                       </li>
-                               </ul>
-                       </nav>
-
-                       <h1 class="title">{{ _("Distributions") }}</h1>
+                       {% module DistrosList(distros) %}
 
                        {% if current_user and current_user.is_admin() %}
                                <div class="block">
@@ -24,8 +32,6 @@
                                        </a>
                                </div>
                        {% end %}
-
-                       {% module DistrosList(distros) %}
                </div>
        </section>
 {% end block %}

diff --git a/src/templates/distros/modules/list.html b/src/templates/distros/modules/list.html
index 4ea3881b6caaa8fc044a76984866259e694beb08..5dfb8b75d1bea71c4763f406c438fa0314ebe6c5 100644 (file)
--- a/src/templates/distros/modules/list.html
+++ b/src/templates/distros/modules/list.html
@@ -1,9 +1,14 @@
-{% for distro in distros %}
-       <div class="block">
-               <div class="box">
-                       <h5 class="title is-5">
-                               <a href="/distros/{{ distro.slug }}">{{ distro }}</a>
-                       </h5>
-               </div>
-       </div>
-{% end %}
+<div class="block">
+       <nav class="panel">
+               {% for distro in distros %}
+                       <a class="panel-block is-block p-4" href="/distros/{{ distro.slug }}">
+                               <h5 class="title is-5">
+                                       {{ distro }}
+                               </h5>
+                               {% if distro.codename %}
+                                       <h6 class="subtitle is-6">{{ distro.codename }}</h6>
+                               {% end %}
+                       </a>
+               {% end %}
+       </nav>
+</div>

diff --git a/src/templates/distros/show.html b/src/templates/distros/show.html
index 169db31e9d14e4f58ba03e4fca0eaff5f006a70a..220690f54d9bdfdd253d6b62f875d5be32c1029d 100644 (file)
--- a/src/templates/distros/show.html
+++ b/src/templates/distros/show.html
@@ -3,57 +3,63 @@
 {% block title %}{{ _("Distributions") }} - {{ distro }}{% end block %}
 
 {% block body %}
-       <section class="section">
-               <div class="container">
-                       <nav class="breadcrumb" aria-label="breadcrumbs">
-                               <ul>
-                                       <li>
-                                               <a href="/distros">{{ _("Distributions") }}</a>
-                                       </li>
-                                       <li class="is-active">
-                                               <a href="#" aria-current="page">{{ distro }}</a>
-                                       </li>
-                               </ul>
-                       </nav>
+       <section class="hero is-light">
+               <div class="hero-body">
+                       <div class="container">
+                               <nav class="breadcrumb" aria-label="breadcrumbs">
+                                       <ul>
+                                               <li>
+                                                       <a href="/distros">{{ _("Distributions") }}</a>
+                                               </li>
+                                               <li class="is-active">
+                                                       <a href="#" aria-current="page">{{ distro }}</a>
+                                               </li>
+                                       </ul>
+                               </nav>
 
-                       <h1 class="title is-1">{{ distro }}</h1>
+                               <h1 class="title is-1">
+                                       {{ distro }} {% if distro.codename %}&dash; {{ distro.codename }}{% end %}
+                               </h1>
 
-                       {% if distro.slogan %}
-                               <h4 class="subtitle is-4">{{ distro.slogan }}</h4>
-                       {% end %}
+                               {% if distro.slogan %}
+                                       <h4 class="subtitle is-4">{{ distro.slogan }}</h4>
+                               {% end %}
 
-                       {% if distro.description %}
-                               <div class="block">
-                                       <div class="box">
+                               {% if distro.description %}
+                                       <div class="block is-size-5 p-5">
                                                {% module Text(distro.description) %}
+                                       </div>
 
+                                       <div class="block">
                                                <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 class="level-item has-text-centered">
+                                                               <div>
+                                                                       <p class="heading">{{ _("Supported Architectures") }}</p>
+                                                                       <p>
+                                                                               <span class="tags is-justify-content-center">
+                                                                                       {% for arch in distro.arches %}
+                                                                                               <span class="tag is-dark">{{ arch }}</span>
+                                                                                       {% end %}
+                                                                               </span>
+                                                                       </p>
                                                                </div>
                                                        </div>
                                                </nav>
-
-                                               <div class="buttons are-small">
-                                                       {% if distro.has_perm(current_user) %}
-                                                               <a class="button is-warning" href="/distros/{{ distro.slug }}/edit">
-                                                                       {{ _("Edit") }}
-                                                               </a>
-                                                       {% end %}
-                                               </div>
                                        </div>
-                               </div>
-                       {% end %}
+                               {% end %}
+                       </div>
+               </div>
+       </section>
+
+       <section class="section">
+               <div class="container">
+                       <div class="buttons">
+                               {% if distro.has_perm(current_user) %}
+                                       <a class="button is-warning" href="/distros/{{ distro.slug }}/edit">
+                                               {{ _("Edit") }}
+                                       </a>
+                               {% end %}
+                       </div>
                </div>
        </section>
 

diff --git a/src/templates/repos/modules/list.html b/src/templates/repos/modules/list.html
index 3ce2f2ca6984ae19e76441980288964456ffca62..556eb91faa6d426dfcdee171be587e0f5826695c 100644 (file)
--- a/src/templates/repos/modules/list.html
+++ b/src/templates/repos/modules/list.html
@@ -27,6 +27,10 @@
                                        <span class="has-text-grey">
                                                {{ _("Added %s") % locale.format_date(t, shorter=True) }}
                                        </span>
+                               {% else %}
+                                       <span class="tag">
+                                               {{ _("One Build", "%(num)s Builds", repo.total_builds) % { "num" : repo.total_builds } }}
+                                       </span>
                                {% end %}
                        </a>
                {% end %}