From: Michael Tremer <michael.tremer@ipfire.org>
Date: Wed, 19 Oct 2022 04:19:52 +0000 (+0000)
Subject: web: Refactor builder detail page
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=fbf83bce93a987800d1f9a15c431004d9db2bc5f;p=pbs.git

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 ac4f70ff..3cd393e5 100644
--- 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 %}