github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

BS5 components

pull/5312/head
LEWE, GEORGE 2023-08-30 20:42:34 +02:00
parent e9c20b8c84
commit 3dc54671da
5 changed files with 289 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/html/components/_scripts.astro
View File

@ -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 (
@ -49,3 +52,21 @@ 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::JavaScript-->
<script is:inline>
const toastTrigger = document.getElementById('liveToastBtn');
const toastLiveExample = document.getElementById('liveToast');
if (toastTrigger) {
const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample);
toastTrigger.addEventListener('click', () => {
toastBootstrap.show();
})
}
</script>
<!--end::JavaScript-->

118
src/html/pages/components/general.astro
View File

@ -258,6 +258,10 @@ const pageTitle = "General Components";
<!--end::Body-->
</div>
<!--end::Button-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-md-6">
<!--begin::Button Group-->
<div class="card card-info card-outline mb-2">
<!--begin::Header-->
@ -321,10 +325,6 @@ const pageTitle = "General Components";
<!--end::Body-->
</div>
<!--end::Button Group-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-md-6">
<!--begin::Collapse-->
<div class="card card-primary card-outline mb-2">
<!--begin::Header-->
@ -575,19 +575,123 @@ const pageTitle = "General Components";
<!--end::Body-->
</div>
<!--end::Placeholder-->
<!--begin::Quick Example-->
<!--begin::Progress-->
<div class="card card-primary card-outline mb-2">
<!--begin::Header-->
<div class="card-header">
<div class="card-title">Quick Example</div>
<div class="card-title">Progress</div>
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body">
<div class="progress mb-2" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success" style="width: 25%; border-radius: 0.375rem;"></div>
</div>
<div class="progress mb-2" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 10%; border-radius: 0.375rem;"></div>
</div>
<div class="progress mb-2" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-info" style="width: 50%; border-radius: 0.375rem;"></div>
</div>
<div class="progress mb-2" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" style="width: 75%; border-radius: 0.375rem;"></div>
</div>
<div class="progress mb-2" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 100%; border-radius: 0.375rem;"></div>
</div>
</div>
<!--end::Body-->
</div>
<!--end::Quick Example-->
<!--end::Progress-->
<!--begin::Toast-->
<div class="card card-primary card-outline mb-2">
<!--begin::Header-->
<div class="card-header">
<div class="card-title">Toast</div>
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body">
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" 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="liveToast" 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>
</div>
<!--end::Body-->
</div>
<!--end::Toast-->
<!--begin::Tooltip-->
<div class="card card-primary card-outline mb-2">
<!--begin::Header-->
<div class="card-header">
<div class="card-title">Tooltip</div>
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body">
<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.</p>
</div>
<!--end::Body-->
</div>
<!--end::Toast-->
<!--begin::Spinner-->
<div class="card card-success card-outline mb-2">
<!--begin::Header-->
<div class="card-header">
<div class="card-title">Spinner</div>
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<!--end::Body-->
</div>
<!--end::Spinner-->
</div>
<!--end::Col-->
</div>

14
src/html/pages/forms/general.astro
View File

@ -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-2">
<!--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-2">
<!--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-2">
<!--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-2">
<!--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-2">
<!--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-2">
<!--begin::Header-->
<div class="card-header">
<div class="card-title">Form Validation</div>

144
src/scss/_toasts.scss Normal file
View File

@ -0,0 +1,144 @@
/**
* Toast styles to reflect Bootstrap colors
*/
.toast {
min-width: 300px;
margin: 8px;
}
.toast .toast-body {
color: $black;
background-color: $gray-100;
/* stylelint-disable */
border-radius: 0 0 .25rem .25rem;
/* stylelint-enable */
}
.toast-danger .toast-header {
//background-color: #dc3545 !important;
color: $white !important;
background-color: $red !important;
border-color: $red;
}
.toast-danger .toast-header button {
color: $white !important;
}
.toast-danger .toast-body {
color: $white;
background-color: $red-300;
}
.toast-dark .toast-header {
color: $white !important;
background-color: $gray-900 !important;
border-color: $gray-700;
}
.toast-dark .toast-header button {
color: $white !important;
--bs-btn-close-color: $white;
}
.toast-dark .toast-body {
color: $white;
background-color: $gray-700;
}
.toast-info .toast-header {
color: $white !important;
background-color: #17a2b8 !important;
border-color: #17a2b8;
}
.toast-info .toast-header button {
color: $white !important;
--bs-btn-close-color: $white;
}
.toast-info .toast-body {
color: $white;
background-color: #1fc8e3;
}
.toast-light .toast-header {
color: #1f2d3d !important;
background-color: $gray-100 !important;
border-color: $gray-100;
}
.toast-light .toast-header button {
color: #1f2d3d !important;
--bs-btn-close-color: #1f2d3d;
}
.toast-light .toast-body {
color: #1f2d3d;
background-color: $white;
}
.toast-primary .toast-header {
color: $white !important;
background-color: #007bff !important;
border-color: #007bff;
}
.toast-primary .toast-header button {
color: $white !important;
--bs-btn-close-color: $white;
}
.toast-primary .toast-body {
color: $white;
background-color: #3395ff;
}
.toast-secondary .toast-header {
color: $white !important;
background-color: $gray-600 !important;
border-color: $gray-600;
}
.toast-secondary .toast-header button {
color: $white !important;
--bs-btn-close-color: $white;
}
.toast-secondary .toast-body {
color: $white;
background-color: #868e96;
}
.toast-success .toast-header {
color: $white !important;
background-color: #28a745 !important;
border-color: #28a745;
}
.toast-success .toast-header button {
color: $white !important;
--bs-btn-close-color: $white;
}
.toast-success .toast-body {
color: $white;
background-color: #34ce57;
}
.toast-warning .toast-header {
color: #1f2d3d !important;
background-color: $yellow !important;
border-color: $yellow;
}
.toast-warning .toast-header button {
color: #1f2d3d !important;
--bs-btn-close-color: #1f2d3d;
}
.toast-warning .toast-body {
color: #1f2d3d;
background-color: #ffce3a;
}

2
src/scss/adminlte.scss
View File

@ -60,12 +60,12 @@
// Bootstrap Utilities
@import "bootstrap/scss/utilities/api";
// AdminLTE Configuration
// ---------------------------------------------------
@import "variables";
@import "variables-dark";
@import "mixins";
@import "toasts";
// AdiminLTE Parts
// ---------------------------------------------------