From: Michael Tremer <michael.tremer@ipfire.org>
Date: Wed, 4 Mar 2026 19:16:24 +0000 (+0000)
Subject: downloads: Refactor the entire page
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=6497270018a5d4b062a44a8e97abd835c181f8ff;p=ipfire.org.git

downloads: Refactor the entire page

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

diff --git a/src/templates/downloads/release.html b/src/templates/downloads/release.html
index c2e73bfc..085c10e9 100644
--- a/src/templates/downloads/release.html
+++ b/src/templates/downloads/release.html
@@ -10,7 +10,7 @@
 {% end block %}
 
 {% block container %}
-	<section class="hero is-primary">
+	<section class="hero is-primary is-fullheight-with-navbar">
 		<div class="hero-body">
 			<div class="container">
 				<nav class="breadcrumb" aria-label="breadcrumbs">
@@ -29,93 +29,138 @@
 				</h1>
 
 				<h6 class="subtitle">
-					{{ _("Released %s") % locale.format_date(release.published, relative=True, shorter=True) }}
+					{{ _("Released %s") % locale.format_date(release.published, relative=False, shorter=True) }}
 				</h6>
 
-				<div class="columns is-multiline">
-					{% for arch in release.arches %}
-						<div class="column is-half is-one-third-widescreen is-one-quarter-fullhd">
-							<div class="block p-5">
-								<h5 class="title is-5">{{ arch }}</h5>
+				<div class="level">
+					<div class="level-left">
+						{% if release.blog %}
+							<div class="level-item">
+								<a href="/blog/{{ release.blog.slug }}">
+									{{ _("Read The Release Announcement") }} &rarr;
+								</a>
+							</div>
+						{% end %}
+					</div>
+
+					<div class="level-right">
+						<div class="tabs is-toggle">
+							<ul>
+								{% for i, arch in enumerate(release.arches) %}
+									<li {% if i == 0 %}class="is-active"{% end %} data-tab="{{ arch }}">
+										<a>
+											<span>{{ arch }}</span>
+										</a>
+									</li>
+								{% end %}
+							</ul>
+						</div>
+					</div>
+				</div>
+
+				{% for i, arch in enumerate(release.arches) %}
+					<div id="{{ arch }}" class="tab-content {% if i > 0 %}is-hidden{% end %}">
+						<div class="columns">
+							{% for file in release.get_files_by_arch(arch) %}
+								{% if file.is_torrent() %}{% continue %}{% end %}
+
+								{# Fetch the corresponding torrent file #}
+								{% set torrent = release.find_torrent(file) %}
+
+								<div class="column">
+									<div class="card">
+										<div class="card-content">
+											<div class="columns">
+												<div class="column">
+													<p class="title is-6 has-text-dark">
+														{{ _(file.desc) }}
+													</p>
+												</div>
+
+												<div class="column is-narrow">
+													<span class="tag">
+														{{ format_size(file.size) }}
+													</span>
+												</div>
+											</div>
+
+											<div class="block content">
+												{% if file.type == "iso" %}
+													<p>
+														<small>
+															For bare metal installs, virtual machines,
+															and optical media.
+														</small>
+													</p>
+												{% elif file.type == "flash" %}
+													<p>
+														<small>
+															For embedded hardware, USB sticks,
+															and SD card deployments.
+														</small>
+													</p>
+												{% end %}
+											</div>
 
-								<ul>
-									{% for file in release.get_files_by_arch(arch) %}
-										{% if file.is_torrent() %}{% continue %}{% end %}
+											<div class="buttons">
+												<a class="button is-success is-fullwidth download-splash" href="{{ file.url }}">
+													<span class="icon">
+														<i class="fa-solid fa-download"></i>
+													</span>
 
-										{# Fetch the corresponding torrent file #}
-										{% set torrent = release.find_torrent(file) %}
+													<span>
+														{{ _("Direct Download") }}
+													</span>
+												</a>
 
-										<li>
-											<div class="dropdown is-right">
-												<div class="dropdown-trigger">
-													<button class="button is-link" aria-haspopup="true" aria-controls="dropdown-menu">
+												{% if torrent %}
+													<a class="button is-outlined is-fullwidth download-splash" href="{{ torrent.url }}">
 														<span class="icon">
-															<i class="fas fa-download"></i>
+															<i class="fa-regular fa-circle-down"></i>
 														</span>
 
 														<span>
-															{{ _(file.desc) }}
-															({{ format_size(file.size) }})
+															{{ _("Torrent Download") }}
 														</span>
-													</button>
-												</div>
-
-												<div class="dropdown-menu" id="dropdown-menu" role="menu">
-													<div class="dropdown-content">
-														<a class="dropdown-item download-splash" href="{{ file.url }}">
-															<span class="icon">
-																<i class="fa-solid fa-download"></i>
-															</span>
-
-															{{ _("Direct Download") }}
-														</a>
-
-														{% if torrent %}
-															<a class="dropdown-item download-splash" href="{{ torrent.url }}">
-																<span class="icon">
-																	<i class="fa-solid fa-share-nodes"></i>
-																</span>
-
-																{{ _("Torrent Download") }}
-															</a>
-														{% end %}
-													</div>
-												</div>
+													</a>
+												{% end %}
 											</div>
-										</li>
-									{% end %}
-								</ul>
-							</div>
+										</div>
+									</div>
+								</div>
+							{% end %}
 						</div>
-					{% end %}
-				</div>
+					</div>
+				{% end %}
 			</div>
 		</div>
-	</section>
-
-	<section class="has-text-white has-background-info">
-		<div class="container">
-			<p class="has-text-centered px-2 py-1">
-				{{ _("Deploying IPFire In The Cloud?") }}
-
-				<a class="has-text-white has-text-weight-bold" href="/downloads/cloud">
-					{{ _("Read More") }}
-				</a>
-			</p>
-		</div>
-	</section>
-
-	{% if release.blog %}
-		<section class="section">
-			<div class="container">
-				<h3 class="title is-3">{{ _("Release Notes") }}</h3>
 
-				<div class="content">
-					{% raw release.blog.html %}
+		<div class="hero-foot">
+			<div class="container py-6">
+				<div class="columns is-centered is-vcentered">
+					<div class="column is-narrow">
+						<span class="icon is-large m-5">
+							<i class="fa-solid fa-cloud fa-5x"></i>
+						</span>
+					</div>
+
+					<div class="column is-half">
+						<h5 class="title is-5">
+							Deploying IPFire in the Cloud?
+						</h5>
+
+						<p class="subtitle is-6">
+							AMIs and cloud images are available for AWS, Exoscale, and more.
+						</p>
+
+						<a class="button is-white is-small is-outlined" href="/downloads/cloud">
+							{{ _("View Cloud Options") }}
+						</a>
+					</div>
 				</div>
 			</div>
-		</section>
-	{% end %}
+		</div>
+	</section>
 {% end block %}
 
 {% block javascript %}