]> git.ipfire.org Git - ipfire.org.git/commitdiff
downloads: Refactor the entire page
authorMichael Tremer <michael.tremer@ipfire.org>
Wed, 4 Mar 2026 19:16:24 +0000 (19:16 +0000)
committerMichael Tremer <michael.tremer@ipfire.org>
Wed, 4 Mar 2026 19:16:24 +0000 (19:16 +0000)
Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
src/templates/downloads/release.html

index c2e73bfcf38a9356b0ae08ee3012a5b0d0ff2df2..085c10e90406524a1b4787e8b126e48d2c22b5e3 100644 (file)
@@ -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">
                                </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 %}