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

web: Refactor builder edit page

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

diff --git a/src/templates/builders/edit.html b/src/templates/builders/edit.html
index e20a97ce..0935de7d 100644
--- a/src/templates/builders/edit.html
+++ b/src/templates/builders/edit.html
@@ -3,71 +3,92 @@
 {% block title %}{{ _("Edit Builder %s") % builder }}{% 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>
 				<a href="/builders/{{ builder.hostname }}">{{ builder }}</a>
 			</li>
-			<li>
-				<span class="show-for-sr">{{ _("Current") }}: </span> {{ _("Edit") }}
+			<li class="is-active">
+				<a href="#" aria-current="page">{{ _("Edit") }}</a>
 			</li>
 		</ul>
 	</nav>
 
-	<div class="grid-x grid-padding-x">
-		<div class="cell large-6 float-center">
+	<div class="columns is-centered">
+		<div class="column is-narrow">
 			<form method="POST" action="">
-				<div class="callout">
+				<div class="box">
 					{% raw xsrf_form_html() %}
 
 					{# Hostname #}
-					<label>
-						{{ _("Hostname") }}
-						<input type="text" name="hostname" value="{{ builder.hostname }}"
-							aria-describedby="hostname-help" disabled>
-					</label>
-					<p class="help-text" id="hostname-help">
-						{{ _("The hostname cannot be changed") }}
-					</p>
+					<div class="field">
+						<label class="label">{{ _("Hostname") }}</label>
+						<div class="control">
+							<input class="input" type="text"
+								name="hostname" value="{{ builder.hostname }}" disabled>
+						</div>
+						<p class="help">
+							{{ _("The hostname cannot be changed") }}
+						</p>
+					</div>
 
 					{# Status #}
-					<input type="checkbox" name="enabled" id="enabled"
-						{% if builder.enabled %}checked{% end %}>
-					<label for="enabled">{{ _("Enabled") }}</label>
+					<div class="field">
+						<div class="control">
+							<label class="checkbox">
+								<input type="checkbox" name="enabled"
+									{% if builder.enabled %}checked{% end %}>
+								{{ _("Enabled") }}
+							</label>
+						</div>
+					</div>
 
 					<fieldset>
 						<legend>{{ _("Job Settings") }}</legend>
 
 						{# Build Jobs #}
-						<label>
-							{{ _("Maximum Parallel Build Jobs") }}
-							<input type="number" name="max_jobs" value="{{ builder.max_jobs }}"
-								min="1" {% if builder.cpu_count %}max="{{ builder.cpu_count * 4 }}"{% end %}
-								required>
-						</label>
+						<div class="field">
+							<label class="label">{{ _("Maximum Parallel Build Jobs") }}</label>
+							<div class="control">
+								<input class="input" type="number"
+									name="max_jobs" value="{{ builder.max_jobs }}"
+									min="1" {% if builder.cpu_count %}max="{{ builder.cpu_count * 4 }}"{% end %}
+									required>
+							</div>
+						</div>
 
 						{# Test Mode #}
-						<input type="checkbox" name="testmode" id="testmode"
-							{% if builder.testmode %}checked{% end %}
-							aria-describedby="testmode-help">
-						<label for="testmode">{{ _("Enable Test Mode") }}</label>
-						<p class="help-text" id="testmode-help">
-							{{ _("Only build test jobs on this builder") }}
-						</p>
+						<div class="field">
+							<div class="control">
+								<label class="checkbox">
+									<input type="checkbox" name="testmode"
+										{% if builder.testmode %}checked{% end %}>
+									{{ _("Enable Test Mode") }}
+								</label>
+							</div>
+							<p class="help">
+								{{ _("Only build test jobs on this builder") }}
+							</p>
+						</div>
 					</fieldset>
 				</div>
 
-				<button class="success button expanded" type="submit">{{ _("Save") }}</button>
+				<div class="field is-grouped">
+					<div class="control">
+						<button class="button is-success is-link" type="submit">
+							{{ _("Save") }}
+						</button>
+					</div>
 
-				<a class="small danger button expanded" href="/builders/{{ builder.hostname }}/delete">
-					{{ _("Delete") }}
-				</a>
+					<div class="control">
+						<a class="button is-danger is-outlined is-link" href="/builders/{{ builder.hostname }}/delete">
+							{{ _("Delete") }}
+						</a>
+					</div>
+				</div>
 			</form>
 		</div>
 	</div>