From: Michael Tremer <michael.tremer@ipfire.org>
Date: Thu, 14 Dec 2023 15:19:45 +0000 (+0000)
Subject: docs: Refactor the file listing page
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=300cd067719db1de942ef0b6bafe051e190a6f76;p=ipfire.org.git

docs: Refactor the file listing page

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

diff --git a/src/templates/docs/files/index.html b/src/templates/docs/files/index.html
index 70f8ce1f..ca01a431 100644
--- a/src/templates/docs/files/index.html
+++ b/src/templates/docs/files/index.html
@@ -6,36 +6,37 @@
 	{% if files %}
 		<section class="section">
 			<div class="container">
-				<h4 class="title is-3">{{ _("Files") }}</h3>
-
-				<div class="block">
+				<div class="columns is-multiline">
 					{% for f in files %}
-						{% if f.is_image() %}
-							<figure class="image">
-								<a href="{{ f.url }}?action=detail">
-									<img class="figure-img img-fluid img-thumbnail" src="{{ f.url }}?s=256" alt="{{ f.filename }}">
-									<p class="is-size-7">{{ f.filename }}</p>
-								</a>
-							</figure>
-						{% end %}
-					{% end %}
-				</div>
+						<div class="column is-flex is-flex-direction-column is-half is-one-quarter-desktop">
+							<div class="notification has-text-centered is-flex is-flex-direction-column" style="height: 100%">
+								<div class="block is-flex is-flex-grow-1 is-flex-direction-column is-justify-content-center">
+									{% if f.is_image() %}
+										<a href="{{ f.url }}?action=detail">
+											<figure class="image">
+												<img src="{{ f.url }}?s=512" alt="{{ f.filename }}">
+											</figure>
+										</a>
+									{% elif "pdf" in f.mimetype %}
+										<span class="icon">
+											<i class="fas fa-file-pdf fa-5x"></i>
+										</span>
+									{% else %}
+										<span class="icon">
+											<i class="fas fa-file fa-5x"></i>
+										</span>
+									{% end %}
+								</div>
 
-				<ul class="list-inline">
-					{% for f in files %}
-						{% if not f.is_image() %}
-							<li class="list-inline-item">
-								{% if "pdf" in f.mimetype %}
-									<span class="fas fa-file-pdf fa-fw"></span>
-								{% else %}
-									<span class="fas fa-file fa-fw"></span>
-								{% end %}
-
-								<a href="{{ f.url }}?action=detail">{{ f.filename }}</a>
-							</li>
-						{% end %}
+								<div class="block">
+									<h6 class="title is-6">
+										<a href="{{ f.url }}?action=detail">{{ f.filename }}</a>
+									</h6>
+								</div>
+							</div>
+						</div>
 					{% end %}
-				</ul>
+				</div>
 			</div>
 		</section>
 	{% end %}