From 587f8e6090dc92706e5253e940f2a6c08ecbe450 Mon Sep 17 00:00:00 2001
From: Rico Hoppe <rico.hoppe@ipfire.org>
Date: Sun, 15 Oct 2023 15:05:33 +0000
Subject: [PATCH] docs/files/index: restyled the page

---
 src/templates/docs/files/index.html | 51 +++++++++++++++++------------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/templates/docs/files/index.html b/src/templates/docs/files/index.html
index 486d36cf..70f8ce1f 100644
--- a/src/templates/docs/files/index.html
+++ b/src/templates/docs/files/index.html
@@ -4,21 +4,19 @@
 
 {% block main %}
 	{% if files %}
-		<div class="card mb-4">
-			<div class="card-body">
-				<h4 class="card-title">{{ _("Files") }}</h4>
+		<section class="section">
+			<div class="container">
+				<h4 class="title is-3">{{ _("Files") }}</h3>
 
-				<div class="row">
+				<div class="block">
 					{% for f in files %}
 						{% if f.is_image() %}
-							<div class="col-sm-6 col-md-4">
-								<figure class="figure">
-									<a href="{{ f.url }}?action=detail">
-										<img class="figure-img img-fluid img-thumbnail" src="{{ f.url }}?s=256" alt="{{ f.filename }}">
-										<figcaption class="figure-caption">{{ f.filename }}</figcaption>
-									</a>
-								</figure>
-							</div>
+							<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>
@@ -39,25 +37,36 @@
 					{% end %}
 				</ul>
 			</div>
-		</div>
+		</section>
 	{% end %}
 
-	<div class="card">
-		<div class="card-body">
-			<h6 class="card-title">{{ _("Upload File") }}</h6>
+	<section class="section">
+		<div class="container">
+			<h5 class="title is-5">{{ _("Upload File") }}</h5>
 
 			<form method="POST" action="/docs/_upload" enctype="multipart/form-data">
 				{% raw xsrf_form_html() %}
 
 				<input type="hidden" name="path" value="{{ path }}">
 
-				<div class="mb-3">
-					<input class="form-control" type="file" name="file" required>
-					<label class="form-label" for="customFile">{{ _("Choose a file to upload") }}</label>
+				<div class="block">
+					<div class="file">
+						<label class="file-label">
+							<input class="file-input" type="file" name="file" required>
+							<span class="file-cta">
+								<span class="file-icon">
+									<i class="fas fa-upload"></i>
+								</span>
+								<span class="file-label">
+									{{ _("Choose a file to upload") }}
+								</span>
+							</span>
+						</label>
+					</div>
 				</div>
 
-				<div class="d-grid">
-					<input class="btn btn-primary" type="submit" value="{{ _("Upload") }}">
+				<div class="block">
+					<input class="button is-primary" type="submit" value="{{ _("Upload") }}">
 				</div>
 			</form>
 		</div>
-- 
2.47.3