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 70f8ce1f771aee2f7cf3491320e1e83afef970e5..ca01a431540d3ed81620e45b69ef043c91f1c751 100644 (file)
--- 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 %}