From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 12 May 2023 23:03:15 +0000 (+0000)
Subject: distros: Improve design
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=8f11bd59f77a3ed540ee141e70f86cd5b024b9f5;p=pbs.git

distros: Improve design

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

diff --git a/src/templates/distros/index.html b/src/templates/distros/index.html
index 7b1e51e9..e0e7147b 100644
--- a/src/templates/distros/index.html
+++ b/src/templates/distros/index.html
@@ -3,19 +3,27 @@
 {% block title %}{{ _("Distributions") }}{% end block %}
 
 {% block body %}
+	<section class="hero is-light">
+		<div class="hero-body">
+			<div class="container">
+				<nav class="breadcrumb" aria-label="breadcrumbs">
+					<ul>
+						<li class="is-active">
+							<a href="#" aria-current="page">
+								{{ _("Distributions") }}
+							</a>
+						</li>
+					</ul>
+				</nav>
+
+				<h1 class="title">{{ _("Distributions") }}</h1>
+			</div>
+		</div>
+	</section>
+
 	<section class="section">
 		<div class="container">
-			<nav class="breadcrumb" aria-label="breadcrumbs">
-				<ul>
-					<li class="is-active">
-						<a href="#" aria-current="page">
-							{{ _("Distributions") }}
-						</a>
-					</li>
-				</ul>
-			</nav>
-
-			<h1 class="title">{{ _("Distributions") }}</h1>
+			{% module DistrosList(distros) %}
 
 			{% if current_user and current_user.is_admin() %}
 				<div class="block">
@@ -24,8 +32,6 @@
 					</a>
 				</div>
 			{% end %}
-
-			{% module DistrosList(distros) %}
 		</div>
 	</section>
 {% end block %}
diff --git a/src/templates/distros/modules/list.html b/src/templates/distros/modules/list.html
index 4ea3881b..5dfb8b75 100644
--- a/src/templates/distros/modules/list.html
+++ b/src/templates/distros/modules/list.html
@@ -1,9 +1,14 @@
-{% for distro in distros %}
-	<div class="block">
-		<div class="box">
-			<h5 class="title is-5">
-				<a href="/distros/{{ distro.slug }}">{{ distro }}</a>
-			</h5>
-		</div>
-	</div>
-{% end %}
+<div class="block">
+	<nav class="panel">
+		{% for distro in distros %}
+			<a class="panel-block is-block p-4" href="/distros/{{ distro.slug }}">
+				<h5 class="title is-5">
+					{{ distro }}
+				</h5>
+				{% if distro.codename %}
+					<h6 class="subtitle is-6">{{ distro.codename }}</h6>
+				{% end %}
+			</a>
+		{% end %}
+	</nav>
+</div>
diff --git a/src/templates/distros/show.html b/src/templates/distros/show.html
index 169db31e..220690f5 100644
--- a/src/templates/distros/show.html
+++ b/src/templates/distros/show.html
@@ -3,57 +3,63 @@
 {% block title %}{{ _("Distributions") }} - {{ distro }}{% end block %}
 
 {% block body %}
-	<section class="section">
-		<div class="container">
-			<nav class="breadcrumb" aria-label="breadcrumbs">
-				<ul>
-					<li>
-						<a href="/distros">{{ _("Distributions") }}</a>
-					</li>
-					<li class="is-active">
-						<a href="#" aria-current="page">{{ distro }}</a>
-					</li>
-				</ul>
-			</nav>
+	<section class="hero is-light">
+		<div class="hero-body">
+			<div class="container">
+				<nav class="breadcrumb" aria-label="breadcrumbs">
+					<ul>
+						<li>
+							<a href="/distros">{{ _("Distributions") }}</a>
+						</li>
+						<li class="is-active">
+							<a href="#" aria-current="page">{{ distro }}</a>
+						</li>
+					</ul>
+				</nav>
 
-			<h1 class="title is-1">{{ distro }}</h1>
+				<h1 class="title is-1">
+					{{ distro }} {% if distro.codename %}&dash; {{ distro.codename }}{% end %}
+				</h1>
 
-			{% if distro.slogan %}
-				<h4 class="subtitle is-4">{{ distro.slogan }}</h4>
-			{% end %}
+				{% if distro.slogan %}
+					<h4 class="subtitle is-4">{{ distro.slogan }}</h4>
+				{% end %}
 
-			{% if distro.description %}
-				<div class="block">
-					<div class="box">
+				{% if distro.description %}
+					<div class="block is-size-5 p-5">
 						{% module Text(distro.description) %}
+					</div>
 
+					<div class="block">
 						<nav class="level">
-							<div class="level-left">
-								<div class="level-item has-text-centered">
-									<div>
-										<p class="heading">{{ _("Supported Architectures") }}</p>
-										<p>
-											<span class="tags">
-												{% for arch in distro.arches %}
-													<span class="tag is-dark">{{ arch }}</span>
-												{% end %}
-											</span>
-										</p>
-									</div>
+							<div class="level-item has-text-centered">
+								<div>
+									<p class="heading">{{ _("Supported Architectures") }}</p>
+									<p>
+										<span class="tags is-justify-content-center">
+											{% for arch in distro.arches %}
+												<span class="tag is-dark">{{ arch }}</span>
+											{% end %}
+										</span>
+									</p>
 								</div>
 							</div>
 						</nav>
-
-						<div class="buttons are-small">
-							{% if distro.has_perm(current_user) %}
-								<a class="button is-warning" href="/distros/{{ distro.slug }}/edit">
-									{{ _("Edit") }}
-								</a>
-							{% end %}
-						</div>
 					</div>
-				</div>
-			{% end %}
+				{% end %}
+			</div>
+		</div>
+	</section>
+
+	<section class="section">
+		<div class="container">
+			<div class="buttons">
+				{% if distro.has_perm(current_user) %}
+					<a class="button is-warning" href="/distros/{{ distro.slug }}/edit">
+						{{ _("Edit") }}
+					</a>
+				{% end %}
+			</div>
 		</div>
 	</section>
 
diff --git a/src/templates/repos/modules/list.html b/src/templates/repos/modules/list.html
index 3ce2f2ca..556eb91f 100644
--- a/src/templates/repos/modules/list.html
+++ b/src/templates/repos/modules/list.html
@@ -27,6 +27,10 @@
 					<span class="has-text-grey">
 						{{ _("Added %s") % locale.format_date(t, shorter=True) }}
 					</span>
+				{% else %}
+					<span class="tag">
+						{{ _("One Build", "%(num)s Builds", repo.total_builds) % { "num" : repo.total_builds } }}
+					</span>
 				{% end %}
 			</a>
 		{% end %}