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 e20a97ce65ab60b2a9d4b6451d80b10ec1482e90..0935de7d0d4d1dda3ef22a6f3eed1220b1c7c84a 100644 (file)
--- 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>