From: Michael Tremer <michael.tremer@ipfire.org>
Date: Wed, 19 Oct 2022 03:27:57 +0000 (+0000)
Subject: web: Refactor the builds page
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=0746b56aad275fa2816119e937675da7922d0185;p=pbs.git

web: Refactor the builds page

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

diff --git a/src/templates/builds/show.html b/src/templates/builds/show.html
index afdc6d0b..c5d31c1a 100644
--- a/src/templates/builds/show.html
+++ b/src/templates/builds/show.html
@@ -1,25 +1,169 @@
 {% extends "../base.html" %}
 
-{% block title %}{{ _("Build") }}: {{ build }}{% end block %}
+{% block title %}{{ _("Build") }} - {{ build }}{% 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="/packages">{{ _("Packages") }}</a>
 			</li>
 			<li>
 				<a href="/packages/{{ build.pkg.name }}">{{ build.pkg.name }}</a>
 			</li>
-			<li>
-				<span class="show-for-sr">{{ _("Current") }}: </span> {{ build.pkg.evr }}
+			<li class="is-active">
+				<a href="#" aria-current="page">{{ build.pkg.evr }}</a>
 			</li>
 		</ul>
 	</nav>
 
+	<h1 class="title is-1">{{ build }}</h1>
+
+	{% if build.pkg.summary %}
+		<h6 class="subtitle is-6">
+			{{ build.pkg.summary }}
+		</h6>
+	{% end %}
+
+	<div class="columns">
+		<div class="column">
+			<div class="media">
+				{% if build.owner %}
+					<div class="media-left">
+						<p class="image is-64x64">
+							<img src="{{ build.owner.avatar(64) }}">
+						</p>
+					</div>
+
+					<div class="media-content">
+						<p>
+							<small>
+								<a href="/users/{{ build.owner }}">{{ build.owner }}</a>
+							</small>
+
+							<small>
+								{{ _("Created %s") % locale.format_date(build.created_at, shorter=True) }}
+							</small>
+						</p>
+
+						<div class="content">
+							{% module Text(build.message) %}
+						</div>
+					</div>
+				{% end %}
+			</div>
+
+			{# List any fixed bugs #}
+			{% if bugs %}
+				<h6 class="title is-6">
+					{{ _("Fixed Bugs") }}
+				</h6>
+
+				{% module BugsList(bugs) %}
+			{% end %}
+		</div>
+
+		<div class="column">
+			<div class="box">
+				{# Icon Bar #}
+				<nav class="level">
+					<div class="level-item">
+						<span class="icon">
+							{% if build.owner %}
+								<i class="fa-solid fa-flask" title="{{ _("Scratch Build") }}"></i>
+							{% else %}
+								<i class="fa-solid fa-truck" title="{{ _("Release Build") }}"></i>
+							{% end %}
+						</span>
+					</div>
+
+					<div class="level-item">
+						X
+					</div>
+
+					<div class="level-item">
+						X
+					</div>
+
+					{# XXX Add icons for critical path, security fixes,
+						broken/obsolete builds, scratch or other type of build #}
+				</nav>
+
+				{# Score #}
+				<nav class="level">
+					<div class="level-item has-text-centered">
+						<div>
+							<p class="heading">{{ _("Score") }}</p>
+							<p class="title">{{ build.score }}</p>
+						</div>
+					</div>
+				</nav>
+
+				<div class="buttons are-small">
+					{# Watch/Unwatch #}
+					{% if current_user in build.watchers %}
+						<form method="POST" action="/builds/{{ build.uuid }}/unwatch">
+							{% raw xsrf_form_html() %}
+
+							<button class="button is-primary is-outlined">
+								<span class="icon is-small">
+									<i class="fa-solid fa-eye"></i>
+								</span>
+
+								<span>
+									{{ _("Unwatch") }} ({{ len(build.watchers) }})
+								</span>
+							</button>
+						</form>
+					{% else %}
+						<form method="POST" action="/builds/{{ build.uuid }}/watch">
+							{% raw xsrf_form_html() %}
+
+							<button class="button is-primary">
+								<span class="icon is-small">
+									<i class="fa-regular fa-eye"></i>
+								</span>
+
+								<span>
+									{{ _("Watch") }} ({{ len(build.watchers) }})
+								</span>
+							</button>
+						</form>
+					{% end %}
+
+					{# More... #}
+					<div class="dropdown">
+						<div class="dropdown-trigger">
+							<button class="button" aria-haspopup="true" aria-controls="dropdown-more">
+								<span>{{ _("More") }}</span>
+
+								<span class="icon is-small">
+									<i class="fas fa-angle-down" aria-hidden="true"></i>
+								</span>
+							</button>
+						</div>
+						<div class="dropdown-menu" id="dropdown-more" role="menu">
+							<div class="dropdown-content">
+								<a class="dropdown-item" href="/packages/{{ build.pkg.uuid }}">
+									{{ _("Source Package") }}
+								</a>
+
+								{% if build.can_be_deleted(current_user) %}
+									<hr class="dropdown-divider"/>
+
+									<a class="dropdown-item" href="/builds/{{ build.uuid }}/delete">
+										{{ _("Delete Build") }}
+									</a>
+								{% end %}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	{# XXX THIS IS SOME LEGACY STUFF I DON'T KNOW WHERE TO PUT #}
 	<div class="callout large">
 		<div class="grid-x grid-padding-x">
 			<div class="cell large-8">
@@ -44,94 +188,10 @@
 						</ul>
 					</p>
 				{% end %}
-
-				{# List any fixed bugs #}
-				{% if bugs %}
-					<h6>{{ _("Fixed Bugs") }}</h6>
-
-					<ul>
-						{% for bug in bugs %}
-							<li>
-								<a href="{{ bug.url }}">
-									#{{ bug.id }} - {{ bug.summary }}
-								</a>
-							</li>
-						{% end %}
-					</ul>
-				{% end %}
-			</div>
-
-			<div class="cell large-4 text-center">
-				{# Icon Bar #}
-				<ul class="menu simple align-center">
-					{% if build.owner %}
-						<li>
-							<i class="fa-solid fa-flask" title="{{ _("Scratch Build") }}"></i>
-						</li>
-					{% else %}
-						<li>
-							<i class="fa-solid fa-truck" title="{{ _("Release Build") }}"></i>
-						</li>
-					{% end %}
-					<li>X</li>
-					<li>X</li>
-					{# XXX Add icons for critical path, security fixes,
-						broken/obsolete builds, scratch or other type of build #}
-				</ul>
-
-				{# Score #}
-				<h1>{{ build.score }}</h1>
-				<h5>{{ _("Score") }}</h5>
-
-				<ul class="menu simple align-center">
-					<li>
-						{% if current_user in build.watchers %}
-							<form method="POST" action="/builds/{{ build.uuid }}/unwatch">
-								{% raw xsrf_form_html() %}
-
-								<button class="tiny secondary button">
-									<i class="fa-solid fa-eye"></i> {{ _("Unwatch") }}
-									<span class="badge">{{ len(build.watchers) }}</span>
-								</button>
-							</form>
-						{% else %}
-							<form method="POST" action="/builds/{{ build.uuid }}/watch">
-								{% raw xsrf_form_html() %}
-
-								<button class="tiny primary button">
-									<i class="fa-regular fa-eye"></i> {{ _("Watch") }}
-									<span class="badge">{{ len(build.watchers) }}</span>
-								</button>
-							</form>
-						{% end %}
-					</li>
-
-					<li>
-						<ul class="dropdown menu" data-dropdown-menu>
-							<li>
-								<a href="#">{{ _("Actions") }}</a>
-
-								<ul class="menu">
-									{% if build.can_be_deleted(current_user) %}
-										<li>
-											<a href="/builds/{{ build.uuid }}/delete">
-												{{ _("Delete Build") }}
-											</a>
-										</li>
-									{% end %}
-								</ul>
-							</li>
-						</ul>
-					</li>
-				</ul>
 			</div>
 		</div>
 	</div>
 
-	<a class="expanded secondary button" href="/packages/{{ build.pkg.uuid }}">
-		{{ _("Source Package") }}
-	</a>
-
 	{% if build.jobs %}
 		{% module JobsList(build.jobs, show_arch_only=True, show_packages=True) %}
 	{% end %}