From f66350ce2ed3aee33fc493490afb9cab45700e11 Mon Sep 17 00:00:00 2001
From: Rico Hoppe <rico.hoppe@ipfire.org>
Date: Tue, 9 May 2023 19:12:36 +0000
Subject: [PATCH] mirrors.html: converted to new design

---
 src/templates/download/mirrors.html | 153 +++++++++++++++++++++++-----
 1 file changed, 130 insertions(+), 23 deletions(-)

diff --git a/src/templates/download/mirrors.html b/src/templates/download/mirrors.html
index 7d1f2858..c21546d7 100644
--- 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 %}	#} -->
-- 
2.47.3