From: Michael Tremer <michael.tremer@ipfire.org>
Date: Sun, 23 Oct 2022 12:45:59 +0000 (+0000)
Subject: web: Refactor distro detail page
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=89276907b4233358adc76a51785d643bfb8d8f86;p=pbs.git

web: Refactor distro detail page

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

diff --git a/src/templates/distros/show.html b/src/templates/distros/show.html
index a717c6be..752a2e17 100644
--- a/src/templates/distros/show.html
+++ b/src/templates/distros/show.html
@@ -1,50 +1,55 @@
 {% extends "../base.html" %}
 
-{% block title %}{{ _("Distribution") }} - {{ distro }}{% end block %}
+{% block title %}{{ _("Distributions") }} - {{ distro }}{% 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="/distros">{{ _("Distributions") }}</a>
 			</li>
-			<li>
-				<span class="show-for-sr">{{ _("Current") }}: </span> {{ distro }}
+			<li class="is-active">
+				<a href="#" aria-current="page">{{ distro }}</a>
 			</li>
 		</ul>
 	</nav>
 
-	<h1>
-		{{ distro }}
-
-		{% if distro.slogan %}
-			<small>{{ distro.slogan }}</small>
-		{% end %}
-	</h1>
+	<h1 class="title is-1">{{ distro }}</h1>
+	{% if distro.slogan %}
+		<h4 class="subtitle is-4">{{ distro.slogan }}</h4>
+	{% end %}
 
 	{% if distro.description %}
-		<div class="callout">
-			{% module Text(distro.description) %}
+		<div class="block">
+			<div class="box">
+				<div class="content">
+					{% module Text(distro.description) %}
+				</div>
+
+				<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>
+					</div>
+				</nav>
+			</div>
 		</div>
 	{% end %}
 
-	{% if distro.arches %}
-		<p>
-			{{ _("Supported Architectures") }}
-
-			{% for arch in distro.arches %}
-				<span class="label">{{ arch }}</span>
-			{% end %}
-		</p>
-	{% end %}
-
 	{# Repositories #}
 
 	{% if distro.repos %}
-		<h4>{{ _("Repositories") }}</h4>
+		<h4 class="title is-4">{{ _("Repositories") }}</h4>
 
 		{% module ReposList(distro.repos) %}
 	{% end %}