dbl: Refactor the lists header

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

diff --git a/src/templates/dbl/lists/show.html b/src/templates/dbl/lists/show.html
index 37716bba3abab849c18503f8f7d253695e9a588a..a5c68f20eace8abed5ee862bb3811e1f5a6c9abf 100644 (file)
--- a/src/templates/dbl/lists/show.html
+++ b/src/templates/dbl/lists/show.html
@@ -10,76 +10,71 @@
 {% block title %}{{ _("IPFire DBL") }} - {{ list }}{% end block %}
 
 {% block container %}
-       {% import urllib.parse %}
-
-       <section class="hero is-dark">
+       <section class="hero is-dark is-medium">
                <div class="hero-body">
                        <div class="container">
-                               <nav class="breadcrumb" aria-label="breadcrumbs">
-                                       <ul>
-                                               <li>
-                                                       <a href="/dbl">
-                                                               {{ _("IPFire DBL") }}
-                                                       </a>
-                                               </li>
-
-                                               <li>
-                                                       <a href="/dbl/lists">
-                                                               {{ _("Lists") }}
-                                                       </a>
-                                               </li>
-
-                                               <li class="is-active">
-                                                       <a href="#" aria-current="page">{{ list }}</a>
-                                               </li>
-                                       </ul>
-                               </nav>
-
                                <h1 class="title">
                                        {{ list }}
                                </h1>
 
-                               <h6 class="subtitle">
-                                       <div class="tag is-info">
-                                               {{ list.license }}
-                                       </div>
-
-                                       {# Description #}
-                                       {% if list.description %}
+                               {# Description #}
+                               {% if list.description %}
+                                       <h6 class="subtitle">
                                                {{ list.description }}
-                                       {% end %}
-                               </h6>
+                                       </h6>
+                               {% end %}
                        </div>
                </div>
-       </section>
 
-       {# Information #}
-       <section class="section">
-               <div class="container">
-                       <div class="level">
-                               <div class="level-item has-text-centered">
+               <div class="hero-foot p-5">
+                       <div class="columns is-centered is-vcentered">
+                               {# Domains #}
+                               <div class="column is-one-third has-text-centered">
                                        <div>
-                                               <p class="heading">
-                                                       {{ _("Domains Listed") }}
-                                               </p>
-                                               <p class="title">
+                                               <p class="title is-3 mb-1">
                                                        {{ format_number(list.total_domains) }}
                                                </p>
+
+                                               <p class="heading">
+                                                       {{ _("Domains") }}
+                                               </p>
                                        </div>
                                </div>
 
-                               <div class="level-item has-text-centered">
+                               {# Last Updated #}
+                               <div class="column is-one-third has-text-centered">
                                        <div>
+                                               <p class="title is-3 mb-1">
+                                                       {{ locale.format_date(list.updated_at, shorter=True) }}
+                                               </p>
+
                                                <p class="heading">
                                                        {{ _("Last Updated") }}
                                                </p>
-                                               <p class="title">
-                                                       {{ locale.format_date(list.updated_at, shorter=True) }}
-                                               </p>
                                        </div>
                                </div>
+
+                               {# License #}
+                               {% if list.license %}
+                                       <div class="column is-one-third has-text-centered">
+                                               <div>
+                                                       <p class="title is-3 mb-1">
+                                                               {{ list.license }}
+                                                       </p>
+
+                                                       <p class="heading">
+                                                               {{ _("License") }}
+                                                       </p>
+                                               </div>
+                                       </div>
+                               {% end %}
                        </div>
+               </div>
+       </section>
 
+       {# Information #}
+       <section class="section">
+               <div class="container">
                        {# Navigation #}
                        <div class="buttons are-small is-centered">
                                <a class="button" href="/dbl/lists/{{ list.slug }}/reports">