BS5 components

src/html/components/_scripts.astro

@@ -58,17 +58,16 @@ const adminlteJsUrl = path + "/js/adminlte.js";
   const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
 </script>
 <!--end::Bootstrap Tooltips-->
-<!--begin::JavaScript-->
+<!--begin::Bootstrap Toasts-->
 <script is:inline>
-  // const toastTrigger = document.getElementById('liveToastBtn');
-  // const toastLiveExample = document.getElementById('liveToast');
-  const toastTrigger = document.querySelector('[data-lte-show-toast="toastPrimary"]');
-  const toastLiveExample = document.getElementById('toastPrimary');
-  if (toastTrigger) {
-    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample);
-    toastTrigger.addEventListener('click', () => {
+  const toastTriggerList = document.querySelectorAll('[data-bs-toggle="toast"]')
+  toastTriggerList.forEach(btn => {
+    btn.addEventListener('click', event => {
+      event.preventDefault();
+      const toastEle = document.getElementById(btn.getAttribute('data-bs-target'));
+      const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastEle);
       toastBootstrap.show();
     })
-  }
+  })
 </script>
-<!--end::JavaScript-->
+<!--end::Bootstrap Toasts-->

src/html/pages/components/general.astro

@@ -225,31 +225,31 @@ const pageTitle = "General Components";
               <!--end::Header-->
               <!--begin::Body-->
               <div class="card-body">
-                <button type="button" class="btn btn-primary">Primary</button>
-                <button type="button" class="btn btn-secondary">Secondary</button>
-                <button type="button" class="btn btn-success">Success</button>
-                <button type="button" class="btn btn-danger">Danger</button>
-                <button type="button" class="btn btn-warning">Warning</button>
-                <button type="button" class="btn btn-info">Info</button>
-                <button type="button" class="btn btn-light">Light</button>
-                <button type="button" class="btn btn-dark">Dark</button>
-                <button type="button" class="btn btn-link">Link</button>
+                <button type="button" class="btn btn-primary mb-2">Primary</button>
+                <button type="button" class="btn btn-secondary mb-2">Secondary</button>
+                <button type="button" class="btn btn-success mb-2">Success</button>
+                <button type="button" class="btn btn-danger mb-2">Danger</button>
+                <button type="button" class="btn btn-warning mb-2">Warning</button>
+                <button type="button" class="btn btn-info mb-2">Info</button>
+                <button type="button" class="btn btn-light mb-2">Light</button>
+                <button type="button" class="btn btn-dark mb-2">Dark</button>
+                <button type="button" class="btn btn-link mb-2">Link</button>
                 <hr>
-                <button type="button" class="btn btn-primary" disabled>Primary (disabled)</button>
-                <button type="button" class="btn btn-secondary" disabled>Secondary (disabled)</button>
-                <button type="button" class="btn btn-success" disabled>Success (disabled)</button>
-                <button type="button" class="btn btn-danger" disabled>Danger (disabled)</button>
-                <button type="button" class="btn btn-warning" disabled>Warning (disabled)</button>
-                <button type="button" class="btn btn-info" disabled>Info (disabled)</button>
+                <button type="button" class="btn btn-primary mb-2" disabled>Primary (disabled)</button>
+                <button type="button" class="btn btn-secondary mb-2" disabled>Secondary (disabled)</button>
+                <button type="button" class="btn btn-success mb-2" disabled>Success (disabled)</button>
+                <button type="button" class="btn btn-danger mb-2" disabled>Danger (disabled)</button>
+                <button type="button" class="btn btn-warning mb-2" disabled>Warning (disabled)</button>
+                <button type="button" class="btn btn-info mb-2" disabled>Info (disabled)</button>
                 <hr>
-                <button type="button" class="btn btn-outline-primary">Primary</button>
-                <button type="button" class="btn btn-outline-secondary">Secondary</button>
-                <button type="button" class="btn btn-outline-success">Success</button>
-                <button type="button" class="btn btn-outline-danger">Danger</button>
-                <button type="button" class="btn btn-outline-warning">Warning</button>
-                <button type="button" class="btn btn-outline-info">Info</button>
-                <button type="button" class="btn btn-outline-light">Light</button>
-                <button type="button" class="btn btn-outline-dark">Dark</button>
+                <button type="button" class="btn btn-outline-primary mb-2">Primary</button>
+                <button type="button" class="btn btn-outline-secondary mb-2">Secondary</button>
+                <button type="button" class="btn btn-outline-success mb-2">Success</button>
+                <button type="button" class="btn btn-outline-danger mb-2">Danger</button>
+                <button type="button" class="btn btn-outline-warning mb-2">Warning</button>
+                <button type="button" class="btn btn-outline-info mb-2">Info</button>
+                <button type="button" class="btn btn-outline-light mb-2">Light</button>
+                <button type="button" class="btn btn-outline-dark mb-2">Dark</button>
                 <hr>
                 <button type="button" class="btn btn-primary btn-lg">Large button</button>
                 <button type="button" class="btn btn-warning btn-sm">Small button</button>
@@ -271,23 +271,23 @@ const pageTitle = "General Components";
               <!--end::Header-->
               <!--begin::Body-->
               <div class="card-body">
-                <div class="btn-group" role="group" aria-label="Basic example">
+                <div class="btn-group mb-2" role="group" aria-label="Basic example">
                   <button type="button" class="btn btn-primary">Left</button>
                   <button type="button" class="btn btn-primary">Middle</button>
                   <button type="button" class="btn btn-primary">Right</button>
                 </div>
-                <div class="btn-group" role="group" aria-label="Basic mixed styles example">
+                <div class="btn-group mb-2" role="group" aria-label="Basic mixed styles example">
                   <button type="button" class="btn btn-danger">Left</button>
                   <button type="button" class="btn btn-warning">Middle</button>
                   <button type="button" class="btn btn-success">Right</button>
                 </div>
-                <div class="btn-group" role="group" aria-label="Basic outlined example">
+                <div class="btn-group mb-2" role="group" aria-label="Basic outlined example">
                   <button type="button" class="btn btn-outline-primary">Left</button>
                   <button type="button" class="btn btn-outline-primary">Middle</button>
                   <button type="button" class="btn btn-outline-primary">Right</button>
                 </div>
                 <hr>
-                <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
+                <div class="btn-group mb-2" role="group" aria-label="Basic checkbox toggle button group">
                   <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
                   <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
 
@@ -297,7 +297,7 @@ const pageTitle = "General Components";
                   <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
                   <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
                 </div>
-                <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
+                <div class="btn-group mb-2" role="group" aria-label="Basic radio toggle button group">
                   <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
                   <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
 
@@ -308,7 +308,7 @@ const pageTitle = "General Components";
                   <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
                 </div>
                 <hr>
-                <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
+                <div class="btn-group mb-2" role="group" aria-label="Button group with nested dropdown">
                   <button type="button" class="btn btn-primary">1</button>
                   <button type="button" class="btn btn-primary">2</button>
                   <div class="btn-group" role="group">
@@ -612,8 +612,28 @@ const pageTitle = "General Components";
               <!--end::Header-->
               <!--begin::Body-->
               <div class="card-body">
-                <button type="button" class="btn btn-primary" data-lte-trigger="showToastPrimary">Show live toast</button>
+                <button type="button" class="btn btn-primary mb-2" data-bs-toggle="toast" data-bs-target="toastDefault">Show default toast</button>
+                <hr>
+                <button type="button" class="btn btn-primary mb-2" data-bs-toggle="toast" data-bs-target="toastPrimary">Show primary toast</button>
+                <button type="button" class="btn btn-secondary mb-2" data-bs-toggle="toast" data-bs-target="toastSecondary">Show secondary toast</button>
+                <button type="button" class="btn btn-success mb-2" data-bs-toggle="toast" data-bs-target="toastSuccess">Show success toast</button>
+                <button type="button" class="btn btn-danger mb-2" data-bs-toggle="toast" data-bs-target="toastDanger">Show danger toast</button>
+                <button type="button" class="btn btn-warning mb-2" data-bs-toggle="toast" data-bs-target="toastWarning">Show warning toast</button>
+                <button type="button" class="btn btn-info mb-2" data-bs-toggle="toast" data-bs-target="toastInfo">Show info toast</button>
+                <button type="button" class="btn btn-light mb-2" data-bs-toggle="toast" data-bs-target="toastLight">Show light toast</button>
+                <button type="button" class="btn btn-dark mb-2" data-bs-toggle="toast" data-bs-target="toastDark">Show dark toast</button>
                 <div class="toast-container position-fixed bottom-0 end-0 p-3">
+                  <div id="toastDefault" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+                    <div class="toast-header">
+                      <i class="bi bi-circle me-2"></i>
+                      <strong class="me-auto">Bootstrap</strong>
+                      <small>11 mins ago</small>
+                      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+                    </div>
+                    <div class="toast-body">
+                      Hello, world! This is a toast message.
+                    </div>
+                  </div>
                   <div id="toastPrimary" class="toast toast-primary" role="alert" aria-live="assertive" aria-atomic="true">
                     <div class="toast-header">
                       <i class="bi bi-circle me-2"></i>
@@ -625,18 +645,83 @@ const pageTitle = "General Components";
                       Hello, world! This is a toast message.
                     </div>
                   </div>
-                  <!--<button type="button" class="btn btn-warning" data-lte-showtoast="toastWarning">Show live toast</button>-->
-                  <!--<div data-lte-toast="toastWarning" class="toast toast-warning" role="alert" aria-live="assertive" aria-atomic="true">-->
-                  <!--  <div class="toast-header">-->
-                  <!--    <i class="bi bi-circle me-2"></i>-->
-                  <!--    <strong class="me-auto">Bootstrap</strong>-->
-                  <!--    <small>11 mins ago</small>-->
-                  <!--    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>-->
-                  <!--  </div>-->
-                  <!--  <div class="toast-body">-->
-                  <!--    Hello, world! This is a toast message.-->
-                  <!--  </div>-->
-                  <!--</div>-->
+                  <div id="toastSecondary" class="toast toast-secondary" role="alert" aria-live="assertive" aria-atomic="true">
+                    <div class="toast-header">
+                      <i class="bi bi-circle me-2"></i>
+                      <strong class="me-auto">Bootstrap</strong>
+                      <small>11 mins ago</small>
+                      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+                    </div>
+                    <div class="toast-body">
+                      Hello, world! This is a toast message.
+                    </div>
+                  </div>
+                  <div id="toastSuccess" class="toast toast-success" role="alert" aria-live="assertive" aria-atomic="true">
+                    <div class="toast-header">
+                      <i class="bi bi-circle me-2"></i>
+                      <strong class="me-auto">Bootstrap</strong>
+                      <small>11 mins ago</small>
+                      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+                    </div>
+                    <div class="toast-body">
+                      Hello, world! This is a toast message.
+                    </div>
+                  </div>
+                  <div id="toastDanger" class="toast toast-danger" role="alert" aria-live="assertive" aria-atomic="true">
+                    <div class="toast-header">
+                      <i class="bi bi-circle me-2"></i>
+                      <strong class="me-auto">Bootstrap</strong>
+                      <small>11 mins ago</small>
+                      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+                    </div>
+                    <div class="toast-body">
+                      Hello, world! This is a toast message.
+                    </div>
+                  </div>
+                  <div id="toastWarning" class="toast toast-warning" role="alert" aria-live="assertive" aria-atomic="true">
+                    <div class="toast-header">
+                      <i class="bi bi-circle me-2"></i>
+                      <strong class="me-auto">Bootstrap</strong>
+                      <small>11 mins ago</small>
+                      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+                    </div>
+                    <div class="toast-body">
+                      Hello, world! This is a toast message.
+                    </div>
+                  </div>
+                  <div id="toastInfo" class="toast toast-info" role="alert" aria-live="assertive" aria-atomic="true">
+                    <div class="toast-header">
+                      <i class="bi bi-circle me-2"></i>
+                      <strong class="me-auto">Bootstrap</strong>
+                      <small>11 mins ago</small>
+                      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+                    </div>
+                    <div class="toast-body">
+                      Hello, world! This is a toast message.
+                    </div>
+                  </div>
+                  <div id="toastLight" class="toast toast-light" role="alert" aria-live="assertive" aria-atomic="true">
+                    <div class="toast-header">
+                      <i class="bi bi-circle me-2"></i>
+                      <strong class="me-auto">Bootstrap</strong>
+                      <small>11 mins ago</small>
+                      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+                    </div>
+                    <div class="toast-body">
+                      Hello, world! This is a toast message.
+                    </div>
+                  </div>
+                  <div id="toastDark" class="toast toast-dark" role="alert" aria-live="assertive" aria-atomic="true">
+                    <div class="toast-header">
+                      <i class="bi bi-circle me-2"></i>
+                      <strong class="me-auto">Bootstrap</strong>
+                      <small>11 mins ago</small>
+                      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+                    </div>
+                    <div class="toast-body">
+                      Hello, world! This is a toast message.
+                    </div>
+                  </div>
                 </div>
               </div>
               <!--end::Body-->

src/scss/_toasts.scss

@@ -1,5 +1,5 @@
 /**
- * Toast styles to reflect Bootstrap colors
+ * Custom toast styles to reflect Bootstrap colors
  */
 .toast {
   min-width: 300px;
@@ -15,7 +15,6 @@
 }
 
 .toast-danger .toast-header {
-  //background-color: #dc3545 !important;
   color: $white !important;
   background-color: $red !important;
   border-color: $red;
@@ -141,4 +140,3 @@
   color: #1f2d3d;
   background-color: #ffce3a;
 }
-