pi-hole/web
1
0
Fork 0
mirror of https://github.com/pi-hole/web.git synced 2024-12-06 19:36:21 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Keep "Save" button inside the content area even using boxed layout (#2887)

Browse Source
This commit is contained in:
RD WebDesign
2023-12-08 00:25:56 -03:00
committed by GitHub
parent 59f33ad871 854a99d411
commit 4debb067b6
12 changed files with 51 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/pi-hole/js/settings-advanced.js
-5
View File
@@ -322,11 +322,6 @@ function createDynamicConfigTabs() {
});
$("#advanced-overlay").hide();
$("#advanced-content").append(
'<div class="col-lg-12 settings-level-1">' +
'<button type="button" class="btn btn-primary save-button" id="save"><i class="fa-solid fa-fw fa-floppy-disk"></i>&nbsp;Save & Apply</button>' +
"</div>"
);
$("button[id='save']").on("click", function () {
saveSettings();
});
settings-all.lp
+1 -1
View File
@@ -18,7 +18,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<div class="overlay" id="advanced-overlay">
<i class="fa fa-sync fa-spin"></i>
</div>
<div class="col-lg-12 settings-level-2">
<div class="col-lg-12 settings-level-2 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>
settings-api.lp
+1 -1
View File
@@ -177,7 +177,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
</div>
</div>
</div>
<div class="col-lg-12 settings-level-0">
<div class="col-lg-12 settings-level-0 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>
settings-dhcp.lp
+1 -1
View File
@@ -200,7 +200,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
</div>
</div>
</div>
<div class="col-lg-12 settings-level-0">
<div class="col-lg-12 settings-level-0 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>
settings-dns.lp
+1 -1
View File
@@ -258,7 +258,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
</div>
</div>
</div>
<div class="col-lg-12 settings-level-0">
<div class="col-lg-12 settings-level-0 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>
settings-privacy.lp
+1 -1
View File
@@ -103,7 +103,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
</div>
</div>
</div>
<div class="col-lg-12 settings-level-0">
<div class="col-lg-12 settings-level-0 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>
style/pi-hole.css
+23 -8
View File
@@ -5,6 +5,14 @@
* This file is copyright under the latest version of the EUPL.
* Please see LICENSE file for your rights under this license. */
:root {
/* Datatables Select - bgcolor */
--datatable-bgcolor: #e0e8ee;
/* Used in settings save button */
--overlay-bgcolor: rgba(212, 220, 232, 0.55);
}
.layout-boxed {
background: url("../img/boxed-bg.png") repeat fixed;
}
@@ -1012,11 +1020,6 @@ body:not(.lcars) .filter_types [class*="icheck-"] > input:first-child:checked +
margin-right: 0.5em;
}
/* Datatables Select - bgcolor */
:root {
--datatable-bgcolor: #e0e8ee;
}
div.dt-buttons {
margin: 2px 0 5px;
}
@@ -1161,11 +1164,23 @@ table.dataTable tbody > tr > .selected {
opacity: 0.1;
}
.save-button {
.save-button-container {
position: fixed;
bottom: 2%;
right: 2%;
bottom: 1.2em;
right: 0.6em;
z-index: 10;
background: var(--overlay-bgcolor);
width: fit-content;
border-radius: 0.5em;
padding: 0;
}
.save-button {
margin: 1.2em;
}
@media (min-width: 1250px) {
.layout-boxed .save-button-container {
right: calc((100% - 1250px) / 2 + 1.2em);
}
}
.settings-level-0 {
style/themes/default-dark.css
+1
View File
@@ -10,6 +10,7 @@
:root {
--datatable-bgcolor: rgba(64, 76, 88, 0.8);
--overlay-bgcolor: var(--datatable-bgcolor);
}
/* fix #2554: browser not detecting dark mode */
style/themes/default-darker.css
+1
View File
@@ -109,6 +109,7 @@ select:-webkit-autofill {
--darkreader-selection-background: #004daa;
--darkreader-selection-text: #e8e6e3;
--datatable-bgcolor: rgb(35, 47, 52);
--overlay-bgcolor: rgba(35, 47, 52, 0.7);
}
/* Modified CSS */
style/themes/high-contrast-dark.css
+1
View File
@@ -29,6 +29,7 @@
--blocked-color: var(--danger-color);
--datatable-bgcolor: rgba(18, 44, 68, 0.3);
--overlay-bgcolor: rgba(24, 28, 32, 0.8);
}
/* removing transition for every element, to avoid unnecessary movement */
style/themes/high-contrast.css
+2
View File
@@ -25,6 +25,8 @@
--allowed-color: #3c7;
--blocked-color: var(--danger-color);
--overlay-bgcolor: rgba(255, 255, 255, 0.8);
}
/* removing transition for every element, to avoid unnecessary movement */
style/themes/lcars.css
+18 -1
View File
@@ -2123,8 +2123,25 @@ td.highlight {
}
/*** add style to the information/about dropdown ***/
.navbar-nav > .user-menu > .dropdown-menu > .user-header,
.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
background-color: #111111;
}
.save-button-container {
border-radius: 50px;
background: none;
box-shadow:
0 0 10px -1px #000,
0 0 20px 2px #000;
bottom: 2em;
right: 1.7em;
}
.save-button {
margin: 0;
}
@media (min-width: 1320px) {
.layout-boxed .save-button-container {
right: calc((100% - 1320px) / 2 + 0.85em);
}
}