From: Michael Tremer <michael.tremer@ipfire.org>
Date: Wed, 19 Oct 2022 16:27:48 +0000 (+0000)
Subject: web: Refactor the package detail page
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=802b2436735a018fcf1f679cdb4ee3b9d2fb3a67;p=pbs.git

web: Refactor the package detail page

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

diff --git a/src/templates/packages/modules/info.html b/src/templates/packages/modules/info.html
index f7de79c7..14bead09 100644
--- a/src/templates/packages/modules/info.html
+++ b/src/templates/packages/modules/info.html
@@ -8,39 +8,68 @@
 	</h1>
 
 	{% if package.summary %}
-		<h6 class="subtitle is-6">
+		<h4 class="subtitle is-4">
 			{{ package.summary }}
-		</h6>
+		</h4>
 	{% end %}
 
-	<div class="content">
-		{% module Text(package.description) %}
-	</div>
+	<div class="card">
+		<div class="card-content">
+			<nav class="level">
+				{# Website #}
+				{% if package.url %}
+					<div class="level-item has-text-centered">
+						<div>
+							<p class="heading">{{ _("Website") }}</p>
+							<p>
+								<a href="{{ package.url }}">
+									{{ extract_hostname(package.url) }}
+								</a>
+							</p>
+						</div>
+					</div>
+				{% end %}
 
-	{# XXX what to do with this? #}
-	<ul>
-		{% if package.url %}
-			<li>
-				<a href="{{ package.url }}">{{ extract_hostname(package.url) }}</a>
-			</li>
-		{% end %}
+				{# License #}
+				{% if package.license %}
+					<div class="level-item has-text-centered">
+						<div>
+							<p class="heading">{{ _("License") }}</p>
+							<p>{{ package.license }}</p>
+						</div>
+					</div>
+				{% end %}
 
-		{% if package.license %}
-			<li>
-				{{ package.license }}
-			</li>
-		{% end %}
+				{# Groups #}
+				{% if package.groups %}
+					<div class="level-item has-text-centered">
+						<div>
+							<p class="heading">{{ _("Groups") }}</p>
+							<div class="tags">
+								{% for group in package.groups %}
+									<span class="tag">{{ group }}</span>
+								{% end %}
+							</div>
+						</div>
+					</div>
+				{% end %}
 
-		{% if package.groups %}
-			<li>
-				{{ locale.list(package.groups) }}
-			</li>
-		{% end %}
+				{# Maintainer #}
+				{% if package.maintainer %}
+					<div class="level-item has-text-centered">
+						<div>
+							<p class="heading">{{ _("Maintainer") }}</p>
+							<p>
+								{% module LinkToUser(package.maintainer) %}
+							</p>
+						</div>
+					</div>
+				{% end %}
+			</nav>
 
-		{% if package.maintainer %}
-			<li>
-				{% module LinkToUser(package.maintainer) %}
-			</li>
-		{% end %}
-	</ul>
+			<div class="content">
+				{% module Text(package.description) %}
+			</div>
+		</div>
+	</div>
 </div>
diff --git a/src/templates/packages/name.html b/src/templates/packages/name.html
index 2c26ad8a..ee62462f 100644
--- a/src/templates/packages/name.html
+++ b/src/templates/packages/name.html
@@ -18,40 +18,35 @@
 
 	{% for distro in backend.distros %}
 		<div class="block">
-			<div class="card">
-				<div class="card-content">
-					<h5 class="title is-5">{{ distro }}</h5>
-				</div>
+			<h4 class="title is-4">{{ distro }}</h4>
 
-				{% for repo in distro.repositories %}
-					{% set builds = repo.get_builds_by_name(package.name) %}
+			{% for repo in distro.repositories %}
+				{% set builds = repo.get_builds_by_name(package.name) %}
 
-					{% if builds %}
-						<div class="card-content">
-							<h6 class="subtitle is-6">{{ repo }}</h6>
+				{% if builds %}
+					<h5 class="subtitle is-5">{{ repo }}</h5>
 
-							<p>
-								<ul>
-									{% for build in builds %}
-										<li>
-											<a href="/builds/{{ build.uuid }}">
-												{{ build }}
-											</a>
-										</li>
-									{% end %}
-								</ul>
-							</p>
-						</div>
-					{% end %}
+					<div class="columns">
+						{% for build in builds %}
+							<div class="column is-2">
+								<a href="/builds/{{ build.uuid }}">
+									{{ build }}
+								</a>
+
+								{# XXX We would need to add some more information here #}
+								{# e.g. is this build finished/obsolete? #}
+							</div>
+						{% end %}
+					</div>
 				{% end %}
-			</div>
+			{% end %}
 		</div>
 	{% end %}
 
 	{% if bugs %}
-		<h4 class="title is-4">{{ _("Open Bugs In This Package") }}</h4>
-
 		<div class="block">
+			<h4 class="title is-4">{{ _("Open Bugs") }}</h4>
+
 			{% module BugsList(bugs) %}
 		</div>