From 8965559d52d045bf447c9f377be5fdbeb43c8a4f Mon Sep 17 00:00:00 2001
From: Michael Tremer <michael.tremer@ipfire.org>
Date: Tue, 10 Oct 2023 09:48:53 +0000
Subject: [PATCH] downloads: mirrors: Simplify markup

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---
 src/templates/downloads/mirrors.html | 81 +++++++++++-----------------
 1 file changed, 30 insertions(+), 51 deletions(-)

diff --git a/src/templates/downloads/mirrors.html b/src/templates/downloads/mirrors.html
index 91f3d617..27d6930f 100644
--- a/src/templates/downloads/mirrors.html
+++ b/src/templates/downloads/mirrors.html
@@ -6,7 +6,7 @@
 	{% set total = sum((len(m) for c, m in mirrors.items())) %}
 	{% set countries = len(mirrors) %}
 
-	<section class="hero has-background-primary-light">
+	<section class="hero is-light">
 		<div class="hero-body">
 			<div class="container">
 				<nav class="breadcrumb is-medium" aria-label="breadcrumbs">
@@ -34,63 +34,42 @@
 		</div>
 	</section>
 
-	<div class="container">
-		{% for country in sorted(mirrors, key=lambda c: c.name) %}
-			<section class="section">
+	{% for country in sorted(mirrors, key=lambda c: c.name) %}
+		<section class="section">
+			<div class="container">
 				<h4 class="title is-4">
 					<i class="flag-icon flag-icon-{{ country.alpha2.lower() }}"></i>
 					{{ country.name }}
 				</h4>
 
-				<div class="container">
-					<div class="columns  is-multiline">
-						{% for mirror in mirrors[country] %}
-							<div class="column is-one-third">
-								<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="columns is-multiline">
+					{% for mirror in mirrors[country] %}
+						<div class="column is-one-third">
+							<div class="card">
+								<div class="card-content">
+									<h6 class="title is-6">
+										{% if mirror.state == "DOWN" %}
+											<i class="fa-solid fa-circle has-text-danger" title="{{ _("Down since %s") % locale.format_date(mirror.last_update) }}"></i>
+										{% elif mirror.state == "OUTOFSYNC" %}
+											<i class="fa-solid fa-circle has-text-warning" title="{{ _("Out Of Sync since %s") % locale.format_date(mirror.last_update) }}"></i>
+										{% else %}
+											<i class="fa-solid fa-circle has-text-success" title="{{ _("Online") }}"></i>
+										{% end %}
+
+										<a href="{{ mirror.url }}">{{ mirror.owner or mirror.hostname }}</a>
+									</h6>
 
-										<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>
+									{% if mirror.asn %}
+										<p>
+											{{ mirror.address.autonomous_system or "AS%s" % mirror.asn }}
+										</p>
+									{% end %}
 								</div>
 							</div>
-						{% end %}
-					</div>
+						</div>
+					{% end %}
 				</div>
-			</section>
-		{% end %}
-	</div>
+			</div>
+		</section>
 	{% end %}
-</div>
+{% end block %}
-- 
2.47.3