web: Refactor builds listings

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

diff --git a/src/templates/builds/index.html b/src/templates/builds/index.html
index 85720b1be79c0879c8c3b87a9494e4f58d62e297..44ab693360b208e71caf458bab7feecb88778b71 100644 (file)
--- a/src/templates/builds/index.html
+++ b/src/templates/builds/index.html
@@ -3,18 +3,17 @@
 {% block title %}{{ _("Builds") }}{% 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> {{ _("Builds") }}
+       <nav class="breadcrumb" aria-label="breadcrumbs">
+               <ul>
+                       <li class="is-active">
+                               <a href="#" aria-current="page">
+                                       {{ _("Builds") }}
+                               </a>
                        </li>
                </ul>
        </nav>
 
-       <h1>{{ _("Builds") }}</h1>
+       <h1 class="title">{{ _("Recent Builds") }}</h1>
 
        {# Render all builds #}
        {% module BuildsList(builds) %}

diff --git a/src/templates/builds/modules/list.html b/src/templates/builds/modules/list.html
index b2ebd7eedcfbd7d8a827d2a914a3c543bd0a3dc5..54d9a678f6ff43a08d6660bdbf4cd7155687c651 100644 (file)
--- a/src/templates/builds/modules/list.html
+++ b/src/templates/builds/modules/list.html
@@ -1,43 +1,46 @@
 {% for build in builds %}
        {% set package = build.pkg %}
 
-       <div class="callout">
-               <h5>
-                       <a href="/builds/{{ build.uuid }}">{{ build }}</a>
-
-                       {% if package.summary %}
-                               <small>{{ package.summary }}</small>
-                       {% end %}
-               </h5>
+       <div class="block">
+               <div class="card">
+                       <div class="card-content">
+                               <h5 class="title is-5">
+                                       <a href="/builds/{{ build.uuid }}">{{ build }}</a>
+                               </h5>
+                               {% if package.summary %}
+                                       <h6 class="subtitle is-6">{{ package.summary }}</h6>
+                               {% end %}
 
-               {% if build.jobs %}
-                       <p>
-                               {% for job in build.jobs %}
-                                       <span class="label
-                                               {% if job.has_failed() %}
-                                                       danger
-                                               {% elif job.is_running() %}
-                                                       primary
-                                               {% elif job.has_finished() %}
-                                                       success
-                                               {% else %}
-                                                       secondary
-                                               {% end %}">{{ job.arch }}</span>
+                               {% if build.jobs %}
+                                       <div class="tags">
+                                               {% for job in build.jobs %}
+                                                       <span class="tag
+                                                               {% if job.has_failed() %}
+                                                                       is-danger
+                                                               {% elif job.is_running() %}
+                                                                       is-primary
+                                                               {% elif job.has_finished() %}
+                                                                       is-success
+                                                               {% else %}
+                                                                       is-light
+                                                               {% end %}">{{ job.arch }}</span>
+                                               {% end %}
+                                       </div>
                                {% end %}
-                       </p>
-               {% end %}
 
-               <small>
-                       {% if build.owner %}
-                               {{ _("Created %(when)s by %(author)s") % {
-                                       "when" : locale.format_date(build.created_at, shorter=True),
-                                       "author" : build.owner,
-                                       } }}
-                       {% else %}
-                               {{ _("Created %s") % locale.format_date(build.created_at, shorter=True) }}
-                       {% end %}
-               </small>
+                               <small>
+                                       {% if build.owner %}
+                                               {{ _("Created %(when)s by %(author)s") % {
+                                                       "when" : locale.format_date(build.created_at, shorter=True),
+                                                       "author" : build.owner,
+                                                       } }}
+                                       {% else %}
+                                               {{ _("Created %s") % locale.format_date(build.created_at, shorter=True) }}
+                                       {% end %}
+                               </small>
 
-               {# XXX show repository #}
+                               {# XXX show repository #}
+                       </div>
+               </div>
        </div>
 {% end %}