Merge pull request #5312 from glewe/bs5-components

Bs5 Components

src/html/components/_scripts.astro

@@ -9,21 +9,25 @@ 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/core@2.11.7/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/bootstrap@5.3.0-alpha3/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 = {
@@ -31,7 +35,6 @@ const adminlteJsUrl = path + "/js/adminlte.js";
     scrollbarAutoHide: "leave",
     scrollbarClickScroll: true,
   };
-
   document.addEventListener("DOMContentLoaded", function () {
     const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
     if (

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 === "general" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>General</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,33 @@
+//
+// Toast
+//
+
+@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: var(--#{$prefix}#{$name}-bg-subtle);
+
+    @if color-contrast($color) == $color-contrast-light {
+      .btn-close {
+        @include btn-close-white();
+      }
+    }
+  }
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    @each $name, $color in $theme-colors {
+      .toast-#{$name} {
+        @if color-contrast($color) == $color-contrast-dark {
+          .btn-close {
+            --#{$prefix}btn-close-white-filter: none;
+          }
+        }
+      }
+    }
+  }
+}

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";