lens @ 13fd911873a7df311544b1ec916c98ee05c91bbc

ref: Relayout settings page a bit

Settings was all over the place with its layout. Now it better fits
mobile.
  1diff --git a/scss/main.scss b/scss/main.scss
  2index 1f5da5730b43d3dc4eb64693b9da8af5ee3927e4..c4a4f23f0709f1ca0a5287c4aa817ba7ae55d2cb 100644
  3--- a/scss/main.scss
  4+++ b/scss/main.scss
  5@@ -58,12 +58,10 @@ }
  6 
  7 .container {
  8     margin-top: 30px;
  9-
 10-    @include until($breakpoint) {
 11-        margin-left: 15px;
 12-        margin-right: 15px;
 13-    }
 14+    margin-left: 15px;
 15+    margin-right: 15px;
 16 }
 17+
 18 
 19 .card {
 20     margin: 5px;
 21diff --git a/templates/settings.qtpl b/templates/settings.qtpl
 22index 3d1af81f75a942aaf7221271e19eb82aebd5d7c9..4439c77c99d834bc2c71f9b277a85c097f3ae8f9 100644
 23--- a/templates/settings.qtpl
 24+++ b/templates/settings.qtpl
 25@@ -10,55 +10,55 @@
 26 {% func (p *SettingsPage) Title() %}Settings{% endfunc %}
 27 
 28 {% func (p *SettingsPage) Content() %}
 29-<div class="columns">
 30-    <div class="column is-one-third">
 31-        <form action="/settings/", method="post">
 32-            <div class="field">
 33-                <div class="control">
 34-                    <label class="checkbox text-size-2">
 35-                        <input type="checkbox" id="showMode" name="showMode" {% if p.Settings.ShowMode %}checked{% endif %}>
 36-                        Show File Modes
 37-                    </label>
 38-                </div>
 39-            </div>
 40-            <div class="field">
 41-                <div class="control">
 42-                    <label class="checkbox text-size-2">
 43-                        <input type="checkbox" id="showOwner" name="showOwner" {% if p.Settings.ShowOwner %}checked{% endif %}>
 44-                        Show File Owner
 45-                    </label>
 46-                </div>
 47+<div>
 48+    <h1 class="title text-size-1">Medias</h1>
 49+    <form action="/settings/", method="post">
 50+        <div class="field">
 51+            <div class="control">
 52+                <label class="checkbox text-size-2">
 53+                    <input type="checkbox" id="showMode" name="showMode" {% if p.Settings.ShowMode %}checked{% endif %}>
 54+                    Show File Modes
 55+                </label>
 56             </div>
 57-            <div class="field">
 58-                <div class="control">
 59-                    <label class="checkbox text-size-2">
 60-                        <input type="checkbox" id="preloadVideoMetadata" name="preloadVideoMetadata" {% if p.Settings.PreloadVideoMetadata %}checked{% endif %}>
 61-                        Preload video metadata
 62-                    </label>
 63-                </div>
 64+        </div>
 65+        <div class="field">
 66+            <div class="control">
 67+                <label class="checkbox text-size-2">
 68+                    <input type="checkbox" id="showOwner" name="showOwner" {% if p.Settings.ShowOwner %}checked{% endif %}>
 69+                    Show File Owner
 70+                </label>
 71             </div>
 72-            <div class="field">
 73-                <input class="button" value="save" type="submit">
 74+        </div>
 75+        <div class="field">
 76+            <div class="control">
 77+                <label class="checkbox text-size-2">
 78+                    <input type="checkbox" id="preloadVideoMetadata" name="preloadVideoMetadata" {% if p.Settings.PreloadVideoMetadata %}checked{% endif %}>
 79+                    Preload video metadata
 80+                </label>
 81             </div>
 82-        </form>
 83-    </div>
 84-    <div class="column">
 85+        </div>
 86+        <div class="field">
 87+            <input class="button" value="save" type="submit">
 88+        </div>
 89+    </form>
 90+</div>
 91+<div>
 92+    <h1 class="title text-size-1">Users</h1>
 93     {% for _, user := range p.Users %}
 94-        <div class="panel-block field">
 95-            <div class="columns wide-column is-gapless is-mobile">
 96-                <div class="column text-size-2">
 97-                    {%s user.Username %}
 98-                </div>
 99-                <div class="column text-size-2">
100-                    {%s user.Path %}
101-                </div>
102-                <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>
103+    <div class="panel-block field">
104+        <div class="columns wide-column is-gapless is-mobile">
105+            <div class="column text-size-2">
106+                {%s user.Username %}
107+            </div>
108+            <div class="column text-size-2">
109+                {%s user.Path %}
110             </div>
111+            <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>
112         </div>
113+    </div>
114     {% endfor %}
115-        <div class="field">
116-            <a href="/users/" class="button">create</a>
117-        </div>
118+    <div class="field">
119+        <a href="/users/" class="button">create</a>
120     </div>
121 </div>
122 {% endfunc %}