From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 15 Dec 2023 12:58:59 +0000 (+0000)
Subject: docs: Refactor showing image details/uploads
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=99d40bec9bca95158e3bc19d523212d30b048386;p=ipfire.org.git

docs: Refactor showing image details/uploads

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

diff --git a/src/templates/docs/files/detail.html b/src/templates/docs/files/detail.html
index cd822a45..368f697e 100644
--- a/src/templates/docs/files/detail.html
+++ b/src/templates/docs/files/detail.html
@@ -5,86 +5,131 @@
 {% block head %}{% end block %}
 
 {% block main %}
-	<div class="card mb-4">
-		<div class="card-body">
+	<section class="section">
+		<div class="container">
 			{% if file.is_image() %}
-				<p class="text-center">
-					<img class="img-fluid img-thumbnail" src="{{ file.url }}?revision={{ file.created_at.isoformat() }}&s=768" alt="{{ file.filename }}">
-				</p>
+				<div class="block">
+					<div class="notification">
+						<figure class="image">
+							<img src="{{ file.url }}?revision={{ file.created_at.isoformat() }}&s=1920" alt="{{ file.filename }}">
+						</figure>
+					</div>
+				</div>
 			{% elif file.is_pdf() %}
-				<object class="pdf-viewer" data="{{ file.url }}?revision={{ file.created_at.isoformat() }}"
-						title="{{ file.filename }}" type="{{ file.mimetype }}">
-					<p>
-						{{ _("This PDF attachment could not be displayed.") }}
-						<a href="{{ file.url }}?revision={{ file.created_at.isoformat() }}">{{ _("Click here to download") }}</a>
-					</p>
-				</object>
+				<div class="block">
+					<object class="pdf-viewer" data="{{ file.url }}?revision={{ file.created_at.isoformat() }}"
+							title="{{ file.filename }}" type="{{ file.mimetype }}">
+						<p>
+							{{ _("This PDF attachment could not be displayed.") }}
+							<a href="{{ file.url }}?revision={{ file.created_at.isoformat() }}">{{ _("Click here to download") }}</a>
+						</p>
+					</object>
+				</div>
 			{% end %}
 
-			<div class="d-grid">
-				<a class="btn btn-primary btn-lg my-3" href="{{ file.url }}?revision={{ file.created_at.isoformat() }}">
-					<span class="fas fa-file-download"></span>
-					{{ _("Download") }} ({{ format_size(file.size) }})
+			<div class="block">
+				<a class="button is-primary is-fullwidth" href="{{ file.url }}?revision={{ file.created_at.isoformat() }}">
+					<span class="icon">
+						<i class="fas fa-file-download"></i>
+					</span>
+					<span>{{ _("Download") }} ({{ format_size(file.size) }})</span>
 				</a>
 			</div>
+		</div>
+	</section>
 
+	<section class="section">
+		<div class="container">
 			{% if file.is_image() %}
-				<h6>{{ _("Usage") }}</h6>
+				<h5 class="title is-5">{{ _("Usage") }}</h6>
 
-				<pre><code>![](./{{ file.filename }})</code></pre>
+				<div class="block">
+					<pre><code>![](./{{ file.filename }})</code></pre>
+				</div>
 
-				<p>{{ _("Or with an optional caption") }}</p>
+				<h6 class="title is-6">{{ _("Or with an optional caption") }}</h6>
 
-				<pre><code>![](./{{ file.filename }} "{{ _("Caption") }}")</code></pre>
+				<div class="block">
+					<pre><code>![](./{{ file.filename }} "{{ _("Caption") }}")</code></pre>
+				</div>
 			{% end %}
 
-			<h6 class="my-3">{{ _("Details") }}</h6>
+			<h5 class="title is-5">{{ _("Details") }}</h5>
 
-			<dl class="row">
-				<dt class="col-sm-3">{{ _("Filename") }}</dt>
-				<dd class="col-sm-9">{{ file.filename }}</dd>
+			<table class="table is-fullwidth">
+				<tr>
+					<th scope="row">
+						{{ _("Filename") }}
+					</th>
+					<td>
+						<code>{{ file.filename }}</code>
+					</td>
+				</tr>
 
 				{% if file.author %}
-					<dt class="col-sm-3">{{ _("Author") }}</dt>
-					<dd class="col-sm-9">
-						<a href="/users/{{ file.author.uid }}">{{ file.author }}</a>
-					</dd>
+					<tr>
+						<th scope="row">
+							{{ _("Author") }}
+						</th>
+						<td>
+							<a href="/users/{{ file.author.uid }}">{{ file.author }}</a>
+						</td>
+					</tr>
 				{% end %}
 
-				<dt class="col-sm-3">{{ _("Uploaded at") }}</dt>
-				<dd class="col-sm-9">{{ locale.format_date(file.created_at) }}</dd>
+				<tr>
+					<th scope="row">
+						{{ _("Uploaded at") }}
+					</th>
+					<td>
+						{{ locale.format_date(file.created_at) }}
+					</td>
+				</tr>
 
 				{% if file.deleted_at %}
-					<dt class="col-sm-3">{{ _("Deleted at") }}</dt>
-					<dd class="col-sm-9">{{ locale.format_date(file.deleted_at) }}</dd>
+					<tr>
+						<th scope="row">
+							{{ _("Deleted at") }}
+						</th>
+						<td>
+							{{ locale.format_date(file.deleted_at) }}
+						</td>
+					</tr>
 				{% end %}
 
 				{% set revisions = file.get_revisions() %}
 				{% if len(revisions) > 1 %}
-					<dt class="col-sm-3">{{ _("Other Revisions") }}</dt>
-					<dd class="col-sm-9">
-						<ul class="list-inline">
-							{% for r in revisions %}
-								<li>
-									<a href="{{ r.url }}?action=detail&revision={{ r.created_at.isoformat() }}">
-										{{ _("Uploaded %(time)s by %(author)s") % { "time" : locale.format_date(r.created_at), "author" : r.author } }}
-									</a>
-								</li>
+					{% for i, r in enumerate(revisions) %}
+						<tr>
+							{% if i == 0 %}
+								<th scope="row">{{ _("Other Revisions") }}</th>
+							{% else %}
+								<td></td>
 							{% end %}
-						</ul>
-					</dd>
+
+							<td>
+								<a href="{{ r.url }}?action=detail&revision={{ r.created_at.isoformat() }}">
+									{{ _("Uploaded %(time)s by %(author)s") % { "time" : locale.format_date(r.created_at), "author" : r.author } }}
+								</a>
+							</td>
+						</tr>
+					{% end %}
 				{% end %}
-			</dl>
+			</table>
+		</div>
+	</section>
 
-			<h6>{{ _("Delete") }}</h6>
+	<section class="section">
+		<div class="container">
+			<h6 class="title is-6">{{ _("Delete") }}</h6>
 
-			<div class="d-grid">
-				<a class="btn btn-danger mb-5" href="{{ file.url }}/_delete">
+			<div class="block">
+				<a class="button is-danger" href="{{ file.url }}/_delete">
 					{{ _("Delete") }}
 				</a>
 			</div>
 
-			<h6>{{ _("Upload Newer Revision") }}</h6>
+			<h6 class="title is-6">{{ _("Upload Newer Revision") }}</h6>
 
 			<form method="POST" action="/docs/_upload" enctype="multipart/form-data">
 				{% raw xsrf_form_html() %}
@@ -92,17 +137,32 @@
 				<input type="hidden" name="path" value="{{ file.path }}">
 				<input type="hidden" name="filename" value="{{ file.filename }}">
 
-				<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>
-
-					<small class="form-text text-muted">
+				<div class="field">
+					<div class="control">
+						<div class="file is-boxed">
+							<label class="file-label">
+								<input class="file-input" type="file" name="file">
+								<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>
+
+					<p class="help">
 						{{ _("Uploading a new file to replaces this one to fix any errata in the current version") }}
-					</small>
+					</p>
 				</div>
 
-				<div class="d-grid">
-					<input class="btn btn-primary" type="submit" value="{{ _("Upload") }}">
+				<div class="field">
+					<div class="control">
+						<input class="button is-primary" type="submit" value="{{ _("Upload") }}">
+					</div>
 				</div>
 			</form>
 		</div>
diff --git a/src/web/docs.py b/src/web/docs.py
index 41fc6332..e0ee6733 100644
--- a/src/web/docs.py
+++ b/src/web/docs.py
@@ -283,7 +283,7 @@ class UploadHandler(base.BaseHandler):
 		except TypeError as e:
 			raise e
 
-		self.redirect("%s/_files" % path)
+		self.redirect("/docs%s/_files" % path)
 
 
 class WatchHandler(base.BaseHandler):