mirrors: Redesign page

Each mirror now has a box with all required information

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

diff --git a/src/templates/download/mirrors.html b/src/templates/download/mirrors.html
index ba4cdf0bd6334299c1f449fc81bc11aa5102c587..b01725d0a73708a10409c8f6194e984da81adb8e 100644 (file)
--- a/src/templates/download/mirrors.html
+++ b/src/templates/download/mirrors.html
@@ -19,37 +19,47 @@
                </section>
 
                <section>
-                       <div class="row justify-content-center">
-                               <div class="col-12 col-lg-6">
-                                       {% for country in sorted(mirrors, key=lambda c: c.name) %}
-                                               <a name="{{ country.alpha2 }}"></a>
-                                               <div class="my-4 d-flex justify-content-between">
-                                                       <div>
-                                                               <h4 class="mb-0">{{ country.name }}</h4>
-                                                               <span class="small text-muted">
-                                                                       {{ _("One Mirror", "%(num)s Mirrors", len(mirrors[country])) % { "num" : len(mirrors[country]) } }}
-                                                               </span>
-                                                       </div>
+                       {% 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>
+                               </div>
 
-                                                       <h4 class="flag-icon flag-icon-{{ country.alpha2.lower() }}"></h4>
-                                               </div>
+                               <div class="row row-cols-1 row-cols-md-2">
+                                       {% for mirror in mirrors[country] %}
+                                               <div class="col mb-4">
+                                                       <div class="card
+                                                                       {% if mirror.state == "DOWN" %}border-danger
+                                                                       {% elif mirror.state == "OUTOFSYNC" %}border-warning{% end %}"
+                                                                       href="{{ mirror.url }}">
+                                                               <div class="card-body">
+                                                                       <h6 class="card-title">
+                                                                               <a href="{{ mirror.url }}">{{ mirror.owner or mirror.hostname }}</a>
+                                                                       </h6>
 
-                                               <div class="list-group">
-                                                       {% for m in mirrors[country] %}
-                                                               <a href="/download/mirrors/{{ m.hostname }}" class="list-group-item list-group-item-action
-                                                                               list-group-item-{% if m.state == "UP" %}success{% elif m.state == "DOWN" %}danger{% else %}warning{% end %}
-                                                                               flex-column align-items-start">
-                                                                       <h5 class="mb-1">{{ m.hostname }}</h5>
-
-                                                                       {% if m.owner %}
-                                                                               <p class="mb-0 text-truncate text-muted">{{ m.owner }}</p>
-                                                                       {% end %}
-                                                               </a>
-                                                       {% end %}
+                                                                       <ul class="list-unstyled small mb-0">
+                                                                               {% if mirror.asn %}
+                                                                                       <li>
+                                                                                               {{ _("Hosted at %s") % (mirror.address.autonomous_system or "AS%s" % mirror.asn) }}
+                                                                                       </li>
+                                                                               {% end %}
+
+                                                                               {% if mirror.state == "DOWN" %}
+                                                                                       <li class="text-danger">
+                                                                                               {{ _("Down since %s") % locale.format_date(mirror.last_update) }}
+                                                                                       </li>
+                                                                               {% elif mirror.state == "OUTOFSYNC" %}
+                                                                                       <li class="text-warning">
+                                                                                               {{ _("Out of sync since %s") % locale.format_date(mirror.last_update) }}
+                                                                                       </li>
+                                                                               {% end %}
+                                                                       </ul>
+                                                               </div>
+                                                       </div>
                                                </div>
                                        {% end %}
                                </div>
-                       </div>
+                       {% end %}
                </section>
        </div>
 {% end block %}