Improve settings level select location (#2720)

scripts/pi-hole/lua/header_authenticated.lp

@@ -50,16 +50,6 @@ mg.include('header.lp','r')
             </a>
             <div class="navbar-custom-menu">
                 <ul class="nav navbar-nav">
-                <? if startsWith(scriptname, 'settings/') then ?>
-                    <li class="nav-item">
-                        <p class="navbar-text">
-                            Settings level: <select id="settings-level" class="form-control input-sm">
-                                <option></option>
-                                <option>Advanced</option>
-                            </select>
-                        </p>
-                    </li>
-                <? end ?>
                     <li<? if string.len(hostname) == 0 then ?> class="hidden"<? end ?>>
                         <p class="navbar-text">
                             <span class="hidden-xs">hostname:</span>

scripts/pi-hole/lua/settings_header.lp

@@ -0,0 +1,7 @@
+<!-- Title -->
+<div class="page-header flex-header">
+    <h1><?= PageTitle ?></h1>
+    <div class="settings-selector">
+        Settings level: <select id="settings-level" class="form-control input-sm"></select>
+    </div>
+</div>

settings-advanced.lp

@@ -8,6 +8,10 @@
 --]]
 
 mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
+
+-- Page title and level selector
+PageTitle = "Advanced Settings"
+mg.include('scripts/pi-hole/lua/settings_header.lp','r')
 ?>
 <div class="row settings-level-2" id="advanced-content">
     <!-- dynamically filled with content -->

settings-api.lp

@@ -8,6 +8,10 @@
 --]]
 
 mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
+
+-- Page title and level selector
+PageTitle = "Web Interface - API Settings"
+mg.include('scripts/pi-hole/lua/settings_header.lp','r')
 ?>
 <div class="row">
     <div class="col-md-6 settings-level-1">
@@ -169,7 +173,7 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
             </div>
         </div>
     </div>
-    <div class="col-lg-12 settings-level-1">
+    <div class="col-lg-12 settings-level-0">
         <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>

settings-dhcp.lp

@@ -8,6 +8,10 @@
 --]]
 
 mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
+
+-- Page title and level selector
+PageTitle = "DHCP Settings"
+mg.include('scripts/pi-hole/lua/settings_header.lp','r')
 ?>
 <div class="row">
     <!-- DHCP Settings Box -->
@@ -195,7 +199,7 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
             </div>
         </div>
     </div>
-    <div class="col-lg-12 settings-level-1">
+    <div class="col-lg-12 settings-level-0">
         <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>

settings-dns.lp

@@ -8,6 +8,10 @@
 --]]
 
 mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
+
+-- Page title and level selector
+PageTitle = "DNS Settings"
+mg.include('scripts/pi-hole/lua/settings_header.lp','r')
 ?>
 <div class="row">
     <div class="col-lg-6">
@@ -231,7 +235,7 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
             </div>
         </div>
     </div>
-    <div class="col-lg-12 settings-level-1">
+    <div class="col-lg-12 settings-level-0">
         <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>

settings-dnsrecords.lp

@@ -8,6 +8,10 @@
 --]]
 
 mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
+
+-- Page title and level selector
+PageTitle = "Local DNS Settings"
+mg.include('scripts/pi-hole/lua/settings_header.lp','r')
 ?>
 <div class="row">
     <div class="col-md-6 settings-level-1">

settings-privacy.lp

@@ -8,6 +8,10 @@
 --]]
 
 mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
+
+-- Page title and level selector
+PageTitle = "Privacy Settings"
+mg.include('scripts/pi-hole/lua/settings_header.lp','r')
 ?>
 <div class="row">
     <div class="col-md-6 settings-level-0">
@@ -98,7 +102,7 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
             </div>
         </div>
     </div>
-    <div class="col-lg-12 settings-level-1">
+    <div class="col-lg-12 settings-level-0">
         <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>

settings-system.lp

@@ -8,6 +8,10 @@
 --]]
 
 mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
+
+-- Page title and level selector
+PageTitle = "System Settings"
+mg.include('scripts/pi-hole/lua/settings_header.lp','r')
 ?>
 <div class="row">
     <div class="col-md-6">

settings-teleporter.lp

@@ -8,6 +8,10 @@
 --]]
 
 mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
+
+-- Page title and level selector
+PageTitle = "Teleporter"
+mg.include('scripts/pi-hole/lua/settings_header.lp','r')
 ?>
 <div class="row">
     <div class="col-md-6">

style/pi-hole.css

@@ -877,12 +877,31 @@ body:not(.lcars) .filter_types [class*="icheck-"] > input:first-child:checked +
   }
 }
 
+/* Page title container (flex) */
+.flex-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap-reverse;
+}
+
+.flex-header h1 {
+  margin: 10px 30px 10px 0;
+  flex: 1 0 auto;
+}
+
+/* Global settings level selector container */
+.settings-selector {
+  padding: 14px 0 0;
+  order: 2;
+  font-size: 18px;
+}
+
 /* Global settings level selector */
 #settings-level {
   display: inline-block;
   width: auto;
-  height: 2.2em;
-  border-radius: 4px;
+  min-width: 90px;
 }
 
 .navbar-nav {

style/themes/default-light.css

@@ -304,3 +304,7 @@ select:-webkit-autofill {
   -webkit-box-shadow: 0 0 0px 1000px #fff inset;
   transition: background-color 1s ease-in-out 0s;
 }
+
+.page-header {
+  border-color: #ddd;
+}