From 44e1a9b8cd69358e803a7553e87518289e671f52 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Wed, 17 Jan 2024 19:17:41 -0300
Subject: [PATCH 01/17] Move code used to format icons to a dedicated function

also surround the icons with a SPAN tag.

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/js/settings-advanced.js | 26 ++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/scripts/pi-hole/js/settings-advanced.js b/scripts/pi-hole/js/settings-advanced.js
index 9f73bf74..a2dd44f8 100644
--- a/scripts/pi-hole/js/settings-advanced.js
+++ b/scripts/pi-hole/js/settings-advanced.js
@@ -24,6 +24,22 @@ function addAllowedValues(allowed) {
   }
 }
 
+function boxIcons(value) {
+  return (
+    '<span class="box-icons">' +
+    (value.modified
+      ? '&nbsp;&nbsp;<i class="far fa-edit text-light-blue" title="Modified from default"></i>'
+      : "") +
+    (value.flags.restart_dnsmasq
+      ? '&nbsp;&nbsp;<i class="fas fa-redo text-orange" title="Setting requires FTL restart on change"></i>'
+      : "") +
+    (value.flags.env_var
+      ? '&nbsp;&nbsp;<i class="fas fa-lock text-orange" title="Settings overwritten by an environmental variable are read-only"></i>'
+      : "") +
+    "</span>"
+  );
+}
+
 function generateRow(topic, key, value) {
   // If the value is an object, we need to recurse
   if (!("description" in value)) {
@@ -44,15 +60,7 @@ function generateRow(topic, key, value) {
     (value.modified ? "true" : "false") +
     '">' +
     key +
-    (value.modified
-      ? '&nbsp;&nbsp;<i class="far fa-edit text-light-blue" title="Modified from default"></i>'
-      : "") +
-    (value.flags.restart_dnsmasq
-      ? '&nbsp;&nbsp;<i class="fas fa-redo text-orange" title="Setting requires FTL restart on change"></i>'
-      : "") +
-    (value.flags.env_var
-      ? '&nbsp;&nbsp;<i class="fas fa-lock text-orange" title="Settings overwritten by an environmental variable are read-only"></i>'
-      : "") +
+    boxIcons(value) +
     "</h3>" +
     "<p>" +
     utils.escapeHtml(value.description).replaceAll("\n", "<br>") +

From e9df0064894d565e12bd39f064acfa929dd9fd8a Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Wed, 17 Jan 2024 19:37:40 -0300
Subject: [PATCH 02/17] Move value details and layout to a dedicated function

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/js/settings-advanced.js | 92 ++++++++++++++-----------
 1 file changed, 51 insertions(+), 41 deletions(-)

diff --git a/scripts/pi-hole/js/settings-advanced.js b/scripts/pi-hole/js/settings-advanced.js
index a2dd44f8..b110c972 100644
--- a/scripts/pi-hole/js/settings-advanced.js
+++ b/scripts/pi-hole/js/settings-advanced.js
@@ -40,34 +40,8 @@ function boxIcons(value) {
   );
 }
 
-function generateRow(topic, key, value) {
-  // If the value is an object, we need to recurse
-  if (!("description" in value)) {
-    Object.keys(value).forEach(function (subkey) {
-      var subvalue = value[subkey];
-      generateRow(topic, key + "." + subkey, subvalue);
-    });
-    return;
-  }
-
-  // else: we have a setting we can display
-  var box =
-    '<div class="box">' +
-    '<div class="box-header">' +
-    '<h3 class="box-title" data-key="' +
-    key +
-    '" data-modified="' +
-    (value.modified ? "true" : "false") +
-    '">' +
-    key +
-    boxIcons(value) +
-    "</h3>" +
-    "<p>" +
-    utils.escapeHtml(value.description).replaceAll("\n", "<br>") +
-    "</p>" +
-    "</div>" +
-    '<div class="box-body">' +
-    '<div class="form-group">';
+function valueDetails(key, value) {
+  // Define default hint text
   let defaultValueHint = "";
   if (value.modified) {
     defaultValueHint = "";
@@ -99,16 +73,19 @@ function generateRow(topic, key, value) {
     }
   }
 
+  // Define extraAttributes, if needed
   let extraAttributes = "";
   if (value.flags.env_var) {
     extraAttributes = " disabled";
   }
 
+  // Format the output depending on the value type
+  let content = "";
   switch (value.type) {
     case "IPv4 address":
     case "IPv6 address":
     case "string": {
-      box +=
+      content +=
         '<label class="col-sm-4 control-label">Value (string)</label>' +
         '<div class="col-sm-8">' +
         '<input type="text" class="form-control" value="' +
@@ -126,7 +103,7 @@ function generateRow(topic, key, value) {
     }
 
     case "boolean": {
-      box +=
+      content +=
         '<div><input type="checkbox" ' +
         (value.value ? " checked" : "") +
         ' id="' +
@@ -146,7 +123,7 @@ function generateRow(topic, key, value) {
     }
 
     case "double": {
-      box +=
+      content +=
         '<label class="col-sm-4 control-label">Value</label>' +
         '<div class="col-sm-8">' +
         '<input type="number" class="form-control" value="' +
@@ -163,7 +140,7 @@ function generateRow(topic, key, value) {
     }
 
     case "integer": {
-      box +=
+      content +=
         '<label class="col-sm-4 control-label">Value (integer)</label>' +
         '<div class="col-sm-8">' +
         '<input type="number" step="1" class="form-control" value="' +
@@ -180,7 +157,7 @@ function generateRow(topic, key, value) {
     }
 
     case "unsigned integer": {
-      box +=
+      content +=
         '<label class="col-sm-4 control-label">Value (unsigned integer)</label>' +
         '<div class="col-sm-8">' +
         '<input type="number" step="1" min="0" class="form-control" value="' +
@@ -197,7 +174,7 @@ function generateRow(topic, key, value) {
     }
 
     case "unsigned integer (16 bit)": {
-      box +=
+      content +=
         '<label class="col-sm-4 control-label">Value (unsigned 16bit integer)</label>' +
         '<div class="col-sm-8">' +
         '<input type="number" step="1" min="0" max="65535" class="form-control" value="' +
@@ -214,7 +191,7 @@ function generateRow(topic, key, value) {
     }
 
     case "string array": {
-      box +=
+      content +=
         '<label class="col-sm-5 control-label">Values (one item per line)</label>' +
         '<div class="col-sm-7">' +
         '<textarea class="form-control field-sizing-content" data-key="' +
@@ -233,7 +210,7 @@ function generateRow(topic, key, value) {
 
     case "enum (unsigned integer)": // fallthrough
     case "enum (string)": {
-      box +=
+      content +=
         '<label class="col-sm-4 control-label">Selected Option</label>' +
         '<div class="col-sm-8">' +
         '<select class="form-control" data-key="' +
@@ -242,7 +219,7 @@ function generateRow(topic, key, value) {
         extraAttributes +
         ">";
       value.allowed.forEach(function (option) {
-        box +=
+        content +=
           '<option value="' +
           option.item +
           '"' +
@@ -251,7 +228,7 @@ function generateRow(topic, key, value) {
           option.item +
           "</option>";
       });
-      box +=
+      content +=
         "</select> " +
         defaultValueHint +
         "</div>" +
@@ -263,7 +240,7 @@ function generateRow(topic, key, value) {
     }
 
     case "password (write-only string)": {
-      box +=
+      content +=
         '<label class="col-sm-4 control-label">Value (string)</label>' +
         '<div class="col-sm-8">' +
         '<input type="password" class="form-control" value="' +
@@ -281,11 +258,44 @@ function generateRow(topic, key, value) {
     }
 
     default: {
-      box += "TYPE " + value.type + " NOT DEFINED";
+      content += "TYPE " + value.type + " NOT DEFINED";
     }
   }
 
-  box += "</div></div> ";
+  return content;
+}
+
+function generateRow(topic, key, value) {
+  // If the value is an object, we need to recurse
+  if (!("description" in value)) {
+    Object.keys(value).forEach(function (subkey) {
+      var subvalue = value[subkey];
+      generateRow(topic, key + "." + subkey, subvalue);
+    });
+    return;
+  }
+
+  // else: we have a setting we can display
+  var box =
+    '<div class="box">' +
+    '<div class="box-header">' +
+    '<h3 class="box-title" data-key="' +
+    key +
+    '" data-modified="' +
+    (value.modified ? "true" : "false") +
+    '">' +
+    key +
+    boxIcons(value) +
+    "</h3>" +
+    "<p>" +
+    utils.escapeHtml(value.description).replaceAll("\n", "<br>") +
+    "</p>" +
+    "</div>" +
+    '<div class="box-body">' +
+    '<div class="form-group">' +
+    valueDetails(key, value) +
+    "</div></div></div> ";
+
   var topKey = key.split(".")[0];
   var elem = $("#advanced-content-" + topKey + "-flex");
   elem.append(box);

From 84bd977f876db00ebfe31fa0ae13dc3d06c152b6 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Wed, 17 Jan 2024 20:29:00 -0300
Subject: [PATCH 03/17] Add a few CSS classes

- add class `row` to form-group (because it contains columns) and move
  the tag to the details function
- add class `col-sm-12` to boolean values
- add new class `settings-box` to allow targeting only settings boxes

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/js/settings-advanced.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/scripts/pi-hole/js/settings-advanced.js b/scripts/pi-hole/js/settings-advanced.js
index b110c972..44e0a31a 100644
--- a/scripts/pi-hole/js/settings-advanced.js
+++ b/scripts/pi-hole/js/settings-advanced.js
@@ -104,6 +104,7 @@ function valueDetails(key, value) {
 
     case "boolean": {
       content +=
+        '<div class="col-sm-12">' +
         '<div><input type="checkbox" ' +
         (value.value ? " checked" : "") +
         ' id="' +
@@ -116,7 +117,7 @@ function valueDetails(key, value) {
         key +
         '-checkbox">Enabled ' +
         defaultValueHint +
-        "</label>" +
+        "</label></div>" +
         " </div>";
 
       break;
@@ -262,7 +263,7 @@ function valueDetails(key, value) {
     }
   }
 
-  return content;
+  return '<div class="form-group row">' + content + "</div>";
 }
 
 function generateRow(topic, key, value) {
@@ -292,9 +293,8 @@ function generateRow(topic, key, value) {
     "</p>" +
     "</div>" +
     '<div class="box-body">' +
-    '<div class="form-group">' +
     valueDetails(key, value) +
-    "</div></div></div> ";
+    "</div></div> ";
 
   var topKey = key.split(".")[0];
   var elem = $("#advanced-content-" + topKey + "-flex");

From 03c0d3eb9460aeb99c15a52671f1882eb2031477 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Wed, 17 Jan 2024 20:33:53 -0300
Subject: [PATCH 04/17] Move `value.description` to box-body and the content to
 box-footer

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/js/settings-advanced.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/scripts/pi-hole/js/settings-advanced.js b/scripts/pi-hole/js/settings-advanced.js
index 44e0a31a..38a59b53 100644
--- a/scripts/pi-hole/js/settings-advanced.js
+++ b/scripts/pi-hole/js/settings-advanced.js
@@ -288,11 +288,11 @@ function generateRow(topic, key, value) {
     key +
     boxIcons(value) +
     "</h3>" +
-    "<p>" +
-    utils.escapeHtml(value.description).replaceAll("\n", "<br>") +
-    "</p>" +
     "</div>" +
     '<div class="box-body">' +
+    utils.escapeHtml(value.description).replaceAll("\n", "<br>") +
+    "</div>" +
+    '<div class="box-footer">' +
     valueDetails(key, value) +
     "</div></div> ";
 

From 494c1cf1c0a3d1aa75f75dbea12a427b6bb58f7e Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Wed, 17 Jan 2024 20:39:39 -0300
Subject: [PATCH 05/17] Replace non-breaking spaces with a margin

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/js/settings-advanced.js | 6 +++---
 style/pi-hole.css                       | 4 ++++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/scripts/pi-hole/js/settings-advanced.js b/scripts/pi-hole/js/settings-advanced.js
index 38a59b53..20ceeb4f 100644
--- a/scripts/pi-hole/js/settings-advanced.js
+++ b/scripts/pi-hole/js/settings-advanced.js
@@ -28,13 +28,13 @@ function boxIcons(value) {
   return (
     '<span class="box-icons">' +
     (value.modified
-      ? '&nbsp;&nbsp;<i class="far fa-edit text-light-blue" title="Modified from default"></i>'
+      ? '<i class="far fa-edit text-light-blue" title="Modified from default"></i>'
       : "") +
     (value.flags.restart_dnsmasq
-      ? '&nbsp;&nbsp;<i class="fas fa-redo text-orange" title="Setting requires FTL restart on change"></i>'
+      ? '<i class="fas fa-redo text-orange" title="Setting requires FTL restart on change"></i>'
       : "") +
     (value.flags.env_var
-      ? '&nbsp;&nbsp;<i class="fas fa-lock text-orange" title="Settings overwritten by an environmental variable are read-only"></i>'
+      ? '<i class="fas fa-lock text-orange" title="Settings overwritten by an environmental variable are read-only"></i>'
       : "") +
     "</span>"
   );
diff --git a/style/pi-hole.css b/style/pi-hole.css
index ae5a8439..431ebbbe 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -1471,6 +1471,10 @@ table.dataTable tbody > tr > .selected {
   }
 }
 
+.box-icons {
+  margin: 0 10px;
+}
+
 textarea.field-sizing-content {
   min-block-size: 3.5rlh;
   max-block-size: 20rlh;

From d66c5ec3109ccd4fa59a228bd55188f888120ba6 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Wed, 17 Jan 2024 23:50:23 -0300
Subject: [PATCH 06/17] CSS adjustments

- change label style and width
- set icons padding

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/js/settings-advanced.js | 26 ++++++++++++-------------
 style/pi-hole.css                       | 10 +++++++++-
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/scripts/pi-hole/js/settings-advanced.js b/scripts/pi-hole/js/settings-advanced.js
index 20ceeb4f..36276446 100644
--- a/scripts/pi-hole/js/settings-advanced.js
+++ b/scripts/pi-hole/js/settings-advanced.js
@@ -86,8 +86,8 @@ function valueDetails(key, value) {
     case "IPv6 address":
     case "string": {
       content +=
-        '<label class="col-sm-4 control-label">Value (string)</label>' +
-        '<div class="col-sm-8">' +
+        '<label class="col-sm-2 control-label">Value <small>(string)</small></label>' +
+        '<div class="col-sm-10">' +
         '<input type="text" class="form-control" value="' +
         value.value +
         '" data-key="' +
@@ -125,8 +125,8 @@ function valueDetails(key, value) {
 
     case "double": {
       content +=
-        '<label class="col-sm-4 control-label">Value</label>' +
-        '<div class="col-sm-8">' +
+        '<label class="col-sm-2 control-label">Value</label>' +
+        '<div class="col-sm-10">' +
         '<input type="number" class="form-control" value="' +
         value.value +
         '" data-key="' +
@@ -142,8 +142,8 @@ function valueDetails(key, value) {
 
     case "integer": {
       content +=
-        '<label class="col-sm-4 control-label">Value (integer)</label>' +
-        '<div class="col-sm-8">' +
+        '<label class="col-sm-2 control-label">Value <small>(integer)</small></label>' +
+        '<div class="col-sm-10">' +
         '<input type="number" step="1" class="form-control" value="' +
         value.value +
         '" data-key="' +
@@ -159,7 +159,7 @@ function valueDetails(key, value) {
 
     case "unsigned integer": {
       content +=
-        '<label class="col-sm-4 control-label">Value (unsigned integer)</label>' +
+        '<label class="col-sm-4 control-label">Value <small>(unsigned integer)</small></label>' +
         '<div class="col-sm-8">' +
         '<input type="number" step="1" min="0" class="form-control" value="' +
         value.value +
@@ -176,7 +176,7 @@ function valueDetails(key, value) {
 
     case "unsigned integer (16 bit)": {
       content +=
-        '<label class="col-sm-4 control-label">Value (unsigned 16bit integer)</label>' +
+        '<label class="col-sm-4 control-label">Value <small>(unsigned 16bit integer)</small></label>' +
         '<div class="col-sm-8">' +
         '<input type="number" step="1" min="0" max="65535" class="form-control" value="' +
         value.value +
@@ -193,8 +193,8 @@ function valueDetails(key, value) {
 
     case "string array": {
       content +=
-        '<label class="col-sm-5 control-label">Values (one item per line)</label>' +
-        '<div class="col-sm-7">' +
+        '<label class="col-sm-4 control-label">Values <small>(one item per line)</small></label>' +
+        '<div class="col-sm-8">' +
         '<textarea class="form-control field-sizing-content" data-key="' +
         key +
         '"' +
@@ -242,8 +242,8 @@ function valueDetails(key, value) {
 
     case "password (write-only string)": {
       content +=
-        '<label class="col-sm-4 control-label">Value (string)</label>' +
-        '<div class="col-sm-8">' +
+        '<label class="col-sm-2 control-label">Value <small>(string)</small></label>' +
+        '<div class="col-sm-10">' +
         '<input type="password" class="form-control" value="' +
         value.value +
         '" data-key="' +
@@ -278,7 +278,7 @@ function generateRow(topic, key, value) {
 
   // else: we have a setting we can display
   var box =
-    '<div class="box">' +
+    '<div class="box settings-box">' +
     '<div class="box-header">' +
     '<h3 class="box-title" data-key="' +
     key +
diff --git a/style/pi-hole.css b/style/pi-hole.css
index 431ebbbe..5f08b43e 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -556,6 +556,10 @@ td.details-control {
   margin: 10px;
   width: calc((100% / var(--number-of-columns)) - 20px);
 }
+.settings-box .control-label small {
+  font-weight: normal;
+  display: block;
+}
 
 @media screen and (max-width: 991px) {
   .settings-container {
@@ -1472,7 +1476,11 @@ table.dataTable tbody > tr > .selected {
 }
 
 .box-icons {
-  margin: 0 10px;
+  margin: 0 5px;
+}
+
+.box-icons svg {
+  margin: 0 4px;
 }
 
 textarea.field-sizing-content {

From 3a5b791b7ad94b7235dbafaa18f946451d83072d Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Sun, 28 Jan 2024 02:15:10 -0300
Subject: [PATCH 07/17] Use full width for array values

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/js/settings-advanced.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/scripts/pi-hole/js/settings-advanced.js b/scripts/pi-hole/js/settings-advanced.js
index 36276446..75987e53 100644
--- a/scripts/pi-hole/js/settings-advanced.js
+++ b/scripts/pi-hole/js/settings-advanced.js
@@ -193,8 +193,8 @@ function valueDetails(key, value) {
 
     case "string array": {
       content +=
-        '<label class="col-sm-4 control-label">Values <small>(one item per line)</small></label>' +
-        '<div class="col-sm-8">' +
+        '<label class="col-sm-12 control-label">Values <small>(one item per line)</small></label>' +
+        '<div class="col-sm-12">' +
         '<textarea class="form-control field-sizing-content" data-key="' +
         key +
         '"' +
@@ -263,7 +263,7 @@ function valueDetails(key, value) {
     }
   }
 
-  return '<div class="form-group row">' + content + "</div>";
+  return '<div class="row">' + content + "</div>";
 }
 
 function generateRow(topic, key, value) {

From 3e6d0e9dcfc3374e89e87864f137a9a5a96e68d0 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Tue, 30 Jan 2024 18:09:21 -0300
Subject: [PATCH 08/17] Use radio buttons for enum types

This replaces the original `<select>` and merges the options with the
"allowed values" block in a single one, simplifying the presentation.
Also, the defaultValueHint was incorporated into the default value.

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/js/settings-advanced.js | 37 ++++++++++---------------
 1 file changed, 15 insertions(+), 22 deletions(-)

diff --git a/scripts/pi-hole/js/settings-advanced.js b/scripts/pi-hole/js/settings-advanced.js
index 75987e53..04970aed 100644
--- a/scripts/pi-hole/js/settings-advanced.js
+++ b/scripts/pi-hole/js/settings-advanced.js
@@ -211,31 +211,24 @@ function valueDetails(key, value) {
 
     case "enum (unsigned integer)": // fallthrough
     case "enum (string)": {
-      content +=
-        '<label class="col-sm-4 control-label">Selected Option</label>' +
-        '<div class="col-sm-8">' +
-        '<select class="form-control" data-key="' +
-        key +
-        '"' +
-        extraAttributes +
-        ">";
-      value.allowed.forEach(function (option) {
+      content += '<div class="col-sm-12">';
+      value.allowed.forEach(function (option, i) {
         content +=
-          '<option value="' +
-          option.item +
-          '"' +
-          (option.item === value.value ? " selected" : "") +
+          "<div>" +
+          // Radio button
+          '<input type="radio" class="form-control" ' +
+          `value="${option.item}" name="${key}" id="${key}_${i}" data-key="${key}"${extraAttributes}` +
+          (option.item === value.value ? " checked" : "") +
           ">" +
-          option.item +
-          "</option>";
+          // Label
+          `<label for="${key}_${i}"><strong>${utils.escapeHtml(option.item)}` +
+          (option.item === value.default ? " <em>(default)</em>" : "") +
+          "</strong></label>" +
+          // Paragraph with description
+          `<p class="help-block">${option.description}</p>` +
+          "</div>";
       });
-      content +=
-        "</select> " +
-        defaultValueHint +
-        "</div>" +
-        '<div class="col-sm-12">' +
-        addAllowedValues(value.allowed) +
-        "</div>";
+      content += "</div>";
 
       break;
     }

From f2f6cf4f582126d6202fe663ee09a03702f35b3b Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Wed, 20 Mar 2024 16:51:48 -0300
Subject: [PATCH 09/17] More CSS adjustments

- Adjust styles to show only one column in mid and small screens
- also group all "settings" styles

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 style/pi-hole.css | 56 ++++++++++++++++++++++++-----------------------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/style/pi-hole.css b/style/pi-hole.css
index 5f08b43e..748375d6 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -547,26 +547,6 @@ td.details-control {
   padding-right: 20px;
 }
 
-.settings-container {
-  --number-of-columns: 2;
-  display: flex;
-  flex-wrap: wrap;
-}
-.settings-container > .box {
-  margin: 10px;
-  width: calc((100% / var(--number-of-columns)) - 20px);
-}
-.settings-box .control-label small {
-  font-weight: normal;
-  display: block;
-}
-
-@media screen and (max-width: 991px) {
-  .settings-container {
-    --number-of-columns: 1;
-  }
-}
-
 /*** Login page ***/
 .login-page {
   padding: 15px;
@@ -902,13 +882,6 @@ body:not(.lcars) .filter_types [class*="icheck-"] > input:first-child:checked +
   flex: 1 0 auto;
 }
 
-/* Global settings level selector container */
-.settings-selector {
-  padding: 14px 0 0;
-  order: 2;
-  font-size: 18px;
-}
-
 .navbar-nav {
   height: 50px;
 }
@@ -1167,6 +1140,35 @@ table.dataTable tbody > tr > .selected {
   }
 }
 
+.settings-container {
+  --columns: 2;
+  --gap: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap);
+}
+.settings-container > .box {
+  margin: 0;
+  width: calc((100% - (var(--gap) * (var(--columns) - 1))) / var(--columns));
+}
+.settings-box .control-label small {
+  font-weight: normal;
+  display: block;
+}
+
+@media screen and (max-width: 991px) {
+  .settings-container {
+    --columns: 1;
+  }
+}
+
+/* Global settings level selector container */
+.settings-selector {
+  padding: 14px 0 0;
+  order: 2;
+  font-size: 18px;
+}
+
 /* Hide the checkbox used for settings level selector */
 #expert-settings,
 #only-changed {

From f0664ae90d79226a33e13538bf2365d047c15b7a Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Mon, 3 Jun 2024 17:01:16 -0300
Subject: [PATCH 10/17] Cleaner layout for "All Settings" page

- remove the external green boxes;
- remove border from inner boxes (and change the box-shadow);
- add navigation and tabs for settings sections;
- adjust/add some classes for formatting

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/js/settings-advanced.js | 51 ++++++++++++-------------
 settings-all.lp                         | 14 ++++++-
 style/pi-hole.css                       |  2 +
 3 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/scripts/pi-hole/js/settings-advanced.js b/scripts/pi-hole/js/settings-advanced.js
index 04970aed..7e062f27 100644
--- a/scripts/pi-hole/js/settings-advanced.js
+++ b/scripts/pi-hole/js/settings-advanced.js
@@ -272,7 +272,7 @@ function generateRow(topic, key, value) {
   // else: we have a setting we can display
   var box =
     '<div class="box settings-box">' +
-    '<div class="box-header">' +
+    '<div class="box-header with-border">' +
     '<h3 class="box-title" data-key="' +
     key +
     '" data-modified="' +
@@ -299,41 +299,38 @@ function createDynamicConfigTabs() {
     url: "/api/config?detailed=true",
   })
     .done(function (data) {
-      // Create the content for the advanced dynamic config topics
+      // Create the tabs for the advanced dynamic config topics
       Object.keys(data.topics).forEach(function (n) {
         var topic = data.topics[n];
-        $("#advanced-content").append(
-          '<div class="col-lg-12" id="advanced-content-' +
-            topic.name +
-            '">' +
-            '<div class="box box-success">' +
-            '<div class="box-header with-border no-user-select">' +
-            '<h3 class="box-title">' +
-            topic.description +
-            " (<code>" +
-            topic.name +
-            "</code>)" +
-            "</h3>" +
-            "</div>" +
-            '<div class="box-body">' +
-            '<div class="row" id="advanced-content-' +
-            topic.name +
-            '-body">' +
-            '<div class="col-xs-12 settings-container" id="advanced-content-' +
-            topic.name +
-            '-flex"></div>' +
-            "</div>" +
-            "</div>" +
-            "</div>" +
-            "</div>"
-        );
+
+        $("#advanced-settings-tabs").append(`
+          <div id="advanced-content-${topic.name}" role="tabpanel" class="tab-pane fade">
+            <h3 class="page-header">${topic.description} (<code>${topic.name}</code>)</h3>
+            <div class="row" id="advanced-content-${topic.name}-body">
+              <div class="col-xs-12 settings-container" id="advanced-content-${topic.name}-flex"></div>
+            </div>
+          </div>
+        `);
+
+        // Dynamically create the settings menu
+        $("#advanced-settings-menu ul").append(`
+          <li role="presentation">
+            <a href="#advanced-content-${topic.name}" aria-controls="advanced-content-${topic.name}" role="pill" data-toggle="pill">${topic.description}</a>
+          </li>
+        `);
       });
+
+      // Dynamically fill the tabs with config topics
       Object.keys(data.config).forEach(function (topic) {
         var value = data.config[topic];
         generateRow(topic, topic, value, data);
       });
       $("#advanced-overlay").hide();
 
+      // Select the first tab and show the content
+      $("#advanced-settings-menu ul li:first-child").addClass("active");
+      $("#advanced-settings-tabs > div:first-child").addClass("active in");
+
       $("button[id='save']").on("click", function () {
         saveSettings();
       });
diff --git a/settings-all.lp b/settings-all.lp
index f7253619..40c49f6b 100644
--- a/settings-all.lp
+++ b/settings-all.lp
@@ -14,11 +14,21 @@ PageTitle = "All Settings"
 mg.include('scripts/pi-hole/lua/settings_header.lp','r')
 ?>
 <div class="row settings-level-expert" id="advanced-content">
-    <!-- dynamically filled with content -->
     <div class="overlay" id="advanced-overlay">
         <i class="fa fa-sync fa-spin"></i>
     </div>
-    <div class="col-lg-12 settings-level-expert save-button-container">
+
+    <div class="col-sm-12" id="advanced-settings-menu">
+        <ul class="nav nav-pills" role="tablist">
+            <!-- dynamically filled with content -->
+        </ul>
+    </div>
+
+    <div class="col-sm-12 tab-content" id="advanced-settings-tabs">
+        <!-- dynamically filled with content -->
+    </div>
+
+    <div class="col-sm-12 settings-level-expert save-button-container">
         <button type="button" class="btn btn-primary save-button"><i class="fa-solid fa-fw fa-floppy-disk"></i>&nbsp;Save & Apply</button>
     </div>
 </div>
diff --git a/style/pi-hole.css b/style/pi-hole.css
index 748375d6..2b4bdb08 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -1150,6 +1150,8 @@ table.dataTable tbody > tr > .selected {
 .settings-container > .box {
   margin: 0;
   width: calc((100% - (var(--gap) * (var(--columns) - 1))) / var(--columns));
+  border: none;
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
 }
 .settings-box .control-label small {
   font-weight: normal;

From c202f551794eac8b7a23c0eb17b26f7b6e5aa50e Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Mon, 3 Jun 2024 19:12:12 -0300
Subject: [PATCH 11/17] Remove the word "settings" from each tabs button

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/js/settings-advanced.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/pi-hole/js/settings-advanced.js b/scripts/pi-hole/js/settings-advanced.js
index 7e062f27..2d3cd5c2 100644
--- a/scripts/pi-hole/js/settings-advanced.js
+++ b/scripts/pi-hole/js/settings-advanced.js
@@ -315,7 +315,7 @@ function createDynamicConfigTabs() {
         // Dynamically create the settings menu
         $("#advanced-settings-menu ul").append(`
           <li role="presentation">
-            <a href="#advanced-content-${topic.name}" aria-controls="advanced-content-${topic.name}" role="pill" data-toggle="pill">${topic.description}</a>
+            <a href="#advanced-content-${topic.name}" aria-controls="advanced-content-${topic.name}" role="pill" data-toggle="pill">${topic.description.replace(" settings", "")}</a>
           </li>
         `);
       });

From 6e6c667ce8ed0a437c187e79230c84f47c3dd517 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Mon, 3 Jun 2024 19:13:28 -0300
Subject: [PATCH 12/17] Show a message for empty tabs when selecting "Only
 Modified" settings

and fix the navigation basic style colors

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 style/pi-hole.css | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/style/pi-hole.css b/style/pi-hole.css
index 2b4bdb08..eb6356f3 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -1158,6 +1158,45 @@ table.dataTable tbody > tr > .selected {
   display: block;
 }
 
+/* Settings containers without modified items and with hidden boxes will display this text */
+.settings-container:not(:has(h3[data-modified="true"])):has(.box[style*="display: none;"])::before {
+  content: "No modified settings to display";
+  opacity: 0.7;
+  font-style: italic;
+}
+
+#advanced-settings-menu {
+  margin-bottom: 1.5em;
+}
+
+#advanced-settings-menu ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 0.5em;
+}
+#advanced-settings-menu ul:before,
+#advanced-settings-menu ul:after {
+  content: none;
+}
+
+#advanced-settings-menu ul > li {
+  margin: 0;
+  min-width: 112px;
+  flex: 1 1 auto;
+  text-align: center;
+  border: 1px solid rgba(127, 127, 127, 0.2);
+}
+
+#advanced-settings-menu ul > li a:not(:hover) {
+  color: inherit;
+  background: none;
+}
+#advanced-settings-menu ul > li a:hover {
+  color: inherit;
+  background: rgba(127, 127, 127, 0.2);
+}
+
 @media screen and (max-width: 991px) {
   .settings-container {
     --columns: 1;

From 5db10ae1ae4db9482d1cd2362af9c07b41e6e9ce Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Mon, 3 Jun 2024 22:50:58 -0300
Subject: [PATCH 13/17] Change the number of columns depending on the screen
 size

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 style/pi-hole.css | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/style/pi-hole.css b/style/pi-hole.css
index eb6356f3..a50fd0a4 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -1197,7 +1197,20 @@ table.dataTable tbody > tr > .selected {
   background: rgba(127, 127, 127, 0.2);
 }
 
-@media screen and (max-width: 991px) {
+@media screen and (min-width: 2250px) {
+  /* show 3 columns in larger screens */
+  .settings-container {
+    --columns: 3;
+  }
+}
+@media screen and (max-width: 1150px) {
+  /* avoid narrow columns in medium screens with sidebar expanded */
+  body:not(.sidebar-collapse) .settings-container {
+    --columns: 1;
+  }
+}
+@media screen and (max-width: 940px) {
+  /* show 1 columns in smaller screens */
   .settings-container {
     --columns: 1;
   }

From ab16bb80dbf3b8de5ffa218feb7ba456f24d4095 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Wed, 5 Jun 2024 20:15:18 -0300
Subject: [PATCH 14/17] Do not use tabs when showing only Modified Settings

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/js/settings-advanced.js | 40 ++++++++++++++-----------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/scripts/pi-hole/js/settings-advanced.js b/scripts/pi-hole/js/settings-advanced.js
index 2d3cd5c2..d7752f97 100644
--- a/scripts/pi-hole/js/settings-advanced.js
+++ b/scripts/pi-hole/js/settings-advanced.js
@@ -373,28 +373,32 @@ function initOnlyChanged() {
 
 function applyOnlyChanged() {
   if (localStorage.getItem("only-changed") === "true") {
-    // Hide all boxes that have a data-key attribute
+    // Show only modified settings (hide tabs menu and empty tabs).
+
+    // Hide the tabs menu
+    $("#advanced-settings-menu").hide();
+
+    // Show all tabs, except the ones containing "data-modified='true'" attribute
+    // to prevent empty tabs (using the same classes used by Boostrap3)
+    $("#advanced-settings-tabs > .tab-pane").addClass("in active");
+    $("#advanced-settings-tabs > .tab-pane:not(:has(h3[data-modified='true']))").removeClass(
+      "in active"
+    );
+
+    // Hide all boxes with data-key attribute, except the ones with "data-modified='true'" attribute
     $(".box-title[data-key]").not("[data-modified='true']").closest(".box").hide();
   } else {
-    // Show all boxes that have a data-key attribute
+    // Show the tabs menu and activate only the first button (deactivate other buttons)
+    $("#advanced-settings-menu").show();
+    $("#advanced-settings-menu ul li").removeClass("active");
+    $("#advanced-settings-menu ul li:first-child").addClass("active");
+
+    // Hide all tabs, except the first one (removing the classes used by Boostrap3)
+    $("#advanced-settings-tabs > .tab-pane:not(:first-child)").removeClass("in active");
+
+    // Show all boxes with data-key attribute
     $(".box-title[data-key]").closest(".box").show();
   }
-
-  // Hide group headers on the all settings page after toggling to show only
-  // modified settings if there are no modified settings within that group. This
-  // prevents empty boxes when only-changed is enabled by hiding all boxes if
-  // the box does not have at least one visible box as a child
-  $(".box-title:not([data-key])").each(function () {
-    const box = $(this).closest(".box");
-    if (
-      box.find(".box-title[data-key]:visible").length === 0 &&
-      localStorage.getItem("only-changed") === "true"
-    ) {
-      box.hide();
-    } else {
-      box.show();
-    }
-  });
 }
 
 $(document).ready(function () {

From 8a88c8e67bc51d5639b6475bb274d362564f16bb Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Wed, 5 Jun 2024 20:20:01 -0300
Subject: [PATCH 15/17] Add button classes to nav-pills elements

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/js/settings-advanced.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/pi-hole/js/settings-advanced.js b/scripts/pi-hole/js/settings-advanced.js
index d7752f97..3d7e4332 100644
--- a/scripts/pi-hole/js/settings-advanced.js
+++ b/scripts/pi-hole/js/settings-advanced.js
@@ -315,7 +315,7 @@ function createDynamicConfigTabs() {
         // Dynamically create the settings menu
         $("#advanced-settings-menu ul").append(`
           <li role="presentation">
-            <a href="#advanced-content-${topic.name}" aria-controls="advanced-content-${topic.name}" role="pill" data-toggle="pill">${topic.description.replace(" settings", "")}</a>
+            <a href="#advanced-content-${topic.name}" class="btn btn-default" aria-controls="advanced-content-${topic.name}" role="pill" data-toggle="pill">${topic.description.replace(" settings", "")}</a>
           </li>
         `);
       });

From 8768f6a509908a2e745a4b30b7ce47cc0cecdeea Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Wed, 5 Jun 2024 20:20:57 -0300
Subject: [PATCH 16/17] Format the buttons

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 style/pi-hole.css | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/style/pi-hole.css b/style/pi-hole.css
index a50fd0a4..bc4a1a2e 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -1185,16 +1185,22 @@ table.dataTable tbody > tr > .selected {
   min-width: 112px;
   flex: 1 1 auto;
   text-align: center;
-  border: 1px solid rgba(127, 127, 127, 0.2);
 }
 
-#advanced-settings-menu ul > li a:not(:hover) {
-  color: inherit;
-  background: none;
+#advanced-settings-menu ul > li a {
+  border: 1px solid rgba(127, 127, 127, 0.2);
+  border-radius: 3px;
 }
-#advanced-settings-menu ul > li a:hover {
+#advanced-settings-menu ul > li:not(.active) a {
   color: inherit;
-  background: rgba(127, 127, 127, 0.2);
+}
+#advanced-settings-menu ul > li:not(.active) a:hover,
+#advanced-settings-menu ul > li:not(.active) a:focus {
+  background: rgba(127, 127, 127, 0.1);
+}
+
+#advanced-settings-tabs > .tab-pane {
+  margin-bottom: 2em;
 }
 
 @media screen and (min-width: 2250px) {

From 20fc994facdb9807a165aae0e72d436cdf8ba045 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Wed, 5 Jun 2024 20:22:01 -0300
Subject: [PATCH 17/17] Adapt the style to LCARS theme

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 style/themes/lcars.css | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/style/themes/lcars.css b/style/themes/lcars.css
index c09f812d..c95761b5 100644
--- a/style/themes/lcars.css
+++ b/style/themes/lcars.css
@@ -2149,3 +2149,27 @@ td.highlight {
     right: calc((100% - 1320px) / 2 + 0.85em);
   }
 }
+
+.flex-header h1 {
+  margin-right: 0;
+}
+
+.settings-selector {
+  order: -1;
+}
+.settings-selector .toggle {
+  width: 125px !important;
+}
+
+#advanced-settings-menu ul > li a {
+  border: none;
+  border-radius: 20px;
+  color: #000;
+}
+#advanced-settings-menu ul > li:not(.active) a:hover,
+#advanced-settings-menu ul > li a:focus {
+  background: #fff;
+}
+#advanced-settings-menu ul > li:not(.active) a {
+  color: #000;
+}