builders: Refactor listing with level

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

diff --git a/src/templates/builders/index.html b/src/templates/builders/index.html
index 5f4426f501dd656ae16a7d058517fdd313cf7648..afa45417c781b672c4659fccb1a68188bb813b7d 100644 (file)
--- a/src/templates/builders/index.html
+++ b/src/templates/builders/index.html
@@ -24,49 +24,63 @@
                        {% for builder in builders %}
                                <div class="block">
                                        <div class="box">
-                                               <h5 class="title is-5">
-                                                       <a href="/builders/{{ builder.name }}">
-                                                               {{ builder }}
-                                                       </a>
-
-                                                       {% if builder.is_online() %}
-                                                               <div class="tags has-addons is-pulled-right">
-                                                                       <span class="tag is-success">
-                                                                               {{ _("Online") }}
-                                                                       </span>
-
-                                                                       <span class="tag">
-                                                                               {{ builder.num_running_jobs() }}
-                                                                       </span>
+                                               <div class="level">
+                                                       <div class="level-left">
+                                                               <div class="level-item">
+                                                                       <div>
+                                                                               <h6 class="title is-6">
+                                                                                       <a href="/builders/{{ builder.name }}">
+                                                                                               {{ builder }}
+                                                                                       </a>
+                                                                               </h6>
+
+                                                                               <p class="has-text-grey">
+                                                                                       <small>
+                                                                                               {# System #}
+                                                                                               {% if builder.sys_name or builder.sys_vendor %}
+                                                                                                       {% if builder.sys_vendor %}
+                                                                                                               {{ builder.sys_vendor }}
+                                                                                                       {% endif %}
+
+                                                                                                       {% if builder.sys_vendor and builder.sys_name %}
+                                                                                                               &bull;
+                                                                                                       {% endif %}
+
+                                                                                                       {% if builder.sys_name %}
+                                                                                                               {{ builder.sys_name }}
+                                                                                                       {% endif %}
+
+                                                                                                       &bull;
+                                                                                               {% endif %}
+
+                                                                                               {# Processor #}
+                                                                                               {{ builder.cpu_model or _("Unknown Processor") }}
+                                                                                       </small>
+                                                                               </p>
+                                                                       </div>
                                                                </div>
-                                                       {% else %}
-                                                               <span class="tag is-dark is-pulled-right">
-                                                                       {{ _("Offline") }}
-                                                               </span>
-                                                       {% endif %}
-                                               </h5>
-
-                                               <h6 class="subtitle is-6">
-                                                       {# System #}
-                                                       {% if builder.sys_name or builder.sys_vendor %}
-                                                               {% if builder.sys_vendor %}
-                                                                       {{ builder.sys_vendor }}
-                                                               {% endif %}
-
-                                                               {% if builder.sys_vendor and builder.sys_name %}
-                                                                       &bull;
-                                                               {% endif %}
-
-                                                               {% if builder.sys_name %}
-                                                                       {{ builder.sys_name }}
-                                                               {% endif %}
-
-                                                               &bull;
-                                                       {% endif %}
-
-                                                       {# Processor #}
-                                                       {{ builder.cpu_model or _("Unknown Processor") }}
-                                               </h6>
+                                                       </div>
+
+                                                       <div class="level-right">
+                                                               <div class="level-item">
+                                                                       {% if builder.is_online() %}
+                                                                               <div class="tags has-addons">
+                                                                                       <span class="tag is-success">
+                                                                                               {{ _("Online") }}
+                                                                                       </span>
+
+                                                                                       <span class="tag">
+                                                                                               {{ builder.num_running_jobs() }}
+                                                                                       </span>
+                                                                               </div>
+                                                                       {% else %}
+                                                                               <span class="tag is-dark">
+                                                                                       {{ _("Offline") }}
+                                                                               </span>
+                                                                       {% endif %}
+                                                               </div>
+                                                       </div>
+                                               </div>
                                        </div>
                                </div>
                        {% endfor %}