web: Refactor builders index page

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

diff --git a/src/templates/builders/list.html b/src/templates/builders/list.html
index 768bc92aa76edd0767c0287f5030e625b962bafa..84c707aaed7fbe7dc6de2cf6f4d75002fc5eaf23 100644 (file)
--- a/src/templates/builders/list.html
+++ b/src/templates/builders/list.html
@@ -3,69 +3,63 @@
 {% block title %}{{ _("Builders") }}{% end block %}
 
 {% block container %}
-       <nav aria-label="{{ _("You are here:") }}" role="navigation">
-               <ul class="breadcrumbs">
-                       <li>
-                               <a href="/">{{ _("Home") }}</a>
-                       </li>
-                       <li>
-                               <span class="show-for-sr">{{ _("Current") }}: </span> {{ _("Builders") }}
+       <nav class="breadcrumb" aria-label="breadcrumbs">
+               <ul>
+                       <li class="is-active">
+                               <a href="#" aria-current="page">{{ _("Builders") }}</a>
                        </li>
                </ul>
        </nav>
 
-       <h1 class="text-center">{{ _("Builders") }}</h1>
-
-       {% for builder in builders %}
-               <div class="callout">
-                       <h5>
-                               <a href="/builders/{{ builder.hostname }}">{{ builder }}</a>
-                       </h5>
+       <h1 class="title is-1">{{ _("Builders") }}</h1>
 
-                       {% if builder.is_online() %}
-                               <span class="label success">{{ _("Online") }}</span>
-                       {% else %}
-                               <span class="label alert">{{ _("Offline") }}</span>
-                       {% end %}
-
-                       <!-- XXX put a bar here --->
+       {% if current_user and current_user.is_admin() %}
+               <div class="block">
+                       <a class="button is-success is-small" href="/builders/new">
+                               {{ _("Create A New Builder") }}
+                       </a>
                </div>
        {% end %}
 
-       {% if current_user and current_user.is_admin() %}
-               <a class="success button" href="/builders/new">
-                       {{ _("Create A New Builder") }}
-               </a>
-       {% end %}
+       {% for builder in builders %}
+               <div class="block">
+                       <div class="box">
+                               <h5 class="subtitle is-5">
+                                       <a href="/builders/{{ builder.hostname }}">{{ builder }}</a>
 
-       <div class="callout">
-               <h5>{{ _("Statistics") }}</h5>
+                                       {% if builder.is_online() %}
+                                               <span class="tag is-success is-pulled-right">{{ _("Online") }}</span>
+                                       {% else %}
+                                               <span class="tag is-dark is-pulled-right">{{ _("Offline") }}</span>
+                                       {% end %}
+                               </h5>
+                       </div>
+               </div>
+       {% end %}
 
-               <div class="grid-x grid-padding-x">
-                       <div class="cell large-8">
-                               <p>{{ _("Total Build Time") }}</p>
+       {# Statistics #}
 
-                               <div class="stat">
-                                       {{ format_time(backend.builders.total_build_time) }}
-                               </div>
+       <nav class="level">
+               <div class="level-item has-text-centered">
+                       <div>
+                               <p class="heading">{{ _("Total Build Time") }}</p>
+                               <p class="title">{{ format_time(backend.builders.total_build_time) }}</p>
                        </div>
+               </div>
+       </nav>
 
-                       {% set arches = backend.builders.total_build_time_by_arch %}
+       <h6 class="subtitle is-6">{{ _("Total Build Time By Architecture") }}</h6>
 
-                       <div class="cell large-4">
-                               <p>{{ _("Total Build Time By Architecture") }}</p>
+       {% set arches = backend.builders.total_build_time_by_arch %}
 
-                               <table>
-                                       <tbody>
-                                               {% for arch in arches %}
-                                                       <tr>
-                                                               <th scope="row">{{ arch }}</th>
-                                                               <td>{{ arches[arch] }}</td>
-                                                       </tr>
-                                               {% end %}
-                                       </tbody>
-                               </table>
+       <nav class="level">
+               {% for arch in arches %}
+                       <div class="level-item has-text-centered">
+                               <div>
+                                       <p class="heading">{{ arch }}</p>
+                                       <p class="title">{{ format_time(arches[arch]) }}</p>
+                               </div>
                        </div>
-               </div>
-       </div>
+               {% end %}
+       </nav>
 {% end block %}