Replace ".hidden" class with ".d-none"

The old bootstrap3 ".hidden" class was renamed to ".d-none" in Bootstrap4

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
This commit is contained in:
RD WebDesign
2025-11-18 22:38:48 -03:00
parent c0f39284f0
commit 2216444725
16 changed files with 50 additions and 50 deletions

View File

@@ -87,7 +87,7 @@ mg.include('scripts/lua/header_authenticated.lp','r')
</tr>
</thead>
</table>
<button type="button" id="resetButton" class="btn btn-default btn-sm text-red hidden">Reset sorting</button>
<button type="button" id="resetButton" class="btn btn-default btn-sm text-red d-none">Reset sorting</button>
</div>
<!-- /.card-body -->
</div>

View File

@@ -148,7 +148,7 @@ mg.include('scripts/lua/header_authenticated.lp','r')
</tr>
</thead>
</table>
<button type="button" id="resetButton" class="btn btn-default btn-sm text-red hidden">Reset sorting</button>
<button type="button" id="resetButton" class="btn btn-default btn-sm text-red d-none">Reset sorting</button>
</div>
<!-- /.card-body -->
</div>

View File

@@ -86,7 +86,7 @@ mg.include('scripts/lua/header_authenticated.lp','r')
</tr>
</thead>
</table>
<button type="button" id="resetButton" class="btn btn-default btn-sm text-red hidden">Reset sorting</button>
<button type="button" id="resetButton" class="btn btn-default btn-sm text-red d-none">Reset sorting</button>
</div>
<!-- /.card-body -->
</div>

View File

@@ -71,7 +71,7 @@ mg.include('scripts/lua/header_authenticated.lp','r')
</tr>
</thead>
</table>
<button type="button" id="resetButton" class="btn btn-default btn-sm text-red hidden">Reset sorting</button>
<button type="button" id="resetButton" class="btn btn-default btn-sm text-red d-none">Reset sorting</button>
</div>
<!-- /.card-body -->
</div>

View File

@@ -50,7 +50,7 @@ mg.include('scripts/lua/header.lp','r')
</span>
</div>
</div>
<div class="form-group hidden" id="totp_input">
<div class="form-group d-none" id="totp_input">
<div class="input-group">
<input type="text" id="totp" size="6" maxlen="6" class="form-control totp_token" placeholder="123456" value="" spellcheck="false" autofocus autocomplete="one-time-code">
<div class="input-group-addon" data-toggle="tooltip" data-placement="auto" title="TOTP verification code">
@@ -65,7 +65,7 @@ mg.include('scripts/lua/header.lp','r')
<br>
<div class="row">
<div class="col-12">
<div class="card card-danger collapsed-card card-outline hidden" id="invalid2fa-box">
<div class="card card-danger collapsed-card card-outline d-none" id="invalid2fa-box">
<div class="card-header pointer no-user-select" data-widget="collapse">
<h3 class="card-title">Wrong 2FA token</h3>
<div class="card-tools float-end">

View File

@@ -327,15 +327,15 @@ function initTable() {
table.on("order.dt", () => {
const order = table.order();
if (order[0][0] !== 0 || order[0][1] !== "asc") {
$("#resetButton").removeClass("hidden");
$("#resetButton").removeClass("d-none");
} else {
$("#resetButton").addClass("hidden");
$("#resetButton").addClass("d-none");
}
});
$("#resetButton").on("click", () => {
table.order([[0, "asc"]]).draw();
$("#resetButton").addClass("hidden");
$("#resetButton").addClass("d-none");
});
}

View File

@@ -403,15 +403,15 @@ function initTable() {
table.on("order.dt", () => {
const order = table.order();
if (order[0][0] !== 0 || order[0][1] !== "asc") {
$("#resetButton").removeClass("hidden");
$("#resetButton").removeClass("d-none");
} else {
$("#resetButton").addClass("hidden");
$("#resetButton").addClass("d-none");
}
});
$("#resetButton").on("click", () => {
table.order([[0, "asc"]]).draw();
$("#resetButton").addClass("hidden");
$("#resetButton").addClass("d-none");
});
}

View File

@@ -213,15 +213,15 @@ $(() => {
table.on("order.dt", () => {
const order = table.order();
if (order[0][0] !== 0 || order[0][1] !== "asc") {
$("#resetButton").removeClass("hidden");
$("#resetButton").removeClass("d-none");
} else {
$("#resetButton").addClass("hidden");
$("#resetButton").addClass("d-none");
}
});
$("#resetButton").on("click", () => {
table.order([[0, "asc"]]).draw();
$("#resetButton").addClass("hidden");
$("#resetButton").addClass("d-none");
});
});

View File

@@ -55,7 +55,7 @@ function wrongPassword(isError = false, isSuccess = false, data = null) {
// Only show the invalid 2FA box if the error is caused by an invalid TOTP
// token
if (isInvalidTOTP) $("#invalid2fa-box").removeClass("hidden");
if (isInvalidTOTP) $("#invalid2fa-box").removeClass("d-none");
// Only highlight the password field if the error is NOT caused by an
// invalid TOTP token
@@ -81,7 +81,7 @@ function wrongPassword(isError = false, isSuccess = false, data = null) {
$("#error-label").hide();
}
$("#invalid2fa-box").addClass("hidden");
$("#invalid2fa-box").addClass("d-none");
const forgotPwBox = document.getElementById("forgot-pw-box");
forgotPwBox.classList.replace("box-danger", "box-info");
utils.toggleBoxCollapse(forgotPwBox, false);
@@ -168,10 +168,10 @@ $(() => {
const session = xhr.responseJSON.session;
// If TOPT is enabled, show the input field and add the required attribute
if (session.totp === true) {
$("#totp_input").removeClass("hidden");
$("#totp_input").removeClass("d-none");
$("#totp").attr("required", "required");
$("#totp-forgotten-title").removeClass("hidden");
$("#totp-forgotten-body").removeClass("hidden");
$("#totp-forgotten-title").removeClass("d-none");
$("#totp-forgotten-body").removeClass("d-none");
}
});

View File

@@ -551,7 +551,7 @@ $(() => {
width: "10%",
render(data, type) {
if (type === "display") {
return moment.unix(data).format("Y-MM-DD [<br class='hidden-lg'>]HH:mm:ss z");
return moment.unix(data).format("Y-MM-DD [<br class='d-lg-none'>]HH:mm:ss z");
}
return data;

View File

@@ -332,7 +332,7 @@ $("#modal-apppw").on("shown.bs.modal", () => {
.done(data => {
apppwhash = data.app.hash;
$("#password_code").text(data.app.password);
$("#password_display").removeClass("hidden");
$("#password_display").removeClass("d-none");
$("#password-spinner").hide();
})
.fail(data => {
@@ -432,8 +432,8 @@ function setTOTPSecret(secret) {
contentType: "application/json; charset=utf-8",
})
.done(() => {
$("#button-enable-totp").addClass("hidden");
$("#button-disable-totp").removeClass("hidden");
$("#button-enable-totp").addClass("d-none");
$("#button-disable-totp").removeClass("d-none");
$("#totp_code").val("");
$("#modal-totp").modal("hide");
const verb = secret.length > 0 ? "enabled" : "disabled";
@@ -478,7 +478,7 @@ $(() => {
$.ajax({
url: document.body.dataset.apiurl + "/auth",
}).done(data => {
if (data.session.totp === false) $("#button-enable-totp").removeClass("hidden");
else $("#button-disable-totp").removeClass("hidden");
if (data.session.totp === false) $("#button-enable-totp").removeClass("d-none");
else $("#button-disable-totp").removeClass("d-none");
});
});

View File

@@ -153,7 +153,7 @@ function datetime(date, html, humanReadable) {
}
const format =
html === false ? "Y-MM-DD HH:mm:ss z" : "Y-MM-DD [<br class='hidden-lg'>]HH:mm:ss z";
html === false ? "Y-MM-DD HH:mm:ss z" : "Y-MM-DD [<br class='d-lg-none'>]HH:mm:ss z";
const timestr = moment.unix(Math.floor(date)).format(format).trim();
return humanReadable
? '<span title="' + timestr + '">' + moment.unix(Math.floor(date)).fromNow() + "</span>"
@@ -401,13 +401,13 @@ function checkMessages() {
$(".warning-count").prop("title", title);
$(".warning-count").text(data.count);
$(".warning-count").removeClass("hidden");
$(".warning-count").removeClass("d-none");
} else {
$(".warning-count").addClass("hidden");
$(".warning-count").addClass("d-none");
}
})
.fail(data => {
$(".warning-count").addClass("hidden");
$(".warning-count").addClass("d-none");
apiFailure(data);
});
}
@@ -454,22 +454,22 @@ function changeTableButtonStates(table) {
if (selectedRows === 0) {
// Nothing selected
for (const el of selectAllElements) el.classList.remove("hidden");
for (const el of selectMoreElements) el.classList.add("hidden");
for (const el of removeAllElements) el.classList.add("hidden");
for (const el of deleteSelectedElements) el.classList.add("hidden");
for (const el of selectAllElements) el.classList.remove("d-none");
for (const el of selectMoreElements) el.classList.add("d-none");
for (const el of removeAllElements) el.classList.add("d-none");
for (const el of deleteSelectedElements) el.classList.add("d-none");
} else if (selectedRows >= pageLength || selectedRows === allRows) {
// Whole page is selected (or all available messages were selected)
for (const el of selectAllElements) el.classList.add("hidden");
for (const el of selectMoreElements) el.classList.add("hidden");
for (const el of removeAllElements) el.classList.remove("hidden");
for (const el of deleteSelectedElements) el.classList.remove("hidden");
for (const el of selectAllElements) el.classList.add("d-none");
for (const el of selectMoreElements) el.classList.add("d-none");
for (const el of removeAllElements) el.classList.remove("d-none");
for (const el of deleteSelectedElements) el.classList.remove("d-none");
} else {
// Some rows are selected, but not all
for (const el of selectAllElements) el.classList.add("hidden");
for (const el of selectMoreElements) el.classList.remove("hidden");
for (const el of removeAllElements) el.classList.add("hidden");
for (const el of deleteSelectedElements) el.classList.remove("hidden");
for (const el of selectAllElements) el.classList.add("d-none");
for (const el of selectMoreElements) el.classList.remove("d-none");
for (const el of removeAllElements) el.classList.add("d-none");
for (const el of deleteSelectedElements) el.classList.remove("d-none");
}
}

View File

@@ -44,7 +44,7 @@ mg.include('header.lp','r')
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button" aria-label="Toggle Navigation">
<i class="fa fa-angle-double-left"></i>
<span class="warning-count badge navbar-badge hidden" id="top-warning-count"></span>
<span class="warning-count badge navbar-badge d-none" id="top-warning-count"></span>
</a>
</li>
</ul>

View File

@@ -200,7 +200,7 @@
<i class="nav-icon fa fa-tools"></i>
<p>Tools
<i class="right fas fa-angle-left"></i>
<span class="badge badge-warning warning-count right hidden"></span>
<span class="badge badge-warning warning-count right d-none"></span>
</p>
</a>
<ul class="nav nav-treeview">
@@ -209,7 +209,7 @@
<a href="<?=webhome?>messages" class="nav-link<? if scriptname == 'messages' then ?> active<? end ?>">
<i class="fa fa-file-medical-alt nav-icon"></i>
<p>Pi-hole diagnosis
<span class="badge badge-warning warning-count right hidden"></span>
<span class="badge badge-warning warning-count right d-none"></span>
</p>
</a>
</li>

View File

@@ -32,7 +32,7 @@ mg.include('scripts/lua/header_authenticated.lp','r')
<label for="partialMatch"><strong>Use partial matching</strong> (may not find complex regex entries)</label>
</div>
</div>
<br class="hidden-md hidden-lg">
<br class="d-md-none d-lg-none">
<div class="col-md-6">
<div id="domain-limitbox-block" class="form-inline">
<label for="number">Maximum number of results to be returned:&nbsp;</label>
@@ -45,7 +45,7 @@ mg.include('scripts/lua/header_authenticated.lp','r')
</div>
</div>
<pre id="output" style="width: 100%; height: 100%;" hidden></pre>
<pre id="output" style="width: 100%; height: 100%;" d-none></pre>
<script src="<?=pihole.fileversion('scripts/js/search.js')?>"></script>
<? mg.include('scripts/lua/footer.lp','r')?>

View File

@@ -71,8 +71,8 @@ mg.include('scripts/lua/settings_header.lp','r')
</div>
</div>
<div class="col-lg-12 pt-3">
<button type="button" id="button-enable-totp" class="btn btn-success hidden" data-toggle="modal" data-target="#modal-totp">Enable 2FA</button>
<button type="button" id="button-disable-totp" class="btn btn-danger hidden" data-toggle="modal" data-target="#modal-totp-disable">Disable 2FA</button>
<button type="button" id="button-enable-totp" class="btn btn-success d-none" data-toggle="modal" data-target="#modal-totp">Enable 2FA</button>
<button type="button" id="button-disable-totp" class="btn btn-danger d-none" data-toggle="modal" data-target="#modal-totp-disable">Disable 2FA</button>
<button type="button" id="button-apppw" class="btn btn-default float-end" data-toggle="modal" data-target="#modal-apppw">Configure app password</button>
</div>
</div>
@@ -234,7 +234,7 @@ mg.include('scripts/lua/settings_header.lp','r')
<div class="text-center">
<i id="password-spinner" class="fas fa-spinner fa-pulse fa-5x"></i>
</div>
<p id="password_display" class="text-center hidden">&#x1F510;<br><strong>Your new app password is:</strong><br><code class="password_background m-5" id="password_code"></code></p>
<p id="password_display" class="text-center d-none">&#x1F510;<br><strong>Your new app password is:</strong><br><code class="password_background m-5" id="password_code"></code></p>
<p>IMPORTANT: The app password generated here will only be shown
once and cannot be recovered. Make sure to store it in a safe
place!</p>