From: Michael Tremer <michael.tremer@ipfire.org>
Date: Wed, 19 Oct 2022 04:11:11 +0000 (+0000)
Subject: web: Refactor builders index page
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b90f6da081c57bcf8af53aa89f02a33494c7916f;p=pbs.git

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 768bc92a..84c707aa 100644
--- 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 %}