From 13fd911873a7df311544b1ec916c98ee05c91bbc Mon Sep 17 00:00:00 2001
From: Gabriel Arakaki Giovanini <mail@gabrielgio.me>
Date: Sat, 19 Aug 2023 16:56:50 +0200
Subject: ref: Relayout settings page a bit

Settings was all over the place with its layout. Now it better fits
mobile.
---
 scss/main.scss          |  8 ++---
 templates/settings.qtpl | 84 ++++++++++++++++++++++++-------------------------
 2 files changed, 45 insertions(+), 47 deletions(-)

diff --git a/scss/main.scss b/scss/main.scss
index 1f5da57..c4a4f23 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -58,13 +58,11 @@ a.is-danger {
 
 .container {
     margin-top: 30px;
-
-    @include until($breakpoint) {
-        margin-left: 15px;
-        margin-right: 15px;
-    }
+    margin-left: 15px;
+    margin-right: 15px;
 }
 
+
 .card {
     margin: 5px;
 }
diff --git a/templates/settings.qtpl b/templates/settings.qtpl
index 3d1af81..4439c77 100644
--- a/templates/settings.qtpl
+++ b/templates/settings.qtpl
@@ -10,55 +10,55 @@ type SettingsPage struct {
 {% func (p *SettingsPage) Title() %}Settings{% endfunc %}
 
 {% func (p *SettingsPage) Content() %}
-<div class="columns">
-    <div class="column is-one-third">
-        <form action="/settings/", method="post">
-            <div class="field">
-                <div class="control">
-                    <label class="checkbox text-size-2">
-                        <input type="checkbox" id="showMode" name="showMode" {% if p.Settings.ShowMode %}checked{% endif %}>
-                        Show File Modes
-                    </label>
-                </div>
-            </div>
-            <div class="field">
-                <div class="control">
-                    <label class="checkbox text-size-2">
-                        <input type="checkbox" id="showOwner" name="showOwner" {% if p.Settings.ShowOwner %}checked{% endif %}>
-                        Show File Owner
-                    </label>
-                </div>
+<div>
+    <h1 class="title text-size-1">Medias</h1>
+    <form action="/settings/", method="post">
+        <div class="field">
+            <div class="control">
+                <label class="checkbox text-size-2">
+                    <input type="checkbox" id="showMode" name="showMode" {% if p.Settings.ShowMode %}checked{% endif %}>
+                    Show File Modes
+                </label>
             </div>
-            <div class="field">
-                <div class="control">
-                    <label class="checkbox text-size-2">
-                        <input type="checkbox" id="preloadVideoMetadata" name="preloadVideoMetadata" {% if p.Settings.PreloadVideoMetadata %}checked{% endif %}>
-                        Preload video metadata
-                    </label>
-                </div>
+        </div>
+        <div class="field">
+            <div class="control">
+                <label class="checkbox text-size-2">
+                    <input type="checkbox" id="showOwner" name="showOwner" {% if p.Settings.ShowOwner %}checked{% endif %}>
+                    Show File Owner
+                </label>
             </div>
-            <div class="field">
-                <input class="button" value="save" type="submit">
+        </div>
+        <div class="field">
+            <div class="control">
+                <label class="checkbox text-size-2">
+                    <input type="checkbox" id="preloadVideoMetadata" name="preloadVideoMetadata" {% if p.Settings.PreloadVideoMetadata %}checked{% endif %}>
+                    Preload video metadata
+                </label>
             </div>
-        </form>
-    </div>
-    <div class="column">
+        </div>
+        <div class="field">
+            <input class="button" value="save" type="submit">
+        </div>
+    </form>
+</div>
+<div>
+    <h1 class="title text-size-1">Users</h1>
     {% for _, user := range p.Users %}
-        <div class="panel-block field">
-            <div class="columns wide-column is-gapless is-mobile">
-                <div class="column text-size-2">
-                    {%s user.Username %}
-                </div>
-                <div class="column text-size-2">
-                    {%s user.Path %}
-                </div>
-                <div class="column  has-text-right"><a href="/users?userId={%s FromUInttoString(&user.ID) %}">Edit</a> <a href="/users/delete?userId={%s FromUInttoString(&user.ID) %}" class="is-danger">Delete</a></div>
+    <div class="panel-block field">
+        <div class="columns wide-column is-gapless is-mobile">
+            <div class="column text-size-2">
+                {%s user.Username %}
+            </div>
+            <div class="column text-size-2">
+                {%s user.Path %}
             </div>
+            <div class="column  has-text-right"><a href="/users?userId={%s FromUInttoString(&user.ID) %}">Edit</a> <a href="/users/delete?userId={%s FromUInttoString(&user.ID) %}" class="is-danger">Delete</a></div>
         </div>
+    </div>
     {% endfor %}
-        <div class="field">
-            <a href="/users/" class="button">create</a>
-        </div>
+    <div class="field">
+        <a href="/users/" class="button">create</a>
     </div>
 </div>
 {% endfunc %}
-- 
cgit v1.2.3