From 58ff3476bbc8719d17f3216641774f3156c3f20c Mon Sep 17 00:00:00 2001
From: Skylar Ittner <admin@netsyms.com>
Date: Fri, 3 Apr 2020 13:49:40 -0600
Subject: [PATCH] Settings: Center UI in middle of screen with max width (#36)

---
 www/pages/settings.html | 150 ++++++++++++++++++++++------------------
 1 file changed, 81 insertions(+), 69 deletions(-)

diff --git a/www/pages/settings.html b/www/pages/settings.html
index 8325ab1..97b742d 100644
--- a/www/pages/settings.html
+++ b/www/pages/settings.html
@@ -18,81 +18,93 @@
 
 
     <div class="page-content">
-        <div class="list media-list no-hairlines no-margin-top tablet-inset">
-            <ul>
-                {{#each settings}}
-                <li>
-                    {{#if link}}
-                    <div class="item-content item-link" data-setting="{{setting}}" onclick="{{onclick}}">
-                        <div class="item-inner">
-                            <div class="item-title-row">
-                                <div class="item-title">{{title}}</div>
-                            </div>
-                            <div class="item-text">{{text}}</div>
-                        </div>
-                    </div>
-                    {{else}}
-                    {{#if toggle}}
-                    <div class="item-content" data-setting="{{setting}}">
-                        <div class="item-inner">
-                            <div style="display: flex; justify-content: between;">
-                                <div class="item-title">
-                                    {{title}}
-                                </div>
-                                <div class="item-after" onclick="{{onclick}}">
-                                    <label class="toggle toggle-init">
-                                        <input type="checkbox" {{#if checked}}checked{{/if}}>
-                                               <span class="toggle-icon"></span>
-                                    </label>
+        <div class="row justify-content-center">
+            <div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
+                <div class="list media-list no-hairlines no-margin-top no-margin-bottom tablet-inset">
+                    <ul>
+                        {{#each settings}}
+                        <li>
+                            {{#if link}}
+                            <div class="item-content item-link" data-setting="{{setting}}" onclick="{{onclick}}">
+                                <div class="item-inner">
+                                    <div class="item-title-row">
+                                        <div class="item-title">{{title}}</div>
+                                    </div>
+                                    <div class="item-text">{{text}}</div>
                                 </div>
                             </div>
-                            <div class="item-text">{{text}}</div>
-                        </div>
-                    </div>
-                    {{else}}
-                    {{#if slider}}
-                    <div class="item-content" data-setting="{{setting}}">
-                        <div class="item-inner">
-                            <div class="item-title" style="background-color: rgba(0,0,0,0);">
-                                {{title}}
-                            </div>
-                            <div class="item-subtitle padding-horizontal padding-top">
-                                <div class="range-slider range-slider-init padding-top margin-top" data-label="true">
-                                    <input type="range" min="{{min}}" max="{{max}}" step="{{step}}" value="{{value}}">
+                            {{else}}
+                            {{#if toggle}}
+                            <div class="item-content" data-setting="{{setting}}">
+                                <div class="item-inner">
+                                    <div style="display: flex; justify-content: between;">
+                                        <div class="item-title">
+                                            {{title}}
+                                        </div>
+                                        <div class="item-after" onclick="{
+                                                    {
+                                                        onclick
+                                                    }
+                                                }">
+                                            <label class="toggle toggle-init">
+                                                <input type="checkbox" {{#if checked}}checked{{/if}}>
+                                                       <span class="toggle-icon"></span>
+                                            </label>
+                                        </div>
+                                    </div>
+                                    <div class="item-text">{{text}}</div>
                                 </div>
                             </div>
-                        </div>
-                    </div>
-                    {{else}}
-                    {{#if select}}
-                    <a class="item-link smart-select smart-select-init" data-open-in="popover" data-setting="{{setting}}">
-                        <select>
-                            {{#each options}}
-                            <option value="{{value}}"{{#if selected}} selected{{/if}}>{{label}}</option>
-                            {{/each}}
-                        </select>
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title">{{title}}</div>
+                            {{else}}
+                            {{#if slider}}
+                            <div class="item-content" data-setting="{{setting}}">
+                                <div class="item-inner">
+                                    <div class="item-title" style="background-color: rgba(0,0,0,0);">
+                                        {{title}}
+                                    </div>
+                                    <div class="item-subtitle padding-horizontal padding-top">
+                                        <div class="range-slider range-slider-init padding-top margin-top" data-label="true">
+                                            <input type="range" min="{{min}}" max="{{max}}" step="{{step}}" value="{{value}}">
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
-                        </div>
-                    </a>
-                    {{else}}
-                    <div class="item-content" data-setting="{{setting}}" onclick="{{onclick}}">
-                        <div class="item-inner">
-                            <div class="item-title-row">
-                                <div class="item-title">{{title}}</div>
+                            {{else}}
+                            {{#if select}}
+                            <a class="item-link smart-select smart-select-init" data-open-in="popover" data-setting="{{setting}}">
+                                <select>
+                                    {{#each options}}
+                                    <option value="{{value}}"{{#if selected}} selected{{/if}}>{{label}}</option>
+                                    {{/each}}
+                                </select>
+                                <div class="item-content">
+                                    <div class="item-inner">
+                                        <div class="item-title">{{title}}</div>
+                                    </div>
+                                </div>
+                            </a>
+                            {{else}}
+                            <div class="item-content" data-setting="{{setting}}" onclick="{
+                                        {
+                                            onclick
+                                        }
+                                    }">
+                                <div class="item-inner">
+                                    <div class="item-title-row">
+                                        <div class="item-title">{{title}}</div>
+                                    </div>
+                                    <div class="item-text">{{text}}</div>
+                                </div>
                             </div>
-                            <div class="item-text">{{text}}</div>
-                        </div>
-                    </div>
-                    {{/if}}
-                    {{/if}}
-                    {{/if}}
-                    {{/if}}
-                </li>
-                {{/each}}
-            </ul>
+                            {{/if}}
+                            {{/if}}
+                            {{/if}}
+                            {{/if}}
+                        </li>
+                        {{/each}}
+                    </ul>
+                </div>
+            </div>
         </div>
     </div>