Bs5 Components

src/html/components/_scripts.astro

@@ -9,29 +9,32 @@ const adminlteJsUrl = path + "/js/adminlte.js";
   integrity="sha256-NRZchBuHZWSXldqrtAOeCZpucH/1n1ToJ3C8mSK95NU="
   crossorigin="anonymous"
 ></script>
-<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
+<!--end::Third Party Plugin(OverlayScrollbars)-->
+<!--begin::Required Plugin(popperjs for Bootstrap 5)-->
 <script
   src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
   integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE"
   crossorigin="anonymous"
 ></script>
-<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
+<!--end::Required Plugin(popperjs for Bootstrap 5)-->
+<!--begin::Required Plugin(Bootstrap 5)-->
 <script
   src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
   integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ"
   crossorigin="anonymous"
 ></script>
-<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
+<!--end::Required Plugin(Bootstrap 5)-->
+<!--begin::Required Plugin(AdminLTE)-->
 <script src={adminlteJsUrl} is:inline></script>
-<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
+<!--end::Required Plugin(AdminLTE)-->
+<!--begin::OverlayScrollbars Configure-->
 <script is:inline>
   const SELECTOR_SIDEBAR_WRAPPER = ".sidebar-wrapper";
   const Default = {
     scrollbarTheme: "os-theme-light",
     scrollbarAutoHide: "leave",
     scrollbarClickScroll: true,
   };
-
   document.addEventListener("DOMContentLoaded", function () {
     const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
     if (
@@ -49,3 +52,22 @@ const adminlteJsUrl = path + "/js/adminlte.js";
   });
 </script>
 <!--end::OverlayScrollbars Configure-->
+<!--begin::Bootstrap Tooltips-->
+<script is:inline>
+  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
+</script>
+<!--end::Bootstrap Tooltips-->
+<!--begin::Bootstrap Toasts-->
+<script is:inline>
+  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::Bootstrap Toasts-->

src/html/components/dashboard/_sidenav.astro

@@ -1,6 +1,6 @@
 ---
-import { convertPathToHtml } from "../../../utils/index.js";
-const { path, mainPage, page } = Astro.props;
+import {convertPathToHtml} from "../../../utils/index.js";
+const {path, mainPage, page} = Astro.props;
 const htmlPath = convertPathToHtml(path);
 ---
 
@@ -125,7 +125,7 @@ const htmlPath = convertPathToHtml(path);
             <p>
               Layout Options
               <span class="nav-badge badge text-bg-secondary me-3"
-                >6</span
+              >6</span
               >
               <i class="nav-arrow bi bi-chevron-right"></i>
             </p>
@@ -216,6 +216,15 @@ const htmlPath = convertPathToHtml(path);
             </p>
           </a>
           <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/UI/general.html"}
+                class:list={["nav-link", page === "bsgeneral" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>General Elements</p>
+              </a>
+            </li>
             <li class="nav-item">
               <a
                 href={htmlPath + "/UI/timeline.html"}

src/html/pages/forms/general.astro

@@ -58,7 +58,7 @@ const page = "general";
               <!--begin::Col-->
               <div class="col-12">
                 <div class="callout callout-info">
-                  For detailed documentaion of Form visit <a
+                  For detailed documentation of Form visit <a
                     href="https://getbootstrap.com/docs/5.3/forms/overview/"
                     target="_blank"
                     rel="noopener noreferrer"
@@ -72,7 +72,7 @@ const page = "general";
               <!--begin::Col-->
               <div class="col-md-6">
                 <!--begin::Quick Example-->
-                <div class="card card-primary card-outline">
+                <div class="card card-primary card-outline mb-4">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Quick Example</div>
@@ -140,7 +140,7 @@ const page = "general";
                 </div>
                 <!--end::Quick Example-->
                 <!--begin::Input Group-->
-                <div class="card card-success card-outline">
+                <div class="card card-success card-outline mb-4">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Input Group</div>
@@ -234,7 +234,7 @@ const page = "general";
                 </div>
                 <!--end::Input Group-->
                 <!--begin::Horizontal Form-->
-                <div class="card card-warning card-outline">
+                <div class="card card-warning card-outline mb-4">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Horizontal Form</div>
@@ -348,7 +348,7 @@ const page = "general";
               <!--begin::Col-->
               <div class="col-md-6">
                 <!--begin::Different Height-->
-                <div class="card card-secondary card-outline">
+                <div class="card card-secondary card-outline mb-4">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Different Height</div>
@@ -381,7 +381,7 @@ const page = "general";
                 </div>
                 <!--end::Different Height-->
                 <!--begin::Different Width-->
-                <div class="card card-danger card-outline">
+                <div class="card card-danger card-outline mb-4">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Different Width</div>
@@ -425,7 +425,7 @@ const page = "general";
                 </div>
                 <!--end::Different Width-->
                 <!--begin::Form Validation-->
-                <div class="card card-info card-outline">
+                <div class="card card-info card-outline mb-4">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Form Validation</div>

src/scss/_toasts.scss

@@ -0,0 +1,71 @@
+/**
+ * Custom toast styles to reflect Bootstrap colors
+ */
+
+/**
+ * Get subtle BG color.
+ * Returns the subtle bg color for a given color name.
+ *
+ * @param string $value - Bootstrap color name
+ * @return string - Bootstrap subtle bg color
+ */
+@function get-subtle-bg-color($value) {
+  @if $value == "primary" {
+    @return $primary-bg-subtle;
+  } @else if $value == "secondary" {
+    @return $secondary-bg-subtle;
+  } @else if $value == "success" {
+    @return $success-bg-subtle;
+  } @else if $value == "info" {
+    @return $info-bg-subtle;
+  } @else if $value == "warning" {
+    @return $warning-bg-subtle;
+  } @else if $value == "danger" {
+    @return $danger-bg-subtle;
+  } @else if $value == "light" {
+    @return $light-bg-subtle;
+  } @else if $value == "dark" {
+    @return $dark-bg-subtle;
+  } @else {
+    @return $value;
+  }
+}
+
+/**
+ * Get button close SVG.
+ * Returns an either white or black button SVG dependent on the given color name.
+ *
+ * @param string $value - Bootstrap color name
+ * @return string - Close button SVG URL
+ */
+@function get-btn-close-svg($value) {
+  @if $value == "primary" or $value == "secondary" or $value == "success" or $value == "danger" or $value == "dark" {
+    @return "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e\")";
+  } @else {
+    @return "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e\")";
+  }
+}
+
+//
+// Adjusting size and margin
+//
+.toast {
+  min-width: 300px;
+  margin: 8px;
+}
+
+//
+// Color variants
+//
+@each $name, $color in $theme-colors {
+  .toast-#{$name} {
+    --#{$prefix}toast-header-color: #{color-contrast($color)};
+    --#{$prefix}toast-header-bg: #{$color};
+    --#{$prefix}toast-header-border-color: #{$color};
+    --#{$prefix}toast-border-color: #{$color};
+    --#{$prefix}toast-bg: #{get-subtle-bg-color($name)};
+  }
+  .toast-#{$name} .btn-close {
+    --#{$prefix}btn-close-bg: #{get-btn-close-svg($name)};
+  }
+}

src/scss/_variables.scss

@@ -1,16 +1,17 @@
+//
 // Custom AdminLTE Variables
+//
 
 // Prefix for :root CSS variables and others.
 $lte-prefix:                      lte- !default;
 
 // TRANSITIONS SETTINGS
 // --------------------------------------------------------
-
 // Transition global options
 $lte-transition-speed:            .3s !default;
 $lte-transition-fn:               ease-in-out !default;
 
-// Sidebar
+// SIDEBAR
 // --------------------------------------------------------
 $lte-sidebar-width:               250px !default;
 $lte-sidebar-breakpoint:          lg !default;
@@ -58,11 +59,13 @@ $lte-app-header-link-padding-y:       $navbar-padding-y !default;
 $lte-app-header-height:               ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
 $lte-app-header-height-compact:       ($nav-link-height-compact + ($lte-app-header-link-padding-y * 2)) !default;
 
-// Content padding
+// CONTENT PADDING
+// --------------------------------------------------------
 $lte-content-padding-y:           0 !default;
 $lte-content-padding-x:           .5rem !default;
 
 // MAIN CONTENT
+// --------------------------------------------------------
 $lte-app-content-bottom-area-height-sm: 3.5rem !default;
 $lte-app-content-bottom-area-height-md: 6rem !default;
 $lte-app-content-bottom-area-height-lg: 9rem !default;
@@ -88,8 +91,7 @@ $lte-brand-link-padding-x:         $lte-sidebar-padding-x !default;
 $lte-brand-link-padding-x-compact: $lte-sidebar-padding-x-compact !default;
 $lte-brand-link-border-buttom:    1px !default;
 
-
-// Cards
+// CARDS
 // --------------------------------------------------------
 $lte-card-shadow: 0 0 1px rgba(var(--#{$prefix}body-color-rgb), .125), 0 1px 3px rgba(var(--#{$prefix}body-color-rgb), .2) !default;
 $lte-card-title-font-size: 1.1rem !default;

src/scss/adminlte.scss

@@ -60,7 +60,6 @@
 // Bootstrap Utilities
 @import "bootstrap/scss/utilities/api";
 
-
 // AdminLTE Configuration
 // ---------------------------------------------------
 @import "variables";

src/scss/parts/_extra-components.scss

@@ -6,3 +6,4 @@
 @import "../info-box";
 @import "../timeline";
 @import "../direct-chat";
+@import "../toasts";