Add fluid width option

Terrance · Jan 2, 2016 · 69b6eb5 · 69b6eb5
1 parent 8e6e88b
commit 69b6eb5
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/Homely/res/html/homely.html b/Homely/res/html/homely.html
@@ -7,7 +7,7 @@
         <link rel="icon" href="../img/icon-16.png">
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     </head>
-    <body class="container">
+    <body>
         <nav class="navbar navbar-default" role="navigation">
             <div class="container-fluid">
                 <div class="navbar-header">
@@ -470,22 +470,29 @@ <h4 class="modal-title"><i class="fa fa-magic"></i>&nbsp; Customise</h4>
                             </div>
                             <div class="tab-pane form-horizontal" id="settings-tab-style">
                                 <div class="form-group">
-                                    <label for="settings-style-font" class="col-sm-3 control-label">Font face</label>
+                                    <label for="settings-style-font" class="col-sm-3 control-label">Font</label>
                                     <div class="col-sm-8">
                                         <select id="settings-style-font" class="form-control"></select>
                                         <p class="help-block">The font used for all text on the page.</p>
                                     </div>
                                 </div>
                                 <div class="form-group">
-                                    <label class="col-sm-3 control-label">Top bar</label>
+                                    <label class="col-sm-3 control-label">Layout</label>
                                     <div class="col-sm-8">
+                                        <label class="checkbox-inline">
+                                            <input id="settings-style-fluid" type="checkbox">
+                                            <span>Fluid width</span>
+                                        </label>
+                                        <p class="help-block">With a fluid layout, links and bookmarks will widen to fill the page.</p>
+                                    </div>
+                                    <div class="col-sm-offset-3 col-sm-8">
                                         <label class="checkbox-inline">
                                             <input id="settings-style-topbar-fix" type="checkbox">
-                                            <span>Fix to top of page</span>
+                                            <span>Fixed top bar</span>
                                         </label>
                                         <label class="checkbox-inline">
                                             <input id="settings-style-topbar-dark" type="checkbox">
-                                            <span>Use dark style</span>
+                                            <span>Use dark bar</span>
                                         </label>
                                         <label class="checkbox-inline">
                                             <input id="settings-style-topbar-labels" type="checkbox">

diff --git a/Homely/res/js/homely.js b/Homely/res/js/homely.js
@@ -236,6 +236,7 @@ $(document).ready(function() {
         },
         "style": {
             "font": "Segoe UI",
+            "fluid": false,
             "topbar": {
                 "fix": false,
                 "dark": false,
@@ -287,6 +288,7 @@ $(document).ready(function() {
                    + "    font-family: '" + settings.style["font"] + "';\n"
                    + "}");
         }
+        $("body").addClass(settings.style["fluid"] ? "container-fluid" : "container");
         if (settings.style["topbar"].fix) {
             $("body").addClass("topbar-fix");
             $("nav").addClass("navbar-fixed-top");
@@ -2022,6 +2024,7 @@ $(document).ready(function() {
                                                   .prop("disabled", !settings.general["weather"].show);
             $("#settings-general-proxy").prop("checked", settings.general["proxy"]);
             $("#settings-style-font").val(settings.style["font"]);
+            $("#settings-style-fluid").prop("checked", settings.style["fluid"]);
             $("#settings-style-topbar-fix").prop("checked", settings.style["topbar"].fix);
             $("#settings-style-topbar-dark").prop("checked", settings.style["topbar"].dark);
             $("#settings-style-topbar-labels").prop("checked", settings.style["topbar"].labels);
@@ -2400,6 +2403,7 @@ $(document).ready(function() {
             settings.general["proxy"] = $("#settings-general-proxy").prop("checked");
             if (!settings.general["proxy"]) revoke("proxy");
             settings.style["font"] = $("#settings-style-font").val();
+            settings.style["fluid"] = $("#settings-style-fluid").prop("checked");
             settings.style["topbar"] = {
                 fix: $("#settings-style-topbar-fix").prop("checked"),
                 dark: $("#settings-style-topbar-dark").prop("checked"),