mirrors.html: converted to new design

diff --git a/src/templates/download/mirrors.html b/src/templates/download/mirrors.html
index 7d1f28585e6001ea2c7902bece7b8479595d3c7d..c21546d7253da0ef59a17fe5356f8b122587ae46 100644 (file)
--- a/src/templates/download/mirrors.html
+++ b/src/templates/download/mirrors.html
@@ -6,39 +6,146 @@
        {% set total = sum((len(m) for c, m in mirrors.items())) %}
        {% set countries = len(mirrors) %}
 
-       <div class="header">
-               <div class="container">
-                       <h1>{{ _("Mirrors") }}</h1>
-
-                       <p class="text-muted">
-                               {{ _("IPFire downloads are being served from %(total)s mirror servers "
-                                       "sponsored by various organizations in %(countries)s countries "
-                                       "helping us making it available for everyone") % { "total" : total, "countries" : countries } }}
-                       </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>
+                                                       <a href="/downloads">Downloads</a>
+                                               </li>
+                                               <li class="is-active">
+                                                       <a href="#" aria-current="page">Mirrors</a>
+                                               </li>
+                                       </ul>
+                               </nav>
+                               <h1 class="title is-1">
+                                       {{ _("Mirrors") }}
+                               </h1>
+                               <p class="subtitle">
+                                       {{ _("IPFire downloads are being served from %(total)s mirror servers "
+                                               "sponsored by various organizations in %(countries)s countries "
+                                               "helping us making it available for everyone") % { "total" : total, "countries" : countries } }}
+                               </p>
+                       </div>
                </div>
-       </div>
+       </section>
 
        <div class="container">
-               <section>
-                       {% for country in sorted(mirrors, key=lambda c: c.name) %}
-                               <div class="my-4 d-flex justify-content-between">
-                                       <h4 class="mb-0">{{ country.name }}</h4>
-                                       <h4 class="flag-icon flag-icon-{{ country.alpha2.lower() }}"></h4>
+               {% for country in sorted(mirrors, key=lambda c: c.name) %}
+                       <section class="section">
+                               <h4 class="title is-4">
+                                       <i class="flag-icon flag-icon-{{ country.alpha2.lower() }}"></i>
+                                       {{ country.name }}
+                               </h4>
+
+                               {% for mirror in mirrors[country] %}
+                               <div class="container">
+                                       <div class="columns">
+                                               <div class="column is-one-third is-multiline">
+                                                       <div class="card
+                                                               {% if mirror.state == "DOWN" %}has-background-danger-light
+                                                               {% elif mirror.state == "OUTOFSYNC" %}has-background-warning-light{% end %}
+                                                       ">
+                                                               <div class="card-header"
+                                                               href="{{ mirror.url }}">
+                                                               </div>
+                                                               <div class="card-content">
+                                                                       <div class="media">
+                                                                               <div class="media-content">
+                                                                                       <h6 class="title is-6">
+                                                                                               <a href="{{ mirror.url }}">{{ mirror.owner or mirror.hostname }}</a>
+                                                                                       </h6>
+                                                                               </div>
+                                                                       </div>
+
+                                                                       <div class="content">
+                                                                               <ul>
+                                                                                       {% if mirror.asn %}
+                                                                                               <li>
+                                                                                                       {{ _("Hosted at %s") % (mirror.address.autonomous_system or "AS%s" % mirror.asn) }}
+                                                                                               </li>
+                                                                                       {% end %}
+                                                                               </ul>
+                                                                               <br>
+                                                                               <time datetime="2016-1-1">
+                                                                                       {% if mirror.state == "DOWN" %}
+                                                                                               <p class="has-text-danger">
+                                                                                                       {{ _("Down since %s") % locale.format_date(mirror.last_update) }}
+                                                                                               </p>
+                                                                                       {% elif mirror.state == "OUTOFSYNC" %}
+                                                                                               <p class="has-text-warning">
+                                                                                                       {{ _("Out of sync since %s") % locale.format_date(mirror.last_update) }}
+                                                                                               </p>
+                                                                                       {% end %}
+                                                                               </time>
+                                                                       </div>
+                                                               </div>
+                                                       </div>
+                                               </div>
+                                       </div>
+                                       {% end %}
                                </div>
+                       </section>
+               {% end %}
+       </div>
+       {% end %}
+</div>
+
+<!--   <div class="card">
+               <div class="card-content">
+                 <div class="media">
+                       <div class="media-content">
+                               <h6 class="title is-6">
+                                       <a href="{{ mirror.url }}">{{ mirror.owner or mirror.hostname }}</a>
+                               </h6>
+                       </div>
+                 </div>
 
-                               <div class="row row-cols-1 row-cols-md-2">
+                 <div class="content">
+                       <ul>
+                               {% if mirror.asn %}
+                                       <li>
+                                               {{ _("Hosted at %s") % (mirror.address.autonomous_system or "AS%s" % mirror.asn) }}
+                                       </li>
+                               {% end %}
+                       </ul>
+                       <br>
+                       <time datetime="2016-1-1">
+                               {% if mirror.state == "DOWN" %}
+                                       <li class="has-text-danger">
+                                               {{ _("Down since %s") % locale.format_date(mirror.last_update) }}
+                                       </li>
+                               {% elif mirror.state == "OUTOFSYNC" %}
+                                       <li class="has-text-warning">
+                                               {{ _("Out of sync since %s") % locale.format_date(mirror.last_update) }}
+                                       </li>
+                               {% end %}
+                       </time>
+                 </div>
+               </div>
+         </div>
+-->
+
+               <!-- {#         <div class="row row-cols-1 row-cols-md-2">
                                        {% for mirror in mirrors[country] %}
+                                       <div class="container">
                                                <div class="col mb-4">
                                                        <div class="card
-                                                                       {% if mirror.state == "DOWN" %}border-danger
-                                                                       {% elif mirror.state == "OUTOFSYNC" %}border-warning{% end %}"
+                                                               <div class="card-header
+                                                                       {% if mirror.state == "DOWN" %}background-color-danger
+                                                                       {% elif mirror.state == "OUTOFSYNC" %}background-color-warning{% end %}"
                                                                        href="{{ mirror.url }}">
+                                                               </div>
                                                                <div class="card-body">
                                                                        <h6 class="card-title">
                                                                                <a href="{{ mirror.url }}">{{ mirror.owner or mirror.hostname }}</a>
                                                                        </h6>
 
-                                                                       <ul class="list-unstyled small mb-0">
+                                                                       <ul>
                                                                                {% if mirror.asn %}
                                                                                        <li>
                                                                                                {{ _("Hosted at %s") % (mirror.address.autonomous_system or "AS%s" % mirror.asn) }}
@@ -46,11 +153,11 @@
                                                                                {% end %}
 
                                                                                {% if mirror.state == "DOWN" %}
-                                                                                       <li class="text-danger">
-                                                                                               {{ _("Down since %s") % locale.format_date(mirror.last_update) }}
+                                                                                       <li class="has-text-danger">
+                                                                                               {{ _("Down since %s") % locale.format_date(mirror.last_update) }}
                                                                                        </li>
                                                                                {% elif mirror.state == "OUTOFSYNC" %}
-                                                                                       <li class="text-warning">
+                                                                                       <li class="has-text-warning">
                                                                                                {{ _("Out of sync since %s") % locale.format_date(mirror.last_update) }}
                                                                                        </li>
                                                                                {% end %}
@@ -63,4 +170,4 @@
                        {% end %}
                </section>
        </div>
-{% end block %}
+{% end block %}        #} -->