release.html: finished download-cards

diff --git a/src/templates/download/release.html b/src/templates/download/release.html
index dba92674e0e1eabfa21db78b5734093998b15918..0c8a4f9a4848d7dbcf4c8d586cf799498671c6d1 100644 (file)
--- a/src/templates/download/release.html
+++ b/src/templates/download/release.html
@@ -3,28 +3,128 @@
 {% block title %}{{ release }}{% end block %}
 
 {% block container %}
-       <div class="header">
-               <div class="container">
-                       <h1>{{ _("Download") }}</h1>
-
-                       <p class="text-muted">
-                               IPFire is free to download for everyone... XXX
-                       </p>
+       <section class="hero has-background-primary-light">
+               <div class="hero-body">
+                       <div class="container">
+                               <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+                                       <ul>
+                                               <li>
+                                                       <a href="/">Home</a>
+                                               </li>
+                                               <li class="is-active">
+                                                       <a href="#" aria-current="page">Downloads</a>
+                                               </li>
+                                       </ul>
+                               </nav>
+                               <h1 class="title is-1">
+                                       Download {{ release }}
+                               </h1>
+                               <p class="subtitle">
+                                       {{ _("Released %s") % locale.format_date(release.published, relative=True, shorter=True) }}
+
+                                       {% if release.blog %}
+                                               &bull;
+                                               <a href="/blog/{{ release.blog.slug }}">{{ _("Release Notes") }}</a>
+                                       {% end %}
+                               </p>
+                       </div>
                </div>
-       </div>
+       </section>
 
-       <div class="container">
-               <section>
-                       <h2>{{ release }}</h2>
+       <!--<div class="container">
+               <section class="section">
+                       <div class="columns is-variable is-multiline">
+                               {% for arch in release.arches %}
+                                       <div class="column is-half">
+                                               <div class="card">
+                                                       <div class="card-header">
+                                                               <h4 class="title is-4 has-font-weight-bold">{{ arch }}</h4>
+                                                       </div>
+                                                       <hr>
+                                                       <div class="card-content">
+                                                               {% for file in release.get_files_by_arch(arch) %}
+                                                                       <a class="list-group-item list-group-item-action
+                                                                                       d-flex justify-content-between align-items-center download-splash" href="{{ file.url }}">
+                                                                               <span>
+                                                                                       <i class="fas fa-download text-primary"></i> {{ _(file.desc) }}
+                                                                               </span>
+
+                                                                               <span class="text-muted small">
+                                                                                       {{ format_size(file.size) }}
+                                                                               </span>
+                                                                       </a>
+                                                               {% end %}
+                                                       </div>
+                                               </div>
+                                       </div>
+                               </div>
+                       {% end %}
+               </section>
+       </div>-->
+
+<!--   <div class="container">
+               <section class="section">
+                       <div class="columns is-multiline">
+                               {% for arch in release.arches %}
+                                       <div class="columns is-half">
+                                               <div class="card">
+                                                       <div class="card-header">
 
-                       <p class="text-muted">
-                               {{ _("Released %s") % locale.format_date(release.published, relative=True, shorter=True) }}
+                                                       </div>
+                                                       <hr>
+                                                       <div class="card-content">
+                                                               {% for file in release.get_files_by_arch(arch) %}
+                                                                       <a class="list-group-item list-group-item-action
+                                                                                       d-flex justify-content-between align-items-center download-splash" href="{{ file.url }}">
+                                                                               <span>
+                                                                                       <i class="fas fa-download text-primary"></i> {{ _(file.desc) }}
+                                                                               </span>
 
-                               {% if release.blog %}
-                                       &bull;
-                                       <a href="/blog/{{ release.blog.slug }}">{{ _("Release Notes") }}</a>
+                                                                               <span class="text-muted small">
+                                                                                       {{ format_size(file.size) }}
+                                                                               </span>
+                                                                       </a>
+                                                               {% end %}
+                                                       </div>
+                                               </div>
+                                       </div>
                                {% end %}
-                       </p>
+                       </div>
+               </section>
+       </div>-->
+
+<div class="container">
+       <section class="section">
+               <div class="columns is-multiline">
+                       {% for arch in release.arches %}
+                               <div class="column is-one-third">
+                                       <div class="has-background-primary-light">
+                                               <div class="card-header"></div>
+
+                                               <div class="card-content">
+                                                       <h4 class="title is-4 has-font-weight-bold">{{ arch }}</h4>
+                                                       {% for file in release.get_files_by_arch(arch) %}
+                                                               <a class="" href="{{ file.url }}">
+                                                                       <span>
+                                                                               <i class="fas fa-download text-primary"></i> {{ _(file.desc) }}
+                                                                       </span>
+                                                                       <span class="text-muted small">
+                                                                               {{ format_size(file.size) }}
+                                                                       </span>
+                                                               </a>
+                                                               <br>
+                                                       {% end %}
+                                               </div>
+                                       </div>
+                               </div>
+                       {% end %}
+               </div>
+       </section>
+</div>
+
+       <!--<div class="container">
+               <section>
+
 
                        <div class="row row-cols-2 row-cols-lg-4 g-4">
                                {% for arch in release.arches %}
@@ -61,47 +161,61 @@
                                {% end %}
                        </div>
                </section>
-       </div>
-
-       <section class="inverse">
+       </div>-->
+       <section class="section">
                <div class="container">
-                       <div class="row flex-md-row-reverse">
-                               <div class="col-12 col-md-4 text-center text-md-end">
-                                       <span class="fas fa-cloud fa-10x my-5"></span>
-                               </div>
-
-                               <div class="col-12 col-md-8">
-                                       <h1>{{ _("Running IPFire in the Cloud?") }}</h1>
-
-                                       <p>
-                                               {{ _("IPFire is now available in the Amazon Cloud.") }}
-                                               {{ _("Create flexible firewall rules and use our Intrusion Detection System to protect your servers in the Cloud.") }}
-                                               {{ _("Connect to them securely using our VPN technologies.") }}
-                                       </p>
-
-                                       <a class="btn btn-lwl" href="https://aws.amazon.com/marketplace/pp/B07HYRD4FX">
-                                               {{ _("Go to Amazon Web Services") }} <span class="fas fa-external-link-alt ml-2"></span>
-                                       </a>
+                       <section class="hero has-background-primary-light">
+                               <div class="hero-body">
+                                       <div class="container">
+                                               <h2 class="title is-2">{{ _("Running IPFire in the Cloud?") }}</h2>
+
+                                               <p class="subtitle">
+                                                       {{ _("IPFire is now available in the Amazon Cloud.") }}
+                                                       {{ _("Create flexible firewall rules and use our Intrusion Detection System to protect your servers in the Cloud.") }}
+                                                       {{ _("Connect to them securely using our VPN technologies.") }}
+                                               </p>
+
+                                               <a class="button is-lwl" href="https://aws.amazon.com/marketplace/pp/B07HYRD4FX">
+                                                       {{ _("Go to Amazon Web Services") }} <span class="fas fa-external-link-alt ml-2"></span>
+                                               </a>
+                                       </div>
                                </div>
-                       </div>
+                       </section>
                </div>
        </section>
 
        <!-- Upgrade instructions -->
 
-       <div class="container">
-               <section>
-                       <p>
-                               {{ _("All downloads will be served from one of our mirror servers that are sponsored by various organisations from all around the world to help us make IPFire available for everyone") }}
-                       </p>
-
-                       <div class="d-grid">
-                               <a class="btn btn-light" href="/download/mirrors">
-                                       {{ _("Browse Mirrors") }}
-                               </a>
-                       </div>
-               </section>
-       </div>
+       <section class="section">
+               <div class="container">
+                       <section>
+                               <div class="columns">
+                                       <div class="column is-1"></div>
+                                       <div class="column is-10">
+                                               <div class="columns">
+                                                       <div class="column is-12">
+                                                               <p class="is-size-5">
+                                                                       {{ _("All downloads will be served from one of our mirror servers that are sponsored by various organisations from all around the world to help us make IPFire available for everyone") }}
+                                                               </p>
+                                                       </div>
+                                               </div>
+                                               <div class="block">
+                                                       <div class="columns">
+                                                               <div class="column is-1"></div>
+                                                                       <div class="column is-10">
+                                                                               <a class="button is-primary is-fullwidth is-medium" href="/download/mirrors">
+                                                                                       {{ _("Browse Mirrors") }}
+                                                                               </a>
+                                                                       </div>
+                                                               <div class="column is-1"></div>
+                                                       </div>
+                                               </div>
+                                       </div>
+                                       <div class="column is-1"></div>
+                               </div>
+                       </section>
+               </div>
+       </section>
 {% end block %}
 
 {% block javascript %}
@@ -112,4 +226,4 @@
                        window.location = "/download/thank-you?file=" + this.href;
                });
        </script>
-{% end %}
+{% end %}
\ No newline at end of file