From 7ff5764f952e36af0183bf5b61b2190421947f76 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Tue, 26 May 2020 01:16:21 +0200
Subject: [PATCH] Add per-browser boxed layout setting

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/js/footer.js   | 20 +++++++++++++++++++-
 scripts/pi-hole/js/settings.js | 21 ++++++++++++++++++++-
 scripts/pi-hole/php/header.php | 31 +------------------------------
 settings.php                   | 12 ++++++++----
 4 files changed, 48 insertions(+), 36 deletions(-)

diff --git a/scripts/pi-hole/js/footer.js b/scripts/pi-hole/js/footer.js
index 05fe1097..9802121a 100644
--- a/scripts/pi-hole/js/footer.js
+++ b/scripts/pi-hole/js/footer.js
@@ -130,8 +130,24 @@ function applyCheckboxRadioStyle() {
   if (chkboxStyle === null) {
     chkboxStyle = "material-blue";
   }
+
   $("input[type='radio'],input[type='checkbox']").parent().removeClass();
-  $("input[type='radio'],input[type='checkbox']").parent().addClass("icheck-" + chkboxStyle);
+  $("input[type='radio'],input[type='checkbox']")
+    .parent()
+    .addClass("icheck-" + chkboxStyle);
+}
+
+function applyBoxedLayout() {
+  var boxedlayout = localStorage.getItem("boxedlayout");
+  if (boxedlayout === null) {
+    boxedlayout = true;
+  }
+
+  if (boxedlayout === true) {
+    $("body").addClass("layout-boxed");
+  } else {
+    $("body").removeClass("layout-boxed");
+  }
 }
 
 $(function () {
@@ -146,7 +162,9 @@ $(function () {
     $("#cookieInfo").show();
   }
 
+  // Apply per-browser styling settings
   applyCheckboxRadioStyle();
+  applyBoxedLayout();
 
   // Run check immediately after page loading ...
   checkMessages();
diff --git a/scripts/pi-hole/js/settings.js b/scripts/pi-hole/js/settings.js
index de0d994d..482ead73 100644
--- a/scripts/pi-hole/js/settings.js
+++ b/scripts/pi-hole/js/settings.js
@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global utils:false */
+/* global utils:false, applyCheckboxRadioStyle:false, applyBoxedLayout:false */
 
 $(function () {
   $("[data-static]").on("click", function () {
@@ -281,10 +281,29 @@ $(function () {
   if (iCheckStyle === null) {
     iCheckStyle = "material-blue";
   }
+
   iCheckSelect.val(iCheckStyle);
 
   iCheckSelect.change(function () {
     localStorage.setItem("theme_icheck", iCheckSelect.val());
     applyCheckboxRadioStyle();
   });
+
+  // boxed style toggle
+  var boxedlayout = $("#boxedlayout");
+  chkboxData = localStorage.getItem("boxedlayout");
+
+  if (chkboxData !== null) {
+    // Restore checkbox state
+    boxedlayout.prop("checked", chkboxData === "true");
+  } else {
+    // Initialize checkbox
+    boxedlayout.prop("checked", true);
+    localStorage.setItem("boxedlayout", true);
+  }
+
+  boxedlayout.click(function () {
+    localStorage.setItem("boxedlayout", boxedlayout.prop("checked"));
+    applyBoxedLayout();
+  });
 });
diff --git a/scripts/pi-hole/php/header.php b/scripts/pi-hole/php/header.php
index 56468546..ddbe78b8 100644
--- a/scripts/pi-hole/php/header.php
+++ b/scripts/pi-hole/php/header.php
@@ -130,35 +130,6 @@
         $token = $_SESSION['token'];
     }
 
-    if(isset($setupVars['WEBUIBOXEDLAYOUT']))
-    {
-        if($setupVars['WEBUIBOXEDLAYOUT'] === "boxed")
-        {
-            $boxedlayout = true;
-        }
-        else
-        {
-            $boxedlayout = false;
-        }
-    }
-    else
-    {
-        $boxedlayout = true;
-    }
-
-    // Override layout setting if layout is changed via Settings page
-    if(isset($_POST["field"]))
-    {
-        if($_POST["field"] === "webUI" && isset($_POST["boxedlayout"]))
-        {
-            $boxedlayout = true;
-        }
-        elseif($_POST["field"] === "webUI" && !isset($_POST["boxedlayout"]))
-        {
-            $boxedlayout = false;
-        }
-    }
-
     function pidofFTL()
     {
         return shell_exec("pidof pihole-FTL");
@@ -227,7 +198,7 @@
     <script src="scripts/vendor/moment.min.js"></script>
     <script src="scripts/vendor/Chart.min.js"></script>
 </head>
-<body class="hold-transition sidebar-mini <?php if($boxedlayout){ ?>layout-boxed<?php } ?>">
+<body class="hold-transition sidebar-mini">
 <noscript>
     <!-- JS Warning -->
     <div>
diff --git a/settings.php b/settings.php
index be6eb6e2..d0dd5bc8 100644
--- a/settings.php
+++ b/settings.php
@@ -1113,10 +1113,6 @@ if (isset($_GET['tab']) && in_array($_GET['tab'], array("sysadmin", "adlists", "
                                             <div class="col-md-12">
                                                 <h4>Interface appearance</h4>
                                                 <?php theme_selection(); ?>
-                                                <div>
-                                                    <input type="checkbox" name="boxedlayout" id="boxedlayout" value="yes" <?php if ($boxedlayout){ ?>checked<?php } ?>>
-                                                    <label for="boxedlayout"><strong>Use boxed layout (for large screens)</strong></label>
-                                                </div>
                                                 <h4>CPU Temperature Unit</h4>
                                                 <div>
                                                     <input type="radio" name="tempunit" value="C" id="tempunit_C" <?php if ($temperatureunit === "C"){ ?>checked<?php } ?>>
@@ -1182,6 +1178,14 @@ if (isset($_GET['tab']) && in_array($_GET['tab'], array("sysadmin", "adlists", "
                                             </select>
                                         </div>
                                     </div>
+                                    <div class="row">
+                                        <div class="col-md-12">
+                                            <div>
+                                                <input type="checkbox" id="boxedlayout">
+                                                <label for="boxedlayout"><strong>Use boxed layout (for large screens)</strong></label>
+                                            </div>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>