web: Refactor builder detail page

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

diff --git a/src/templates/builders/detail.html b/src/templates/builders/detail.html
index ac4f70ff3d7350d738d88d6b7efd60e7742f04ea..3cd393e50c552d79a191e66b240ace08e8071cb0 100644 (file)
--- a/src/templates/builders/detail.html
+++ b/src/templates/builders/detail.html
@@ -1,102 +1,109 @@
 {% extends "../base.html" %}
 
-{% block title %}{{ _("Builder") }}: {{ builder.name }}{% end block %}
+{% block title %}{{ _("Builders") }} - {{ builder.name }}{% 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="/builders">{{ _("Builders") }}</a>
                        </li>
-                       <li>
-                               <span class="show-for-sr">{{ _("Current") }}: </span> {{ builder }}
+                       <li class="is-active">
+                               <a href="#" aria-current="page">{{ builder }}</a>
                        </li>
                </ul>
        </nav>
 
-       <h1 class="text-center">{{ builder }}</h1>
+       <h1 class="title is-1">
+               {{ builder }}
 
-       <div class="large callout">
-               <div class="grid-x grid-padding-x align-middle">
-                       <div class="cell large-8">
-                               {% if builder.cpu_model %}
-                                       <p>
-                                               {{ builder.cpu_model }}
-                                               {% if builder.cpu_count > 1 %}
-                                                       &times; {{ builder.cpu_count }}
-                                               {% end %}
-                                       </p>
-                               {% end %}
+               {% if builder.testmode %}
+                       <span class="tag is-warning">{{ _("Test Mode") }}</span>
+               {% end %}
+       </h1>
 
-                               {% if builder.pakfire_version %}
-                                       <p>
-                                               {{ _("Pakfire %s") % builder.pakfire_version }}
-                                       </p>
-                               {% end %}
+       {% if builder.has_perm(current_user) %}
+               <div class="block">
+                       <a class="button is-warning is-small" href="/builders/{{ builder.hostname }}/edit">
+                               {{ _("Edit Builder") }}
+                       </a>
+               </div>
+       {% end %}
 
-                               {% if builder.os_name %}
-                                       <p>
-                                               {{ builder.os_name }}
-                                       </p>
-                               {% end %}
+       <div class="block">
+               <div class="box">
+                       <div class="columns">
+                               <div class="column is-8">
+                                       {# XXX THIS IS ALL BORING AND UGLY BUT NOT TOO IMPORTANT RIGHT NOW #}
 
-                               <p>
-                                       {{ _("Supported Architectures: %s") % locale.list(builder.supported_arches) }}
-                               </p>
+                                       {% if builder.cpu_model %}
+                                               <p>
+                                                       {{ builder.cpu_model or _("Unknown CPU Model") }}
+                                                       {% if builder.cpu_count > 1 %}
+                                                               &times; {{ builder.cpu_count }}
+                                                       {% end %}
+                                               </p>
+                                       {% end %}
 
-                               {% if builder.total_build_time %}
-                                       <p>
-                                               {{ _("Total Build Time: %s") % format_time(builder.total_build_time) }}
-                                       </p>
-                               {% end %}
+                                       {% if builder.pakfire_version %}
+                                               <p>
+                                                       {{ _("Pakfire %s") % builder.pakfire_version }}
+                                               </p>
+                                       {% end %}
+
+                                       {% if builder.os_name %}
+                                               <p>
+                                                       {{ builder.os_name }}
+                                               </p>
+                                       {% end %}
 
-                               {% if builder.stats %}
                                        <p>
-                                               {{ _("%s Memory") % format_size(builder.stats.mem_total) }}
+                                               {{ _("Supported Architectures: %s") % locale.list(builder.supported_arches) }}
                                        </p>
 
-                                       {% if builder.stats.swap_total %}
+                                       {% if builder.total_build_time %}
                                                <p>
-                                                       {{ _("%s Swap Space") % format_size(builder.stats.swap_total) }}
+                                                       {{ _("Total Build Time: %s") % format_time(builder.total_build_time) }}
                                                </p>
                                        {% end %}
-                               {% end %}
 
-                               {% if builder.testmode %}
-                                       <p>
-                                               <span class="label">{{ _("Test Mode") }}</span>
-                                       </p>
-                               {% end %}
+                                       {% if builder.stats %}
+                                               <p>
+                                                       {{ _("%s Memory") % format_size(builder.stats.mem_total) }}
+                                               </p>
 
-                               {% if builder.description %}
-                                       {% module Text(builder.description) %}
-                               {% end %}
-                       </div>
+                                               {% if builder.stats.swap_total %}
+                                                       <p>
+                                                               {{ _("%s Swap Space") % format_size(builder.stats.swap_total) }}
+                                                       </p>
+                                               {% end %}
+                                       {% end %}
 
-                       <div class="cell large-4 text-center">
-                               <h1>
-                                       {{ len(builder.jobs) }}
-                                       <small>/ {{ builder.max_jobs }}</small>
-                               </h1>
-                               <h5>{{ _("Jobs") }}</h5>
+                                       {% if builder.description %}
+                                               <div class="content">
+                                                       {% module Text(builder.description) %}
+                                               </div>
+                                       {% end %}
+                               </div>
+
+                               <div class="column is-4">
+                                       <h1>
+                                               {{ len(builder.jobs) }}
+                                               <small>/ {{ builder.max_jobs }}</small>
+                                       </h1>
+                                       <h5>{{ _("Jobs") }}</h5>
+                               </div>
                        </div>
                </div>
        </div>
 
-       {% if builder.has_perm(current_user) %}
-               <a class="warning button expanded" href="/builders/{{ builder.hostname }}/edit">
-                       {{ _("Edit") }}
-               </a>
-       {% end %}
-
        <!-- XXX add some realtime graph -->
 
        {% if builder.jobs %}
-               <h5>{{ _("Running Jobs") }}</h5>
+               <div class="block">
+                       <h5 class="subtitle is-5">{{ _("Running Jobs") }}</h5>
 
-               {% module JobsList(builder.jobs) %}
+                       {% module JobsList(builder.jobs) %}
+               </div>
        {% end %}
 {% end block %}