From fcfabe5fa1fd27a8e3c2027536e41f185ca01758 Mon Sep 17 00:00:00 2001
From: Rico Hoppe <rico.hoppe@ipfire.org>
Date: Sat, 21 Oct 2023 16:27:46 +0000
Subject: [PATCH] fireinfo/releases: restyled the page

---
 src/templates/fireinfo/releases.html | 62 ++++++++++++++++++----------
 1 file changed, 41 insertions(+), 21 deletions(-)

diff --git a/src/templates/fireinfo/releases.html b/src/templates/fireinfo/releases.html
index 9ff05746..243878af 100644
--- a/src/templates/fireinfo/releases.html
+++ b/src/templates/fireinfo/releases.html
@@ -3,37 +3,57 @@
 {% block title %}{{ _("Releases") }}{% end block %}
 
 {% block container %}
-	<section>
-		<div class="container">
-			<div class="row">
-				<div class="col-12">
-					<h1>{{ _("Releases") }}</h1>
-				</div>
+	<section class="hero is-primary">
+		<div class="hero-body">
+			<div class="container">
+				<nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+					<ul>
+						<li>
+							<a href="https://ipfire.org/">
+								Home
+							</a>
+						</li>
+						<li>
+							<a href="/">
+								{{ _("Fireinfo") }}
+							</a>
+						</li>
+						<li class="is-active">
+							<a href="#">
+								{{ _("Releases") }}
+							</a>
+						</li>
+					</ul>
+				</nav>
+
+				<h1 class="title is-1">{{ _("Releases") }}</h1>
 			</div>
 		</div>
 	</section>
 
-	<div class="container">
-		<dl class="row">
+	<section class="section">
+		<div class="container">
 			{% for name, percentage in releases %}
-				<dt class="col-sm-5">{{ name.replace("core", "Core Update ") }}</dt>
+				<div class="columns">
+					<div class="column is-4">{{ name.replace("core", "Core Update ") }}</div>
 
-				<dd class="col-sm-7">
-					{% module ProgressBar(percentage, "primary") %}
-				</dd>
+					<div class="column">
+						{% module ProgressBar(percentage, "primary") %}
+					</div>
+				</div>
 			{% end %}
-		</dl>
 
-		<h2>{{ _("Kernels") }}</h2>
+			<h2 class="title is-2">{{ _("Kernels") }}</h2>
 
-		<dl class="row">
 			{% for name, percentage in kernels %}
-				<dt class="col-sm-5">{{ name }}</dt>
+				<div class="columns">
+					<div class="column is-4">{{ name }}</div>
 
-				<dd class="col-sm-7">
-					{% module ProgressBar(percentage, "info") %}
-				</dd>
+					<div class="column">
+						{% module ProgressBar(percentage, "info") %}
+					</div>
+				</div>
 			{% end %}
-		</dl>
-	</div>
+		</div>
+	</section>
 {% end block %}
-- 
2.47.3