From: Michael Tremer <michael.tremer@ipfire.org>
Date: Sun, 28 Nov 2021 14:48:04 +0000 (+0000)
Subject: mirrors: Redesign page
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=63883dc5b4731e02dc9153eed9c7e945332f9d1a;p=ipfire.org.git

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 ba4cdf0b..b01725d0 100644
--- 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 %}