lens @ 13fd911873a7df311544b1ec916c98ee05c91bbc

ref: Relayout settings page a bit

Settings was all over the place with its layout. Now it better fits
mobile.
diff --git a/scss/main.scss b/scss/main.scss
index 1f5da5730b43d3dc4eb64693b9da8af5ee3927e4..c4a4f23f0709f1ca0a5287c4aa817ba7ae55d2cb 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -58,12 +58,10 @@ }
 
 .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 3d1af81f75a942aaf7221271e19eb82aebd5d7c9..4439c77c99d834bc2c71f9b277a85c097f3ae8f9 100644
--- a/templates/settings.qtpl
+++ b/templates/settings.qtpl
@@ -10,55 +10,55 @@
 {% 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 %}