From: Rico Hoppe <rico.hoppe@ipfire.org>
Date: Sat, 21 Oct 2023 16:24:52 +0000 (+0000)
Subject: fireinfo/index: restyled the page
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=a32f364477f923a117d51be5da6dea6b63c1bf95;p=ipfire.org.git

fireinfo/index: restyled the page
---

diff --git a/src/templates/fireinfo/index.html b/src/templates/fireinfo/index.html
index 201e3c46..72d3ac9a 100644
--- a/src/templates/fireinfo/index.html
+++ b/src/templates/fireinfo/index.html
@@ -3,136 +3,152 @@
 {% block title %}{{ _("Fireinfo") }}{% end block %}
 
 {% block container %}
-	<div class="header">
-		<div class="container">
-			<h1>{{ _("Fireinfo") }}</h1>
+	<section class="hero is-medium is-primary">
+		<div class="hero-body">
+			<div class="container">
+				<nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+					<ul>
+						<li>
+							<a href="https://ipfire.org/">
+								Home
+							</a>
+						</li>
+						<li class="is-active">
+							<a href="/">
+								{{ _("Fireinfo") }}
+							</a>
+						</li>
+					</ul>
+				</nav>
 
-			<p class="text-muted">
-				<strong>Fireinfo</strong> is a tool that anonymously collects statistical
-				data from IPFire systems
-			</p>
+				<h1 class="title is-1">{{ _("Fireinfo") }}</h1>
 
-			<div class="d-grid">
-				<a class="btn btn-primary my-3" href="/profile/random">
+				<a class="button is-dark is-medium" href="/profile/random">
 					{{ _("Show a Random Profile") }}
 				</a>
 			</div>
 		</div>
-	</div>
+	</section>
 
-	<section>
+	<section class="section">
 		<div class="container">
-			<div class="row justify-content-center align-items-center">
+			<div class="columns is-vcentered">
 				{% if latest_release %}
-					<div class="col-12 col-md-4 text-center text-md-end">
+					<div class="column is-half is-centered">
 						<div>
-							<h1 class="display-1 text-primary mb-0">
+							<h1 class="title is-1 has-text-primary">
 								{{ "%.2f%%" % (latest_release.penetration * 100) }}
 							</h1>
 
-							<h5>
+							<h5 class="title is-5">
 								{{ _("of all IPFire systems are on the latest release, released %s") % locale.format_date(latest_release.published, relative=True, shorter=True) }}
 							</h5>
 
-							<a class="btn btn-sm btn-light" href="/releases">
+							<a class="button is-primary is-outlined" href="/releases">
 								{{ _("See All Releases") }}
 							</a>
 						</div>
 					</div>
 				{% end %}
 
-				<div class="col-12 col-md-3 text-center text-md-start">
-					<img class="img-fluid my-5" src="{{ static_url("img/ipfire-tux.png") }}" alt="IPFire Logo" />
+				<div class="column is-one-third is-centered">
+					<img src="{{ static_url("img/ipfire-tux.png") }}" alt="IPFire Logo" />
 				</div>
 			</div>
 		</div>
 	</section>
 
-	<section class="bg-light">
+	<section class="section has-background-primary-light">
 		<div class="container">
-			<h4>{{ _("Locations") }}</h4>
+			<h4 class="title is-4">{{ _("Locations") }}</h4>
 
-			<dl class="row">
-				{% for country_code, percentage in locations %}
+			{% for country_code, percentage in locations %}
+				<div class="columns is-mobile">
 					{% if percentage >= 0.01 %}
-						<dt class="col-sm-6">
-							<span class="flag-icon flag-icon-{{ country_code.lower() }} small mr-1"></span>
-							{{ format_country_name(country_code) }}
-						</dt>
+						<div class="column is-one-fifth">
+							<span class="flag-icon flag-icon-{{ country_code.lower() }}"></span>
+							<span class="">{{ format_country_name(country_code) }}</span>
+						</div>
 
-						<dd class="col-sm-6">
+						<div class="column is-7">
 							{% module ProgressBar(percentage, "success") %}
-						</dd>
+						</div>
 					{% end %}
-				{% end %}
-			</dl>
+				</div>
+			{% end %}
 
 			<p>
-				{{ _("IPFire is also running in these countries: %s") % locale.list([(format_country_name(c) or c)  for c, p in locations if p < 0.01]) }}
+				<span class="has-text-weight-bold">IPFire<span class="has-text-primary">_</span></span>
+				{{_("is also running in these countries: %s") % locale.list([(format_country_name(c) or c)  for c, p in locations if p < 0.01]) }}
 			</p>
 		</div>
 	</section>
 
-	<section>
+	<section class="section">
 		<div class="container">
-			<div class="row">
-				<div class="col-12 col-lg-6">
-					<h4>{{ _("Architectures") }}</h4>
-
-					<dl class="row">
-						{% for name, percentage in arches %}
-							<dt class="col-sm-3">{{ name }}</dt>
-
-							<dd class="col-sm-9">
-								{% module ProgressBar(percentage, "success") %}
-							</dd>
-						{% end %}
-					</dl>
-				</div>
-
-				<div class="col-12 col-lg-6">
-					<h4>{{ _("CPU Vendors") }}</h4>
+			<div class="columns is-vcentered">
+				<div class="column is-half">
+					<div class="block">
+						<h4 class="title is-4">{{ _("CPU Vendors") }}</h4>
 
-					<dl class="row">
 						{% for name, percentage in cpu_vendors %}
-							<dt class="col-sm-3">{{ name }}</dt>
+							<div class="columns">
+								<div class="column is-1">{{ name }}</div>
 
-							<dd class="col-sm-9">
-								{% module ProgressBar(percentage, "success") %}
-							</dd>
+								<div class="column">
+									{% module ProgressBar(percentage, "success") %}
+								</div>
+							</div>
 						{% end %}
-					</dl>
 
-					<div class="d-grid">
-						<a class="btn btn-sm btn-light" href="/processors">
+						<a class="button is-primary" href="/processors">
 							{{ _("Processor Features") }}
 						</a>
 					</div>
+
+					<div class="block">
+						<h4 class="title is-4">{{ _("Architectures") }}</h4>
+
+						{% for name, percentage in arches %}
+							<div class="columns">
+								<div class="column is-1">{{ name }}</div>
+
+								<div class="column">
+									{% module ProgressBar(percentage, "success") %}
+								</div>
+							</div>
+						{% end %}
+					</div>
+				</div>
+				<div class="column is-half has-text-centered">
+						<h1 class="title is-1">{{ format_size(memory_avg * 1024, "MB") }}</h1>
+
+						<span class="tag">
+								{{ _("Average Amount of Memory") }}
+						</span>
 				</div>
 			</div>
 		</div>
 	</section>
 
-	<section>
+	<section class="section">
 		<div class="container">
-			<div class="row justify-content-center align-items-center">
-				<div class="col-12 col-md-4 text-center text-md-end">
-					<div>
-						<h1 class="display-1 text-success mb-0">
-							{{ "%.2f%%" % (virtual_ratio * 100) }}
-						</h1>
-
-						<h5>{{ _("of all IPFire systems are running in a virtual environment") }}</h5>
-					</div>
+			<div class="columns is-vcentered">
+				<div class="column is-half has-text-centered">
+					<h1 class="title is-1 has-text-primary">
+						{{ "%.2f%%" % (virtual_ratio * 100) }}
+					</h1>
+
+					<h5 class="title is-5">{{ _("of all IPFire systems are running in a virtual environment") }}</h5>
 				</div>
 
-				<div class="col-12 col-md-6">
-					<h4>{{ _("Top Hypervisors") }}</h4>
+				<div class="column is-half">
+					<h4 class="title is-4">{{ _("Top Hypervisors") }}</h4>
 
-					<dl class="row">
-						{% for name, percentage in hypervisors %}
+					{% for name, percentage in hypervisors %}
+						<div class="columns">
 							{% if percentage >= 0.01 %}
-								<dt class="col-sm-3">
+								<div class="column is-1">
 									{% if name == "unknown" %}
 										<span class="text-muted">{{ _("Unknown") }}</span>
 									{% elif name == "VMWare" %}
@@ -140,14 +156,14 @@
 									{% else %}
 										{{ name }}
 									{% end %}
-								</dt>
+								</div>
 
-								<dd class="col-sm-9">
+								<div class="column is-8">
 									{% module ProgressBar(percentage, "success") %}
-								</dd>
+								</div>
 							{% end %}
-						{% end %}
-					</dl>
+						</div>
+					{% end %}
 				</div>
 			</div>
 		</div>