Refactor toast styling and add border to feedback toast

This commit is contained in:
Théophile Diot 2024-10-28 14:22:08 +01:00
parent 56dd0f069c
commit 3ead15cdd1
No known key found for this signature in database
GPG key ID: FA995104A0BA376A
8 changed files with 22 additions and 24 deletions

View file

@ -31,8 +31,8 @@ $(document).ready(function () {
data.failed.forEach((instance) => {
var feedbackToastFailed = $("#feedback-toast").clone(); // Clone the feedback toast
feedbackToastFailed.attr("id", `feedback-toast-${toastNum++}`); // Corrected to set the ID for the failed toast
feedbackToastFailed.removeClass("bg-primary text-white");
feedbackToastFailed.addClass("bg-danger text-white");
feedbackToastFailed.addClass("border-danger");
feedbackToastFailed.find(".toast-header").addClass("text-danger");
feedbackToastFailed.find("span").text("Ping failed");
feedbackToastFailed.find("div.toast-body").text(instance.message);
feedbackToastFailed.appendTo("#feedback-toast-container"); // Ensure the toast is appended to the container
@ -42,7 +42,8 @@ $(document).ready(function () {
if (data.succeed.length > 0) {
var feedbackToastSucceed = $("#feedback-toast").clone(); // Clone the feedback toast
feedbackToastSucceed.attr("id", `feedback-toast-${toastNum++}`);
feedbackToastSucceed.addClass("bg-primary text-white");
feedbackToastSucceed.addClass("border-primary");
feedbackToastSucceed.find(".toast-header").addClass("text-primary");
feedbackToastSucceed.find("span").text("Ping successful");
feedbackToastSucceed
.find("div.toast-body")

View file

@ -274,7 +274,6 @@ $(function () {
const feedbackToast = $("#feedback-toast")
.clone()
.attr("id", `feedback-toast-${toastNum++}`)
.addClass("bg-primary text-white")
.removeClass("d-none");
feedbackToast.find("span").text("Conversion failed");
feedbackToast

View file

@ -173,8 +173,8 @@ $(document).ready(() => {
feedbackToast.attr("id", `feedback-toast-${toastNum++}`); // Corrected to set the ID for the toast
if (!isValid) {
$feedback.text("Server name is not unique.");
feedbackToast.removeClass("bg-primary");
feedbackToast.addClass("bg-danger");
feedbackToast.addClass("border-danger");
feedbackToast.find(".toast-header").addClass("text-danger");
feedbackToast.find("span").text("Server name is not unique.");
feedbackToast
.find("div.toast-body")
@ -189,8 +189,8 @@ $(document).ready(() => {
.toggleClass("bx-x text-danger", true);
} else {
$feedback.text("");
feedbackToast.removeClass("bg-danger");
feedbackToast.addClass("bg-primary");
feedbackToast.addClass("border-primary");
feedbackToast.find(".toast-header").addClass("text-primary");
feedbackToast.find("span").text("Server name is unique.");
feedbackToast
.find("div.toast-body")
@ -581,8 +581,8 @@ $(document).ready(() => {
setTimeout(() => {
const feedbackToast = $("#feedback-toast").clone(); // Clone the feedback toast
feedbackToast.attr("id", `feedback-toast-${toastNum++}`); // Corrected to set the ID for the failed toast
feedbackToast.removeClass("bg-primary");
feedbackToast.addClass("bg-danger");
feedbackToast.addClass("border-danger");
feedbackToast.find(".toast-header").addClass("text-danger");
feedbackToast.find("span").text("Error");
feedbackToast
.find("div.toast-body")

View file

@ -1052,8 +1052,6 @@ $(document).ready(() => {
if ($serviceMethodInput.val() === "autoconf") {
const feedbackToast = $("#feedback-toast").clone(); // Clone the feedback toast
feedbackToast.attr("id", `feedback-toast-${toastNum++}`); // Corrected to set the ID for the failed toast
feedbackToast.removeClass("bg-primary text-white");
feedbackToast.addClass("bg-primary text-white");
feedbackToast.find("span").text("The service method is autoconf.");
feedbackToast
.find("div.toast-body")

View file

@ -141,13 +141,13 @@
</table>
</div>
<div id="feedback-toast"
class="bs-toast toast fade"
class="bs-toast toast fade bg-white border"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-bs-autohide="true">
<div class="toast-header">
<i class="d-block w-px-20 h-auto rounded me-2 tf-icons bx bx-bell"></i>
<div class="toast-header d-flex align-items-center">
<i class="d-block h-auto rounded tf-icons bx bx-xs bx-bell bx-tada me-2"></i>
<span class="fw-medium me-auto">BunkerWeb Forever</span>
<small class="text-body-secondary">just now</small>
<button type="button"

View file

@ -43,13 +43,13 @@
role="tabpanel">{% include "models/plugins_settings_raw.html" %}</div>
</div>
<div id="feedback-toast"
class="bs-toast toast fade"
class="bs-toast toast fade bg-white border border-warning"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-bs-autohide="true">
<div class="toast-header">
<i class="d-block w-px-20 h-auto rounded me-2 tf-icons bx bx-bell"></i>
<div class="toast-header d-flex align-items-center text-warning">
<i class="d-block h-auto rounded tf-icons bx bx-xs bx-bell bx-tada me-2"></i>
<span class="fw-medium me-auto">BunkerWeb Forever</span>
<small class="text-body-secondary">just now</small>
<button type="button"

View file

@ -127,13 +127,13 @@
</table>
</div>
<div id="feedback-toast"
class="bs-toast toast fade"
class="bs-toast toast fade bg-white border border-warning"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-bs-autohide="true">
<div class="toast-header">
<i class="d-block w-px-20 h-auto rounded me-2 tf-icons bx bx-bell"></i>
<div class="toast-header d-flex align-items-center text-warning">
<i class="d-block h-auto rounded tf-icons bx bx-xs bx-bell bx-tada me-2"></i>
<span class="fw-medium me-auto">BunkerWeb Forever</span>
<small class="text-body-secondary">just now</small>
<button type="button"

View file

@ -721,14 +721,14 @@
</div>
</div>
<div id="feedback-toast"
class="bs-toast toast fade"
class="bs-toast toast fade bg-white border"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-bs-autohide="true"
data-bs-delay="10000">
<div class="toast-header">
<i class="d-block w-px-20 h-auto rounded me-2 tf-icons bx bx-bell"></i>
<div class="toast-header d-flex align-items-center">
<i class="d-block h-auto rounded tf-icons bx bx-xs bx-bell bx-tada me-2"></i>
<span class="fw-medium me-auto">BunkerWeb Forever</span>
<small class="text-body-secondary">just now</small>
<button type="button"