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

Merge remote-tracking branch 'upstream/master' into release-prepare

pull/5331/head
Daniel 2024-05-18 16:22:25 +05:30
parent 9803ffc207 6a579ca02f
commit 30f35347f9
50 changed files with 9746 additions and 5967 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/FUNDING.yml vendored Normal file
View File

@ -0,0 +1,2 @@
github: danny007in
custom: ["https://www.paypal.me/daniel007in"]

2
.github/workflows/bundlewatch.yml vendored
View File

@ -20,7 +20,7 @@ jobs:
steps: steps:
- name: Clone repository - name: Clone repository
uses: actions/checkout@v3 uses: actions/checkout@v4
with: with:
persist-credentials: false persist-credentials: false

2
.github/workflows/codeql.yml vendored
View File

@ -23,7 +23,7 @@ jobs:
steps: steps:
- name: Checkout repository - name: Checkout repository
uses: actions/checkout@v3 uses: actions/checkout@v4
with: with:
persist-credentials: false persist-credentials: false

2
.github/workflows/docs.yml vendored
View File

@ -20,7 +20,7 @@ jobs:
steps: steps:
- name: Clone repository - name: Clone repository
uses: actions/checkout@v3 uses: actions/checkout@v4
with: with:
persist-credentials: false persist-credentials: false

2
.github/workflows/lint.yml vendored
View File

@ -20,7 +20,7 @@ jobs:
steps: steps:
- name: Clone repository - name: Clone repository
uses: actions/checkout@v3 uses: actions/checkout@v4
with: with:
persist-credentials: false persist-credentials: false

10
.github/workflows/node-sass.yml vendored
View File

@ -20,7 +20,7 @@ jobs:
steps: steps:
- name: Clone repository - name: Clone repository
uses: actions/checkout@v3 uses: actions/checkout@v4
with: with:
persist-credentials: false persist-credentials: false
@ -43,10 +43,12 @@ jobs:
- name: Check built CSS files - name: Check built CSS files
shell: bash shell: bash
run: | run: |
if [[ $(find dist-sass/css/ -name "*.css" | xargs grep -F "\$" | wc -l | bc) -eq 0 ]]; then SASS_VARS_FOUND=$(find "dist-sass/css/" -type f -name "*.css" -print0 | xargs -0 --no-run-if-empty grep -F "\$" || true)
echo "All good, no Sass variables found" if [[ -z "$SASS_VARS_FOUND" ]]; then
echo "All good, no Sass variables found!"
exit 0 exit 0
else else
echo "Found Sass variables!" echo "Found $(echo "$SASS_VARS_FOUND" | wc -l | bc) Sass variables:"
echo "$SASS_VARS_FOUND"
exit 1 exit 1
fi fi

2
.github/workflows/release.yml vendored
View File

@ -10,7 +10,7 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: Clone repository - name: Clone repository
uses: actions/checkout@v3 uses: actions/checkout@v4
with: with:
persist-credentials: false persist-credentials: false

7
README.md
View File

@ -40,9 +40,14 @@ To compile the dist files you need Node.js/npm, clone/download the repo then:
- Clone this Repository to your machine and change to `master` branch. - Clone this Repository to your machine and change to `master` branch.
- Go to Cloned Folder. - Go to Cloned Folder.
- In cli/bash run `npm install` it will install dependency from `package.json`. - In cli/bash run `npm install` it will install dependency from `package.json`.
- After installation complets, run `npm run dev` - After installation completes, run `npm run dev`
- Cool, Send urs changes in PR to `master` branch. - Cool, Send urs changes in PR to `master` branch.
## Sponsorship
Support AdminLTE development by becoming a sponsor.
[Github Sponsors](https://github.com/sponsors/danny007in) or
[PayPal](https://www.paypal.me/daniel007in)
## License ## License

13455
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

59
package.json
View File

@ -57,39 +57,40 @@
"url": "https://github.com/ColorlibHQ/AdminLTE/issues" "url": "https://github.com/ColorlibHQ/AdminLTE/issues"
}, },
"devDependencies": { "devDependencies": {
"@astrojs/mdx": "^1.0.3", "@astrojs/check": "^0.6.0",
"@rollup/plugin-typescript": "^11.1.3", "@astrojs/mdx": "^3.0.0",
"@typescript-eslint/eslint-plugin": "^6.6.0", "@rollup/plugin-typescript": "^11.1.6",
"@typescript-eslint/parser": "^6.6.0", "@typescript-eslint/eslint-plugin": "^7.5.0",
"astro": "^3.0.8", "@typescript-eslint/parser": "^7.5.0",
"autoprefixer": "^10.4.15", "astro": "^4.5.17",
"bootstrap": "^5.3.1", "autoprefixer": "^10.4.19",
"bootstrap": "^5.3.2",
"bundlewatch": "^0.3.3", "bundlewatch": "^0.3.3",
"clean-css-cli": "^5.6.2", "clean-css-cli": "^5.6.3",
"concurrently": "^8.2.1", "concurrently": "^8.2.2",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"eslint": "^8.49.0", "eslint": "^8.55.0",
"eslint-config-xo": "^0.43.1", "eslint-config-xo": "^0.44.0",
"eslint-config-xo-typescript": "^1.0.1", "eslint-config-xo-typescript": "^4.0.0",
"eslint-plugin-astro": "^0.29.0", "eslint-plugin-astro": "^0.34.0",
"eslint-plugin-import": "^2.28.1", "eslint-plugin-import": "^2.29.1",
"eslint-plugin-unicorn": "^48.0.1", "eslint-plugin-unicorn": "^52.0.0",
"fs-extra": "^11.1.1", "fs-extra": "^11.1.1",
"js-beautify": "^1.14.9", "js-beautify": "^1.14.11",
"lockfile-lint": "^4.12.1", "lockfile-lint": "^4.13.2",
"nodemon": "^3.0.1", "nodemon": "^3.0.2",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"postcss": "^8.4.29", "postcss": "^8.4.31",
"postcss-cli": "^10.1.0", "postcss-cli": "^11.0.0",
"prettier": "^3.0.3", "prettier": "^3.2.5",
"prettier-plugin-astro": "^0.12.0", "prettier-plugin-astro": "^0.13.0",
"rollup": "^3.29.1", "rollup": "^4.17.2",
"rtlcss": "^4.1.0", "rtlcss": "^4.1.1",
"sass": "^1.66.1", "sass": "^1.77.1",
"stylelint": "^15.10.3", "stylelint": "^16.3.1",
"stylelint-config-twbs-bootstrap": "^11.0.1", "stylelint-config-twbs-bootstrap": "^14.1.0",
"terser": "^5.19.4", "terser": "^5.31.0",
"tslib": "^2.6.2", "tslib": "^2.6.2",
"typescript": "^5.2.2" "typescript": "^5.4.4"
} }
} }

20
src/html/components/_head.astro
View File

@ -19,28 +19,18 @@ const cssPath = isRtl ? ".rtl" : "";
/> />
<!--end::Primary Meta Tags--> <!--end::Primary Meta Tags-->
<!--begin::Fonts--> <!--begin::Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <link
href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap"
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
crossorigin="anonymous"
/> />
<!--end::Fonts--> <!--end::Fonts-->
<!--begin::Third Party Plugin(OverlayScrollbars)--> <!--begin::Third Party Plugin(OverlayScrollbars)-->
<link <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/styles/overlayscrollbars.min.css" integrity="sha256-dSokZseQNT08wYEWiz5iLI8QPlKxG+TswNRD8k35cpg=" crossorigin="anonymous">
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/styles/overlayscrollbars.min.css"
integrity="sha256-LWLZPJ7X1jJLI5OG5695qDemW1qQ7lNdbTfQ64ylbUY="
crossorigin="anonymous"
/>
<!--end::Third Party Plugin(OverlayScrollbars)--> <!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(Bootstrap Icons)--> <!--begin::Third Party Plugin(Bootstrap Icons)-->
<link <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.min.css" integrity="sha256-Qsx5lrStHZyR9REqhUF8iQt73X06c8LGIUPzpOhwRrI=" crossorigin="anonymous">
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css"
integrity="sha256-BicZsQAhkGHIoR//IB2amPN5SrRb3fHB8tFsnqRAwnk="
crossorigin="anonymous"
>
<!--end::Third Party Plugin(Bootstrap Icons)--> <!--end::Third Party Plugin(Bootstrap Icons)-->
<!--begin::Required Plugin(AdminLTE)--> <!--begin::Required Plugin(AdminLTE)-->
<link rel="stylesheet" href={path + "/css/adminlte" + cssPath + ".css"} /> <link rel="stylesheet" href={path + "/css/adminlte" + cssPath + ".css"} />

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

@ -4,26 +4,15 @@ const adminlteJsUrl = path + "/js/adminlte.js";
--- ---
<!--begin::Third Party Plugin(OverlayScrollbars)--> <!--begin::Third Party Plugin(OverlayScrollbars)-->
<script <script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-H2VM7BKda+v2Z4+DRy69uknwxjyDRhszjXFhsL4gD3w=" crossorigin="anonymous"></script>
src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/browser/overlayscrollbars.browser.es6.min.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 <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha256-whL0tQWoY1Ku1iskqPFvmZ+CHsvmRWx/PIoEvIeWh4I=" crossorigin="anonymous"></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 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8=" crossorigin="anonymous"></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> <script src={adminlteJsUrl} is:inline></script>
<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure--> <!--end::Required Plugin(AdminLTE)-->
<!--begin::OverlayScrollbars Configure-->
<script is:inline> <script is:inline>
const SELECTOR_SIDEBAR_WRAPPER = ".sidebar-wrapper"; const SELECTOR_SIDEBAR_WRAPPER = ".sidebar-wrapper";
const Default = { const Default = {
@ -31,7 +20,6 @@ const adminlteJsUrl = path + "/js/adminlte.js";
scrollbarAutoHide: "leave", scrollbarAutoHide: "leave",
scrollbarClickScroll: true, scrollbarClickScroll: true,
}; };
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER); const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
if ( if (

4
src/html/components/dashboard/_footer.astro
View File

@ -9,8 +9,8 @@ const year = new Date().getFullYear();
<!--end::To the end--> <!--end::To the end-->
<!--begin::Copyright--> <!--begin::Copyright-->
<strong> <strong>
Copyright &copy; 2014-{year} Copyright &copy; 2014-{year}&nbsp;
<a href="https://adminlte.io">AdminLTE.io</a>. <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
</strong> </strong>
All rights reserved. All rights reserved.
<!--end::Copyright--> <!--end::Copyright-->

9
src/html/components/dashboard/_sidenav.astro
View File

@ -216,6 +216,15 @@ const htmlPath = convertPathToHtml(path);
</p> </p>
</a> </a>
<ul class="nav nav-treeview"> <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"> <li class="nav-item">
<a <a
href={htmlPath + "/UI/timeline.html"} href={htmlPath + "/UI/timeline.html"}

10
src/html/components/dashboard/_topbar.astro
View File

@ -154,6 +154,15 @@ const distPath = path;
</li> </li>
<!--end::Notifications Dropdown Menu--> <!--end::Notifications Dropdown Menu-->
<!--begin::Fullscreen Toggle-->
<li class="nav-item">
<a class="nav-link" href="#" data-lte-toggle="fullscreen">
<i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none;"></i>
</a>
</li>
<!--end::Fullscreen Toggle-->
<!--begin::User Menu Dropdown--> <!--begin::User Menu Dropdown-->
<li class="nav-item dropdown user-menu"> <li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"> <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@ -172,7 +181,6 @@ const distPath = path;
class="rounded-circle shadow" class="rounded-circle shadow"
alt="User Image" alt="User Image"
/> />
<p> <p>
Alexander Pierce - Web Developer Alexander Pierce - Web Developer
<small>Member since Nov. 2023</small> <small>Member since Nov. 2023</small>

1451
src/html/pages/UI/general.astro Normal file
View File

File diff suppressed because it is too large Load Diff

6
src/html/pages/docs/color-mode.astro
View File

@ -60,8 +60,10 @@ const page = "color-mode";
<div class="callout callout-info"> <div class="callout callout-info">
<h5 class="fw-bold">Tips</h5> <h5 class="fw-bold">Tips</h5>
<p> <p>
First Visit <a href="https://getbootstrap.com/docs/5.3/customize/color-modes/" target="_blank" rel="noopener noreferrer" class="callout-link">
https://getbootstrap.com/docs/5.3/customize/color-modes/ Color modes in Bootstrap
</a> allow you to switch between light and dark modes. You can do this using the data-bs-theme attribute. You can also create your own custom color modes.
</p> </p>
</div> </div>
</div> </div>

5
src/html/pages/docs/components/main-header.astro
View File

@ -59,8 +59,9 @@ const distPath = path;
<h5 class="fw-bold">Reminder!</h5> <h5 class="fw-bold">Reminder!</h5>
<p> <p>
AdminLTE uses all of Bootstrap 5 components. It's a good start AdminLTE uses all of Bootstrap 5 components. It's a good start
to review the [Bootstrap to review the <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer" class="callout-link">
documentation](https://getbootstrap.com/) to get an idea of the Bootstrap documentation
</a> to get an idea of the
various components that this documentation <b>does not</b> cover. various components that this documentation <b>does not</b> cover.
</p> </p>
</div> </div>

2
src/html/pages/docs/layout.astro
View File

@ -55,7 +55,7 @@ const page = "layout";
<div class="callout callout-info mb-4"> <div class="callout callout-info mb-4">
<h5 class="fw-bold">Tips</h5> <h5 class="fw-bold">Tips</h5>
<p> <p>
The <a href="/starter.html" class="link-primary"> The <a href="/starter.html" target="_blank" rel="noopener noreferrer" class="callout-link">
starter page starter page
</a> is a good place to start building your app if you’d like to </a> is a good place to start building your app if you’d like to
start from scratch. start from scratch.

6
src/html/pages/examples/lockscreen.astro
View File

@ -49,11 +49,11 @@ const year = new Date().getFullYear();
Enter your password to retrieve your session Enter your password to retrieve your session
</div> </div>
<div class="text-center"> <div class="text-center">
<a href="login.html">Or sign in as a different user</a> <a href="login.html" class="text-decoration-none">Or sign in as a different user</a>
</div> </div>
<div class="lockscreen-footer text-center"> <div class="lockscreen-footer text-center">
Copyright © 2014-{year} Copyright © 2014-{year} &nbsp;
<b><a href="https://adminlte.io">AdminLTE.io</a></b><br /> <b><a href="https://adminlte.io" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">AdminLTE.io</a></b> <br />
All rights reserved All rights reserved
</div> </div>
</div> </div>

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

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

55
src/html/pages/index.astro
View File

@ -11,7 +11,7 @@ const mainPage = "dashboard";
const page = "index"; const page = "index";
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<!--begin::Head--> <!--begin::Head-->
<head> <head>
@ -91,7 +91,10 @@ const page = "index";
d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
></path> ></path>
</svg> </svg>
<a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"> <a
href="#"
class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"
>
More info <i class="bi bi-link-45deg"></i> More info <i class="bi bi-link-45deg"></i>
</a> </a>
</div> </div>
@ -117,7 +120,10 @@ const page = "index";
d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z" d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
></path> ></path>
</svg> </svg>
<a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"> <a
href="#"
class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"
>
More info <i class="bi bi-link-45deg"></i> More info <i class="bi bi-link-45deg"></i>
</a> </a>
</div> </div>
@ -143,7 +149,10 @@ const page = "index";
d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z" d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"
></path> ></path>
</svg> </svg>
<a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"> <a
href="#"
class="small-box-footer link-dark link-underline-opacity-0 link-underline-opacity-50-hover"
>
More info <i class="bi bi-link-45deg"></i> More info <i class="bi bi-link-45deg"></i>
</a> </a>
</div> </div>
@ -176,7 +185,10 @@ const page = "index";
d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z" d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
></path> ></path>
</svg> </svg>
<a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"> <a
href="#"
class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"
>
More info <i class="bi bi-link-45deg"></i> More info <i class="bi bi-link-45deg"></i>
</a> </a>
</div> </div>
@ -201,7 +213,7 @@ const page = "index";
<!-- /.card --> <!-- /.card -->
<!-- DIRECT CHAT --> <!-- DIRECT CHAT -->
<div class="card direct-chat direct-chat-primary"> <div class="card direct-chat direct-chat-primary mb-4">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Direct Chat</h3> <h3 class="card-title">Direct Chat</h3>
@ -510,7 +522,7 @@ const page = "index";
<!-- Start col --> <!-- Start col -->
<div class="col-lg-5 connectedSortable"> <div class="col-lg-5 connectedSortable">
<div <div
class="card mb-4 text-white bg-primary bg-gradient border-primary" class="card text-white bg-primary bg-gradient border-primary mb-4"
> >
<div class="card-header border-0"> <div class="card-header border-0">
<h3 class="card-title">Sales Value</h3> <h3 class="card-title">Sales Value</h3>
@ -532,15 +544,15 @@ const page = "index";
<!--begin::Row--> <!--begin::Row-->
<div class="row"> <div class="row">
<div class="col-4 text-center"> <div class="col-4 text-center">
<div id="sparkline-1"></div> <div id="sparkline-1" class="text-dark"></div>
<div class="text-white">Visitors</div> <div class="text-white">Visitors</div>
</div> </div>
<div class="col-4 text-center"> <div class="col-4 text-center">
<div id="sparkline-2"></div> <div id="sparkline-2" class="text-dark"></div>
<div class="text-white">Online</div> <div class="text-white">Online</div>
</div> </div>
<div class="col-4 text-center"> <div class="col-4 text-center">
<div id="sparkline-3"></div> <div id="sparkline-3" class="text-dark"></div>
<div class="text-white">Sales</div> <div class="text-white">Sales</div>
</div> </div>
</div> </div>
@ -569,8 +581,7 @@ const page = "index";
<script <script
src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js" src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"
integrity="sha256-ipiJrswvAR4VAx/th+6zWsdeYmVae0iJuiR+6OqHJHQ=" integrity="sha256-ipiJrswvAR4VAx/th+6zWsdeYmVae0iJuiR+6OqHJHQ="
crossorigin="anonymous" crossorigin="anonymous"></script>
></script>
<!-- sortablejs --> <!-- sortablejs -->
<script is:inline> <script is:inline>
@ -579,11 +590,12 @@ const page = "index";
connectedSortables.forEach((connectedSortable) => { connectedSortables.forEach((connectedSortable) => {
let sortable = new Sortable(connectedSortable, { let sortable = new Sortable(connectedSortable, {
group: "shared", group: "shared",
handle: ".card-header",
}); });
}); });
const cardHeaders = document.querySelectorAll( const cardHeaders = document.querySelectorAll(
".connectedSortable .card-header" ".connectedSortable .card-header",
); );
cardHeaders.forEach((cardHeader) => { cardHeaders.forEach((cardHeader) => {
cardHeader.style.cursor = "move"; cardHeader.style.cursor = "move";
@ -594,8 +606,7 @@ const page = "index";
<script <script
src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
crossorigin="anonymous" crossorigin="anonymous"></script>
></script>
<!-- ChartJS --> <!-- ChartJS -->
<script is:inline> <script is:inline>
@ -652,7 +663,7 @@ const page = "index";
const sales_chart = new ApexCharts( const sales_chart = new ApexCharts(
document.querySelector("#revenue-chart"), document.querySelector("#revenue-chart"),
sales_chart_options sales_chart_options,
); );
sales_chart.render(); sales_chart.render();
</script> </script>
@ -661,13 +672,11 @@ const page = "index";
<script <script
src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/js/jsvectormap.min.js" src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/js/jsvectormap.min.js"
integrity="sha256-/t1nN2956BT869E6H4V1dnt0X5pAQHPytli+1nTZm2Y=" integrity="sha256-/t1nN2956BT869E6H4V1dnt0X5pAQHPytli+1nTZm2Y="
crossorigin="anonymous" crossorigin="anonymous"></script>
></script>
<script <script
src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/maps/world.js" src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/maps/world.js"
integrity="sha256-XPpPaZlU8S/HWf7FZLAncLg2SAkP8ScUTII89x9D3lY=" integrity="sha256-XPpPaZlU8S/HWf7FZLAncLg2SAkP8ScUTII89x9D3lY="
crossorigin="anonymous" crossorigin="anonymous"></script>
></script>
<!-- jsvectormap --> <!-- jsvectormap -->
<script is:inline> <script is:inline>
@ -719,7 +728,7 @@ const page = "index";
const sparkline1 = new ApexCharts( const sparkline1 = new ApexCharts(
document.querySelector("#sparkline-1"), document.querySelector("#sparkline-1"),
option_sparkline1 option_sparkline1,
); );
sparkline1.render(); sparkline1.render();
@ -750,7 +759,7 @@ const page = "index";
const sparkline2 = new ApexCharts( const sparkline2 = new ApexCharts(
document.querySelector("#sparkline-2"), document.querySelector("#sparkline-2"),
option_sparkline2 option_sparkline2,
); );
sparkline2.render(); sparkline2.render();
@ -781,7 +790,7 @@ const page = "index";
const sparkline3 = new ApexCharts( const sparkline3 = new ApexCharts(
document.querySelector("#sparkline-3"), document.querySelector("#sparkline-3"),
option_sparkline3 option_sparkline3,
); );
sparkline3.render(); sparkline3.render();
</script> </script>

170
src/html/pages/index2.astro
View File

@ -11,7 +11,7 @@ const mainPage = "dashboard";
const page = "index2"; const page = "index2";
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<!--begin::Head--> <!--begin::Head-->
<head> <head>
@ -309,7 +309,7 @@ const page = "index2";
<!-- Start col --> <!-- Start col -->
<div class="col-md-8"> <div class="col-md-8">
<!--begin::Row--> <!--begin::Row-->
<div class="row"> <div class="row g-4 mb-4">
<div class="col-md-6"> <div class="col-md-6">
<!-- DIRECT CHAT --> <!-- DIRECT CHAT -->
<div class="card direct-chat direct-chat-warning"> <div class="card direct-chat direct-chat-warning">
@ -329,7 +329,8 @@ const page = "index2";
data-lte-toggle="card-collapse" data-lte-toggle="card-collapse"
> >
<i data-lte-icon="expand" class="bi bi-plus-lg"></i> <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i> <i data-lte-icon="collapse" class="bi bi-dash-lg"
></i>
</button> </button>
<button <button
type="button" type="button"
@ -622,7 +623,7 @@ const page = "index2";
<div class="col-md-6"> <div class="col-md-6">
<!-- USERS LIST --> <!-- USERS LIST -->
<div class="card mb-4"> <div class="card">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Latest Members</h3> <h3 class="card-title">Latest Members</h3>
@ -636,7 +637,8 @@ const page = "index2";
data-lte-toggle="card-collapse" data-lte-toggle="card-collapse"
> >
<i data-lte-icon="expand" class="bi bi-plus-lg"></i> <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i> <i data-lte-icon="collapse" class="bi bi-dash-lg"
></i>
</button> </button>
<button <button
type="button" type="button"
@ -767,7 +769,7 @@ const page = "index2";
</div> </div>
<!-- /.card-body --> <!-- /.card-body -->
<div class="card-footer text-center"> <div class="card-footer text-center">
<a href="javascript:">View All Users</a> <a href="javascript:" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View All Users</a>
</div> </div>
<!-- /.card-footer --> <!-- /.card-footer -->
</div> </div>
@ -777,7 +779,7 @@ const page = "index2";
</div> </div>
<!--end::Row--> <!--end::Row-->
<!-- TABLE: LATEST ORDERS --> <!--begin::Latest Order Widget-->
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Latest Orders</h3> <h3 class="card-title">Latest Orders</h3>
@ -815,7 +817,7 @@ const page = "index2";
<tbody> <tbody>
<tr> <tr>
<td> <td>
<a href="pages/examples/invoice.html">OR9842</a> <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR9842</a>
</td> </td>
<td>Call of Duty IV</td> <td>Call of Duty IV</td>
<td> <td>
@ -824,36 +826,24 @@ const page = "index2";
</span> </span>
</td> </td>
<td> <td>
<div <div id="table-sparkline-1"></div>
class="sparkbar"
data-color="#00a65a"
data-height="20"
>
90,80,90,-70,61,-83,63
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<a href="pages/examples/invoice.html">OR1848</a> <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR1848</a>
</td> </td>
<td>Samsung Smart TV</td> <td>Samsung Smart TV</td>
<td> <td>
<span class="badge text-bg-warning">Pending</span> <span class="badge text-bg-warning">Pending</span>
</td> </td>
<td> <td>
<div <div id="table-sparkline-2"></div>
class="sparkbar"
data-color="#f39c12"
data-height="20"
>
90,80,-90,70,61,-83,68
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<a href="pages/examples/invoice.html">OR7429</a> <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a>
</td> </td>
<td>iPhone 6 Plus</td> <td>iPhone 6 Plus</td>
<td> <td>
@ -862,54 +852,36 @@ const page = "index2";
</span> </span>
</td> </td>
<td> <td>
<div <div id="table-sparkline-3"></div>
class="sparkbar"
data-color="#f56954"
data-height="20"
>
90,-80,90,70,-61,83,63
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<a href="pages/examples/invoice.html">OR7429</a> <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a>
</td> </td>
<td>Samsung Smart TV</td> <td>Samsung Smart TV</td>
<td> <td>
<span class="badge text-bg-info">Processing</span> <span class="badge text-bg-info">Processing</span>
</td> </td>
<td> <td>
<div <div id="table-sparkline-4"></div>
class="sparkbar"
data-color="#00c0ef"
data-height="20"
>
90,80,-90,70,-61,83,63
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<a href="pages/examples/invoice.html">OR1848</a> <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR1848</a>
</td> </td>
<td>Samsung Smart TV</td> <td>Samsung Smart TV</td>
<td> <td>
<span class="badge text-bg-warning">Pending</span> <span class="badge text-bg-warning">Pending</span>
</td> </td>
<td> <td>
<div <div id="table-sparkline-5"></div>
class="sparkbar"
data-color="#f39c12"
data-height="20"
>
90,80,-90,70,61,-83,68
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<a href="pages/examples/invoice.html">OR7429</a> <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a>
</td> </td>
<td>iPhone 6 Plus</td> <td>iPhone 6 Plus</td>
<td> <td>
@ -918,31 +890,19 @@ const page = "index2";
</span> </span>
</td> </td>
<td> <td>
<div <div id="table-sparkline-6"></div>
class="sparkbar"
data-color="#f56954"
data-height="20"
>
90,-80,90,70,-61,83,63
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<a href="pages/examples/invoice.html">OR9842</a> <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR9842</a>
</td> </td>
<td>Call of Duty IV</td> <td>Call of Duty IV</td>
<td> <td>
<span class="badge text-bg-success">Shipped</span> <span class="badge text-bg-success">Shipped</span>
</td> </td>
<td> <td>
<div <div id="table-sparkline-7"></div>
class="sparkbar"
data-color="#00a65a"
data-height="20"
>
90,80,90,-70,61,-83,63
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -1233,8 +1193,7 @@ const page = "index2";
<script <script
src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
crossorigin="anonymous" crossorigin="anonymous"></script>
></script>
<script is:inline> <script is:inline>
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
@ -1250,7 +1209,7 @@ const page = "index2";
// - MONTHLY SALES CHART - // - MONTHLY SALES CHART -
//----------------------- //-----------------------
var sales_chart_options = { const sales_chart_options = {
series: [ series: [
{ {
name: "Digital Goods", name: "Digital Goods",
@ -1297,9 +1256,9 @@ const page = "index2";
}, },
}; };
var sales_chart = new ApexCharts( const sales_chart = new ApexCharts(
document.querySelector("#sales-chart"), document.querySelector("#sales-chart"),
sales_chart_options sales_chart_options,
); );
sales_chart.render(); sales_chart.render();
@ -1307,11 +1266,80 @@ const page = "index2";
// - END MONTHLY SALES CHART - // - END MONTHLY SALES CHART -
//--------------------------- //---------------------------
function createSparklineChart(selector, data) {
const options = {
series: [{ data }],
chart: {
type: "line",
width: 150,
height: 30,
sparkline: {
enabled: true,
},
},
colors: ["var(--bs-primary)"],
stroke: {
width: 2,
},
tooltip: {
fixed: {
enabled: false,
},
x: {
show: false,
},
y: {
title: {
formatter: function (seriesName) {
return "";
},
},
},
marker: {
show: false,
},
},
};
const chart = new ApexCharts(document.querySelector(selector), options);
chart.render();
}
const table_sparkline_1_data = [
25, 66, 41, 89, 63, 25, 44, 12, 36, 9, 54,
];
const table_sparkline_2_data = [
12, 56, 21, 39, 73, 45, 64, 52, 36, 59, 44,
];
const table_sparkline_3_data = [
15, 46, 21, 59, 33, 15, 34, 42, 56, 19, 64,
];
const table_sparkline_4_data = [
30, 56, 31, 69, 43, 35, 24, 32, 46, 29, 64,
];
const table_sparkline_5_data = [
20, 76, 51, 79, 53, 35, 54, 22, 36, 49, 64,
];
const table_sparkline_6_data = [
5, 36, 11, 69, 23, 15, 14, 42, 26, 19, 44,
];
const table_sparkline_7_data = [
12, 56, 21, 39, 73, 45, 64, 52, 36, 59, 74,
];
createSparklineChart("#table-sparkline-1", table_sparkline_1_data);
createSparklineChart("#table-sparkline-2", table_sparkline_2_data);
createSparklineChart("#table-sparkline-3", table_sparkline_3_data);
createSparklineChart("#table-sparkline-4", table_sparkline_4_data);
createSparklineChart("#table-sparkline-5", table_sparkline_5_data);
createSparklineChart("#table-sparkline-6", table_sparkline_6_data);
createSparklineChart("#table-sparkline-7", table_sparkline_7_data);
//------------- //-------------
// - PIE CHART - // - PIE CHART -
//------------- //-------------
var pie_chart_options = { const pie_chart_options = {
series: [700, 500, 400, 600, 300, 100], series: [700, 500, 400, 600, 300, 100],
chart: { chart: {
type: "donut", type: "donut",
@ -1330,9 +1358,9 @@ const page = "index2";
], ],
}; };
var pie_chart = new ApexCharts( const pie_chart = new ApexCharts(
document.querySelector("#pie-chart"), document.querySelector("#pie-chart"),
pie_chart_options pie_chart_options,
); );
pie_chart.render(); pie_chart.render();

24
src/html/pages/index3.astro
View File

@ -65,7 +65,7 @@ const page = "index3";
<div class="card-header border-0"> <div class="card-header border-0">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<h3 class="card-title">Online Store Visitors</h3> <h3 class="card-title">Online Store Visitors</h3>
<a href="javascript:void(0);">View Report</a> <a href="javascript:void(0);" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View Report</a>
</div> </div>
</div> </div>
<div class="card-body"> <div class="card-body">
@ -100,7 +100,7 @@ const page = "index3";
</div> </div>
<!-- /.card --> <!-- /.card -->
<div class="card"> <div class="card mb-4">
<div class="card-header border-0"> <div class="card-header border-0">
<h3 class="card-title">Products</h3> <h3 class="card-title">Products</h3>
<div class="card-tools"> <div class="card-tools">
@ -157,7 +157,7 @@ const page = "index3";
</td> </td>
<td>$29 USD</td> <td>$29 USD</td>
<td> <td>
<small class="text-warning me-1"> <small class="text-info me-1">
<i class="bi bi-arrow-down"></i> <i class="bi bi-arrow-down"></i>
0.5% 0.5%
</small> </small>
@ -228,7 +228,7 @@ const page = "index3";
<div class="card-header border-0"> <div class="card-header border-0">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<h3 class="card-title">Sales</h3> <h3 class="card-title">Sales</h3>
<a href="javascript:void(0);">View Report</a> <a href="javascript:void(0);" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View Report</a>
</div> </div>
</div> </div>
<div class="card-body"> <div class="card-body">
@ -298,7 +298,7 @@ const page = "index3";
</p> </p>
<p class="d-flex flex-column text-end"> <p class="d-flex flex-column text-end">
<span class="fw-bold"> <span class="fw-bold">
<i class="ion ion-android-arrow-up text-success"></i> 12% <i class="bi bi-graph-up-arrow text-success"></i> 12%
</span> </span>
<span class="text-secondary">CONVERSION RATE</span> <span class="text-secondary">CONVERSION RATE</span>
</p> </p>
@ -307,7 +307,7 @@ const page = "index3";
<div <div
class="d-flex justify-content-between align-items-center border-bottom mb-3" class="d-flex justify-content-between align-items-center border-bottom mb-3"
> >
<p class="text-warning fs-2"> <p class="text-info fs-2">
<svg <svg
height="32" height="32"
fill="none" fill="none"
@ -326,7 +326,7 @@ const page = "index3";
</p> </p>
<p class="d-flex flex-column text-end"> <p class="d-flex flex-column text-end">
<span class="fw-bold"> <span class="fw-bold">
<i class="ion ion-android-arrow-up text-warning"></i> 0.8% <i class="bi bi-graph-up-arrow text-info"></i> 0.8%
</span> </span>
<span class="text-secondary">SALES RATE</span> <span class="text-secondary">SALES RATE</span>
</p> </p>
@ -354,7 +354,7 @@ const page = "index3";
</p> </p>
<p class="d-flex flex-column text-end"> <p class="d-flex flex-column text-end">
<span class="fw-bold"> <span class="fw-bold">
<i class="ion ion-android-arrow-down text-danger"></i> <i class="bi bi-graph-down-arrow text-danger"></i>
1% 1%
</span> </span>
<span class="text-secondary">REGISTRATION RATE</span> <span class="text-secondary">REGISTRATION RATE</span>
@ -393,7 +393,7 @@ const page = "index3";
// IT'S ALL JUST JUNK FOR DEMO // IT'S ALL JUST JUNK FOR DEMO
// ++++++++++++++++++++++++++++++++++++++++++ // ++++++++++++++++++++++++++++++++++++++++++
var visitors_chart_options = { const visitors_chart_options = {
series: [ series: [
{ {
name: "High - 2023", name: "High - 2023",
@ -433,13 +433,13 @@ const page = "index3";
}, },
}; };
var visitors_chart = new ApexCharts( const visitors_chart = new ApexCharts(
document.querySelector("#visitors-chart"), document.querySelector("#visitors-chart"),
visitors_chart_options visitors_chart_options
); );
visitors_chart.render(); visitors_chart.render();
var sales_chart_options = { const sales_chart_options = {
series: [ series: [
{ {
name: "Net Profit", name: "Net Profit",
@ -502,7 +502,7 @@ const page = "index3";
}, },
}; };
var sales_chart = new ApexCharts( const sales_chart = new ApexCharts(
document.querySelector("#sales-chart"), document.querySelector("#sales-chart"),
sales_chart_options sales_chart_options
); );

40
src/html/pages/tables/simple.astro
View File

@ -56,7 +56,7 @@ const page = "simple";
<!--begin::Row--> <!--begin::Row-->
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="card"> <div class="card mb-4">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Bordered Table</h3> <h3 class="card-title">Bordered Table</h3>
</div> </div>
@ -72,7 +72,7 @@ const page = "simple";
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr class="align-middle">
<td>1.</td> <td>1.</td>
<td>Update software</td> <td>Update software</td>
<td> <td>
@ -86,7 +86,7 @@ const page = "simple";
</td> </td>
<td><span class="badge text-bg-danger">55%</span></td> <td><span class="badge text-bg-danger">55%</span></td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>2.</td> <td>2.</td>
<td>Clean database</td> <td>Clean database</td>
<td> <td>
@ -102,7 +102,7 @@ const page = "simple";
<span class="badge text-bg-warning">70%</span> <span class="badge text-bg-warning">70%</span>
</td> </td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>3.</td> <td>3.</td>
<td>Cron job running</td> <td>Cron job running</td>
<td> <td>
@ -120,7 +120,7 @@ const page = "simple";
<span class="badge text-bg-primary">30%</span> <span class="badge text-bg-primary">30%</span>
</td> </td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>4.</td> <td>4.</td>
<td>Fix and squish bugs</td> <td>Fix and squish bugs</td>
<td> <td>
@ -164,7 +164,7 @@ const page = "simple";
</div> </div>
<!-- /.card --> <!-- /.card -->
<div class="card"> <div class="card mb-4">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Condensed Full Width Table</h3> <h3 class="card-title">Condensed Full Width Table</h3>
</div> </div>
@ -180,7 +180,7 @@ const page = "simple";
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr class="align-middle">
<td>1.</td> <td>1.</td>
<td>Update software</td> <td>Update software</td>
<td> <td>
@ -194,7 +194,7 @@ const page = "simple";
</td> </td>
<td><span class="badge text-bg-danger">55%</span></td> <td><span class="badge text-bg-danger">55%</span></td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>2.</td> <td>2.</td>
<td>Clean database</td> <td>Clean database</td>
<td> <td>
@ -210,7 +210,7 @@ const page = "simple";
<span class="badge text-bg-warning">70%</span> <span class="badge text-bg-warning">70%</span>
</td> </td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>3.</td> <td>3.</td>
<td>Cron job running</td> <td>Cron job running</td>
<td> <td>
@ -228,7 +228,7 @@ const page = "simple";
<span class="badge text-bg-primary">30%</span> <span class="badge text-bg-primary">30%</span>
</td> </td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>4.</td> <td>4.</td>
<td>Fix and squish bugs</td> <td>Fix and squish bugs</td>
<td> <td>
@ -255,7 +255,7 @@ const page = "simple";
</div> </div>
<!-- /.col --> <!-- /.col -->
<div class="col-md-6"> <div class="col-md-6">
<div class="card"> <div class="card mb-4">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Simple Full Width Table</h3> <h3 class="card-title">Simple Full Width Table</h3>
@ -291,7 +291,7 @@ const page = "simple";
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr class="align-middle">
<td>1.</td> <td>1.</td>
<td>Update software</td> <td>Update software</td>
<td> <td>
@ -305,7 +305,7 @@ const page = "simple";
</td> </td>
<td><span class="badge text-bg-danger">55%</span></td> <td><span class="badge text-bg-danger">55%</span></td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>2.</td> <td>2.</td>
<td>Clean database</td> <td>Clean database</td>
<td> <td>
@ -321,7 +321,7 @@ const page = "simple";
<span class="badge text-bg-warning">70%</span> <span class="badge text-bg-warning">70%</span>
</td> </td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>3.</td> <td>3.</td>
<td>Cron job running</td> <td>Cron job running</td>
<td> <td>
@ -339,7 +339,7 @@ const page = "simple";
<span class="badge text-bg-primary">30%</span> <span class="badge text-bg-primary">30%</span>
</td> </td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>4.</td> <td>4.</td>
<td>Fix and squish bugs</td> <td>Fix and squish bugs</td>
<td> <td>
@ -364,7 +364,7 @@ const page = "simple";
</div> </div>
<!-- /.card --> <!-- /.card -->
<div class="card"> <div class="card mb-4">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Striped Full Width Table</h3> <h3 class="card-title">Striped Full Width Table</h3>
</div> </div>
@ -380,7 +380,7 @@ const page = "simple";
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr class="align-middle">
<td>1.</td> <td>1.</td>
<td>Update software</td> <td>Update software</td>
<td> <td>
@ -394,7 +394,7 @@ const page = "simple";
</td> </td>
<td><span class="badge text-bg-danger">55%</span></td> <td><span class="badge text-bg-danger">55%</span></td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>2.</td> <td>2.</td>
<td>Clean database</td> <td>Clean database</td>
<td> <td>
@ -410,7 +410,7 @@ const page = "simple";
<span class="badge text-bg-warning">70%</span> <span class="badge text-bg-warning">70%</span>
</td> </td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>3.</td> <td>3.</td>
<td>Cron job running</td> <td>Cron job running</td>
<td> <td>
@ -428,7 +428,7 @@ const page = "simple";
<span class="badge text-bg-primary">30%</span> <span class="badge text-bg-primary">30%</span>
</td> </td>
</tr> </tr>
<tr> <tr class="align-middle">
<td>4.</td> <td>4.</td>
<td>Fix and squish bugs</td> <td>Fix and squish bugs</td>
<td> <td>

6
src/html/pages/widgets/cards.astro
View File

@ -57,7 +57,7 @@ const page = "cards";
<h5 class="mb-2">Abilities</h5> <h5 class="mb-2">Abilities</h5>
<!--begin::Row--> <!--begin::Row-->
<div class="row"> <div class="row g-4 mb-4">
<div class="col-md-3"> <div class="col-md-3">
<div class="card card-primary collapsed-card"> <div class="card card-primary collapsed-card">
<div class="card-header"> <div class="card-header">
@ -158,7 +158,7 @@ const page = "cards";
<h5 class="mb-2">Card Outlined</h5> <h5 class="mb-2">Card Outlined</h5>
<!--begin::Row--> <!--begin::Row-->
<div class="row"> <div class="row g-4 mb-4">
<div class="col-md-3"> <div class="col-md-3">
<div class="card card-outline card-primary collapsed-card"> <div class="card card-outline card-primary collapsed-card">
<div class="card-header"> <div class="card-header">
@ -259,7 +259,7 @@ const page = "cards";
<h5 class="mb-2">Card with <code>.text-bg-*</code></h5> <h5 class="mb-2">Card with <code>.text-bg-*</code></h5>
<!--begin::Row--> <!--begin::Row-->
<div class="row"> <div class="row g-4 mb-4">
<div class="col-md-3"> <div class="col-md-3">
<div class="card text-bg-primary collapsed-card"> <div class="card text-bg-primary collapsed-card">
<div class="card-header"> <div class="card-header">

2
src/html/pages/widgets/small-box.astro
View File

@ -126,7 +126,7 @@ const page = "small-box";
d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z" d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"
></path> ></path>
</svg> </svg>
<a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"> <a href="#" class="small-box-footer link-dark link-underline-opacity-0 link-underline-opacity-50-hover">
More info <i class="bi bi-link-45deg"></i> More info <i class="bi bi-link-45deg"></i>
</a> </a>
</div> </div>

4
src/scss/_app-main.scss
View File

@ -12,6 +12,10 @@
padding: 0; padding: 0;
margin-bottom: 0; margin-bottom: 0;
line-height: 2.5rem; line-height: 2.5rem;
a {
text-decoration: none;
}
} }
} }
} }

4
src/scss/_app-sidebar.scss
View File

@ -187,7 +187,7 @@
.nav-arrow { .nav-arrow {
@include transition(transform $lte-transition-fn $lte-transition-speed); @include transition(transform $lte-transition-fn $lte-transition-speed);
transform: translateY(-50%) #{"/*rtl:rotate(180deg)*/"}; transform: translateY(-50%) #{"/*rtl:append:rotate(180deg)*/"};
animation-name: fadeIn; animation-name: fadeIn;
animation-duration: $lte-transition-speed; animation-duration: $lte-transition-speed;
animation-fill-mode: both; animation-fill-mode: both;
@ -244,7 +244,7 @@
> .nav-link { > .nav-link {
.nav-arrow { .nav-arrow {
transform: translateY(-50%) rotate(90deg) #{"/*rtl:rotate(90deg)*/"}; transform: translateY(-50%) rotate(90deg) #{"/*rtl:ignore*/"};
} }
} }
} }

48
src/scss/_bootstrap-variables.scss
View File

@ -607,7 +607,7 @@ $aspect-ratios: (
// scss-docs-start font-variables // scss-docs-start font-variables
// stylelint-disable value-keyword-case // stylelint-disable value-keyword-case
$font-family-sans-serif: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; // adminlte-modified $font-family-sans-serif: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; // adminlte-modified
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
// stylelint-enable value-keyword-case // stylelint-enable value-keyword-case
$font-family-base: var(--#{$prefix}font-sans-serif) !default; $font-family-base: var(--#{$prefix}font-sans-serif) !default;
@ -665,7 +665,7 @@ $headings-font-family: null !default;
$headings-font-style: null !default; $headings-font-style: null !default;
$headings-font-weight: 500 !default; $headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default; $headings-line-height: 1.2 !default;
$headings-color: null !default; $headings-color: inherit !default;
// scss-docs-end headings-variables // scss-docs-end headings-variables
// scss-docs-start display-headings // scss-docs-start display-headings
@ -715,6 +715,10 @@ $hr-border-color: null !default; // Allows for inherited colors
$hr-border-width: var(--#{$prefix}border-width) !default; $hr-border-width: var(--#{$prefix}border-width) !default;
$hr-opacity: .25 !default; $hr-opacity: .25 !default;
// scss-docs-start vr-variables
$vr-border-width: var(--#{$prefix}border-width) !default;
// scss-docs-end vr-variables
$legend-margin-bottom: .5rem !default; $legend-margin-bottom: .5rem !default;
$legend-font-size: 1.5rem !default; $legend-font-size: 1.5rem !default;
$legend-font-weight: null !default; $legend-font-weight: null !default;
@ -724,6 +728,7 @@ $dt-font-weight: $font-weight-bold !default;
$list-inline-padding: .5rem !default; $list-inline-padding: .5rem !default;
$mark-padding: .1875em !default; $mark-padding: .1875em !default;
$mark-color: $body-color !default;
$mark-bg: $yellow-100 !default; $mark-bg: $yellow-100 !default;
// scss-docs-end type-variables // scss-docs-end type-variables
@ -740,25 +745,25 @@ $table-cell-padding-x-sm: .25rem !default;
$table-cell-vertical-align: top !default; $table-cell-vertical-align: top !default;
$table-color: var(--#{$prefix}body-color) !default; $table-color: var(--#{$prefix}emphasis-color) !default;
$table-bg: transparent !default; $table-bg: var(--#{$prefix}body-bg) !default;
$table-accent-bg: transparent !default; $table-accent-bg: transparent !default;
$table-th-font-weight: null !default; $table-th-font-weight: null !default;
$table-striped-color: $table-color !default; $table-striped-color: $table-color !default;
$table-striped-bg-factor: .05 !default; $table-striped-bg-factor: .05 !default;
$table-striped-bg: rgba($black, $table-striped-bg-factor) !default; $table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
$table-active-color: $table-color !default; $table-active-color: $table-color !default;
$table-active-bg-factor: .1 !default; $table-active-bg-factor: .1 !default;
$table-active-bg: rgba($black, $table-active-bg-factor) !default; $table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
$table-hover-color: $table-color !default; $table-hover-color: $table-color !default;
$table-hover-bg-factor: .075 !default; $table-hover-bg-factor: .075 !default;
$table-hover-bg: rgba($black, $table-hover-bg-factor) !default; $table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
$table-border-factor: .1 !default; $table-border-factor: .2 !default;
$table-border-width: var(--#{$prefix}border-width) !default; $table-border-width: var(--#{$prefix}border-width) !default;
$table-border-color: var(--#{$prefix}border-color) !default; $table-border-color: var(--#{$prefix}border-color) !default;
@ -848,6 +853,7 @@ $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
$btn-link-color: var(--#{$prefix}link-color) !default; $btn-link-color: var(--#{$prefix}link-color) !default;
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default; $btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
$btn-link-disabled-color: $gray-600 !default; $btn-link-disabled-color: $gray-600 !default;
$btn-link-focus-shadow-rgb: to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;
// Allows for customizing button radius independently from global border radius // Allows for customizing button radius independently from global border radius
$btn-border-radius: var(--#{$prefix}border-radius) !default; $btn-border-radius: var(--#{$prefix}border-radius) !default;
@ -909,7 +915,7 @@ $input-disabled-border-color: null !default;
$input-color: var(--#{$prefix}body-color) !default; $input-color: var(--#{$prefix}body-color) !default;
$input-border-color: var(--#{$prefix}border-color) !default; $input-border-color: var(--#{$prefix}border-color) !default;
$input-border-width: $input-btn-border-width !default; $input-border-width: $input-btn-border-width !default;
$input-box-shadow: $box-shadow-inset !default; $input-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
$input-border-radius: var(--#{$prefix}border-radius) !default; $input-border-radius: var(--#{$prefix}border-radius) !default;
$input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default; $input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
@ -1025,7 +1031,7 @@ $form-select-feedback-icon-size: $input-height-inner-half $input-height-i
$form-select-border-width: $input-border-width !default; $form-select-border-width: $input-border-width !default;
$form-select-border-color: $input-border-color !default; $form-select-border-color: $input-border-color !default;
$form-select-border-radius: $input-border-radius !default; $form-select-border-radius: $input-border-radius !default;
$form-select-box-shadow: $box-shadow-inset !default; $form-select-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
$form-select-focus-border-color: $input-focus-border-color !default; $form-select-focus-border-color: $input-focus-border-color !default;
$form-select-focus-width: $input-focus-width !default; $form-select-focus-width: $input-focus-width !default;
@ -1048,9 +1054,9 @@ $form-select-transition: $input-transition !default;
$form-range-track-width: 100% !default; $form-range-track-width: 100% !default;
$form-range-track-height: .5rem !default; $form-range-track-height: .5rem !default;
$form-range-track-cursor: pointer !default; $form-range-track-cursor: pointer !default;
$form-range-track-bg: var(--#{$prefix}tertiary-bg) !default; $form-range-track-bg: var(--#{$prefix}secondary-bg) !default;
$form-range-track-border-radius: 1rem !default; $form-range-track-border-radius: 1rem !default;
$form-range-track-box-shadow: $box-shadow-inset !default; $form-range-track-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
$form-range-thumb-width: 1rem !default; $form-range-thumb-width: 1rem !default;
$form-range-thumb-height: $form-range-thumb-width !default; $form-range-thumb-height: $form-range-thumb-width !default;
@ -1226,7 +1232,8 @@ $navbar-dark-color: rgba($white, .55) !default;
$navbar-dark-hover-color: rgba($white, .75) !default; $navbar-dark-hover-color: rgba($white, .75) !default;
$navbar-dark-active-color: $white !default; $navbar-dark-active-color: $white !default;
$navbar-dark-disabled-color: rgba($white, .25) !default; $navbar-dark-disabled-color: rgba($white, .25) !default;
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default; $navbar-dark-icon-color: $navbar-dark-color !default;
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-dark-toggler-border-color: rgba($white, .1) !default; $navbar-dark-toggler-border-color: rgba($white, .1) !default;
$navbar-dark-brand-color: $navbar-dark-active-color !default; $navbar-dark-brand-color: $navbar-dark-active-color !default;
$navbar-dark-brand-hover-color: $navbar-dark-active-color !default; $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
@ -1248,10 +1255,10 @@ $dropdown-bg: var(--#{$prefix}body-bg) !default;
$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default; $dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
$dropdown-border-radius: var(--#{$prefix}border-radius) !default; $dropdown-border-radius: var(--#{$prefix}border-radius) !default;
$dropdown-border-width: var(--#{$prefix}border-width) !default; $dropdown-border-width: var(--#{$prefix}border-width) !default;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default; $dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
$dropdown-divider-bg: $dropdown-border-color !default; $dropdown-divider-bg: $dropdown-border-color !default;
$dropdown-divider-margin-y: $spacer * .5 !default; $dropdown-divider-margin-y: $spacer * .5 !default;
$dropdown-box-shadow: $box-shadow !default; $dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
$dropdown-link-color: var(--#{$prefix}body-color) !default; $dropdown-link-color: var(--#{$prefix}body-color) !default;
$dropdown-link-hover-color: $dropdown-link-color !default; $dropdown-link-hover-color: $dropdown-link-color !default;
@ -1439,8 +1446,8 @@ $popover-max-width: 276px !default;
$popover-border-width: var(--#{$prefix}border-width) !default; $popover-border-width: var(--#{$prefix}border-width) !default;
$popover-border-color: var(--#{$prefix}border-color-translucent) !default; $popover-border-color: var(--#{$prefix}border-color-translucent) !default;
$popover-border-radius: var(--#{$prefix}border-radius-lg) !default; $popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default; $popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
$popover-box-shadow: $box-shadow !default; $popover-box-shadow: var(--#{$prefix}box-shadow) !default;
$popover-header-font-size: $font-size-base !default; $popover-header-font-size: $font-size-base !default;
$popover-header-bg: var(--#{$prefix}secondary-bg) !default; $popover-header-bg: var(--#{$prefix}secondary-bg) !default;
@ -1514,8 +1521,8 @@ $modal-content-border-color: var(--#{$prefix}border-color-translucent) !d
$modal-content-border-width: var(--#{$prefix}border-width) !default; $modal-content-border-width: var(--#{$prefix}border-width) !default;
$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default; $modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default; $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs: $box-shadow-sm !default; $modal-content-box-shadow-xs: var(--#{$prefix}box-shadow-sm) !default;
$modal-content-box-shadow-sm-up: $box-shadow !default; $modal-content-box-shadow-sm-up: var(--#{$prefix}box-shadow) !default;
$modal-backdrop-bg: $black !default; $modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default; $modal-backdrop-opacity: .5 !default;
@ -1553,9 +1560,6 @@ $alert-margin-bottom: 1rem !default;
$alert-border-radius: var(--#{$prefix}border-radius) !default; $alert-border-radius: var(--#{$prefix}border-radius) !default;
$alert-link-font-weight: $font-weight-bold !default; $alert-link-font-weight: $font-weight-bold !default;
$alert-border-width: var(--#{$prefix}border-width) !default; $alert-border-width: var(--#{$prefix}border-width) !default;
$alert-bg-scale: -80% !default;
$alert-border-scale: -70% !default;
$alert-color-scale: 40% !default;
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
// scss-docs-end alert-variables // scss-docs-end alert-variables

6
src/scss/_callouts.scss
View File

@ -11,6 +11,11 @@
background-color: var(--#{$lte-prefix}callout-bg, var(--bs-gray-100)); background-color: var(--#{$lte-prefix}callout-bg, var(--bs-gray-100));
border-left: .25rem solid var(--#{$lte-prefix}callout-border, var(--bs-gray-300)); border-left: .25rem solid var(--#{$lte-prefix}callout-border, var(--bs-gray-300));
.callout-link {
font-weight: $lte-callout-link-font-weight;
color: var(--#{$prefix}callout-link-color);
}
h4 { h4 {
margin-bottom: .25rem; margin-bottom: .25rem;
} }
@ -30,5 +35,6 @@
--#{$lte-prefix}callout-color: var(--#{$prefix}#{$name}-text-emphasis); --#{$lte-prefix}callout-color: var(--#{$prefix}#{$name}-text-emphasis);
--#{$lte-prefix}callout-bg: var(--#{$prefix}#{$name}-bg-subtle); --#{$lte-prefix}callout-bg: var(--#{$prefix}#{$name}-bg-subtle);
--#{$lte-prefix}callout-border: var(--#{$prefix}#{$name}-border-subtle); --#{$lte-prefix}callout-border: var(--#{$prefix}#{$name}-border-subtle);
--#{$prefix}callout-link-color: var(--#{$prefix}#{$name}-text-emphasis);
} }
} }

1
src/scss/_cards.scss
View File

@ -172,6 +172,7 @@
} }
a { a {
text-decoration: none;
border-top: 3px solid transparent; border-top: 3px solid transparent;
&:hover { &:hover {

5
src/scss/_direct-chat.scss
View File

@ -169,11 +169,16 @@
@include clearfix(); @include clearfix();
padding: 10px; padding: 10px;
margin: 0; margin: 0;
text-decoration: none;
border-bottom: 1px solid rgba($black, .2); border-bottom: 1px solid rgba($black, .2);
&:last-of-type { &:last-of-type {
border-bottom: 0; border-bottom: 0;
} }
a {
text-decoration: none;
}
} }
} }

1
src/scss/_dropdown.scss
View File

@ -204,6 +204,7 @@
border-bottom: 1px solid var(--#{$prefix}border-color-translucent); border-bottom: 1px solid var(--#{$prefix}border-color-translucent);
a { a {
text-decoration: none;
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
color: var(--#{$prefix}body-color) !important; color: var(--#{$prefix}body-color) !important;
background-color: var(--#{$prefix}body-bg) !important; background-color: var(--#{$prefix}body-bg) !important;

12
src/scss/_info-box.scss
View File

@ -18,10 +18,10 @@
.progress { .progress {
height: 2px; height: 2px;
margin: 5px 0; margin: 5px 0;
background-color: rgba($black, .125); background-color: rgba(var(--#{$lte-prefix}card-variant-color-rgb), .125);
.progress-bar { .progress-bar {
background-color: $white; background-color: var(--#{$lte-prefix}card-variant-color);
} }
} }
@ -62,14 +62,6 @@
white-space: nowrap; white-space: nowrap;
} }
@each $name, $color in $theme-colors {
.info-box {
.progress-bar {
background-color: color-contrast($color);
}
}
}
.info-box-more { .info-box-more {
display: block; display: block;
} }

1
src/scss/_timeline.scss
View File

@ -58,6 +58,7 @@
// Link in header // Link in header
> a { > a {
font-weight: 600; font-weight: 600;
text-decoration: none;
} }
} }
// Item body and footer // Item body and footer

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

@ -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;
}
}
}
}
}
}

16
src/scss/_variables.scss
View File

@ -1,16 +1,17 @@
//
// Custom AdminLTE Variables // Custom AdminLTE Variables
//
// Prefix for :root CSS variables and others. // Prefix for :root CSS variables and others.
$lte-prefix: lte- !default; $lte-prefix: lte- !default;
// TRANSITIONS SETTINGS // TRANSITIONS SETTINGS
// -------------------------------------------------------- // --------------------------------------------------------
// Transition global options // Transition global options
$lte-transition-speed: .3s !default; $lte-transition-speed: .3s !default;
$lte-transition-fn: ease-in-out !default; $lte-transition-fn: ease-in-out !default;
// Sidebar // SIDEBAR
// -------------------------------------------------------- // --------------------------------------------------------
$lte-sidebar-width: 250px !default; $lte-sidebar-width: 250px !default;
$lte-sidebar-breakpoint: lg !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: ($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; $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-y: 0 !default;
$lte-content-padding-x: .5rem !default; $lte-content-padding-x: .5rem !default;
// MAIN CONTENT // MAIN CONTENT
// --------------------------------------------------------
$lte-app-content-bottom-area-height-sm: 3.5rem !default; $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-md: 6rem !default;
$lte-app-content-bottom-area-height-lg: 9rem !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-padding-x-compact: $lte-sidebar-padding-x-compact !default;
$lte-brand-link-border-buttom: 1px !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-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; $lte-card-title-font-size: 1.1rem !default;
@ -99,6 +101,10 @@ $lte-card-title-font-weight: $font-weight-normal !default;
// -------------------------------------------------------- // --------------------------------------------------------
$lte-progress-bar-border-radius: 1px !default; $lte-progress-bar-border-radius: 1px !default;
// CALLOUTS
// --------------------------------------------------------
$lte-callout-link-font-weight: $alert-link-font-weight !default;
// DIRECT CHAT // DIRECT CHAT
// -------------------------------------------------------- // --------------------------------------------------------
$lte-direct-chat-default-msg-bg: var(--#{$prefix}secondary-bg) !default; $lte-direct-chat-default-msg-bg: var(--#{$prefix}secondary-bg) !default;

1
src/scss/adminlte.scss
View File

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

1
src/scss/pages/_lockscreen.scss
View File

@ -18,6 +18,7 @@
a { a {
color: var(--#{$prefix}emphasis-color); color: var(--#{$prefix}emphasis-color);
text-decoration: none;
} }
} }

1
src/scss/pages/_login_and_register.scss
View File

@ -11,6 +11,7 @@
a { a {
color: var(--#{$prefix}secondary-color); color: var(--#{$prefix}secondary-color);
text-decoration: none;
} }
} }

1
src/scss/parts/_extra-components.scss
View File

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

4
src/ts/adminlte.ts
View File

@ -3,11 +3,13 @@ import PushMenu from './push-menu'
import Treeview from './treeview' import Treeview from './treeview'
import DirectChat from './direct-chat' import DirectChat from './direct-chat'
import CardWidget from './card-widget' import CardWidget from './card-widget'
import FullScreen from './fullscreen'
export { export {
Layout, Layout,
PushMenu, PushMenu,
Treeview, Treeview,
DirectChat, DirectChat,
CardWidget CardWidget,
FullScreen
} }

5
src/ts/card-widget.ts
View File

@ -1,7 +1,8 @@
/** /**
* -------------------------------------------- * --------------------------------------------
* AdminLTE card-widget.ts * @file AdminLTE card-widget.ts
* License MIT * @description Card widget for AdminLTE.
* @license MIT
* -------------------------------------------- * --------------------------------------------
*/ */

5
src/ts/direct-chat.ts
View File

@ -1,7 +1,8 @@
/** /**
* -------------------------------------------- * --------------------------------------------
* AdminLTE direct-chat.ts * @file AdminLTE direct-chat.ts
* License MIT * @description Direct chat for AdminLTE.
* @license MIT
* -------------------------------------------- * --------------------------------------------
*/ */

110
src/ts/fullscreen.ts Normal file
View File

@ -0,0 +1,110 @@
/**
* --------------------------------------------
* @file AdminLTE fullscreen.ts
* @description Fullscreen plugin for AdminLTE.
* @license MIT
* --------------------------------------------
*/
import {
onDOMContentLoaded
} from './util/index'
/**
* Constants
* ============================================================================
*/
const DATA_KEY = 'lte.fullscreen'
const EVENT_KEY = `.${DATA_KEY}`
const EVENT_MAXIMIZED = `maximized${EVENT_KEY}`
const EVENT_MINIMIZED = `minimized${EVENT_KEY}`
const SELECTOR_FULLSCREEN_TOGGLE = '[data-lte-toggle="fullscreen"]'
const SELECTOR_MAXIMIZE_ICON = '[data-lte-icon="maximize"]'
const SELECTOR_MINIMIZE_ICON = '[data-lte-icon="minimize"]'
/**
* Class Definition.
* ============================================================================
*/
class FullScreen {
_element: HTMLElement
_config: undefined
constructor(element: HTMLElement, config?: undefined) {
this._element = element
this._config = config
}
inFullScreen(): void {
const event = new Event(EVENT_MAXIMIZED)
const iconMaximize = document.querySelector<HTMLElement>(SELECTOR_MAXIMIZE_ICON)
const iconMinimize = document.querySelector<HTMLElement>(SELECTOR_MINIMIZE_ICON)
void document.documentElement.requestFullscreen()
if (iconMaximize) {
iconMaximize.style.display = 'none'
}
if (iconMinimize) {
iconMinimize.style.display = 'block'
}
this._element.dispatchEvent(event)
}
outFullscreen(): void {
const event = new Event(EVENT_MINIMIZED)
const iconMaximize = document.querySelector<HTMLElement>(SELECTOR_MAXIMIZE_ICON)
const iconMinimize = document.querySelector<HTMLElement>(SELECTOR_MINIMIZE_ICON)
void document.exitFullscreen()
if (iconMaximize) {
iconMaximize.style.display = 'block'
}
if (iconMinimize) {
iconMinimize.style.display = 'none'
}
this._element.dispatchEvent(event)
}
toggleFullScreen(): void {
if (document.fullscreenEnabled) {
if (document.fullscreenElement) {
this.outFullscreen()
} else {
this.inFullScreen()
}
}
}
}
/**
* Data Api implementation
* ============================================================================
*/
onDOMContentLoaded(() => {
const buttons = document.querySelectorAll(SELECTOR_FULLSCREEN_TOGGLE)
buttons.forEach(btn => {
btn.addEventListener('click', event => {
event.preventDefault()
const target = event.target as HTMLElement
const button = target.closest(SELECTOR_FULLSCREEN_TOGGLE) as HTMLElement | undefined
if (button) {
const data = new FullScreen(button, undefined)
data.toggleFullScreen()
}
})
})
})
export default FullScreen

5
src/ts/layout.ts
View File

@ -1,7 +1,8 @@
/** /**
* -------------------------------------------- * --------------------------------------------
* AdminLTE layout.ts * @file AdminLTE layout.ts
* License MIT * @description Layout for AdminLTE.
* @license MIT
* -------------------------------------------- * --------------------------------------------
*/ */

5
src/ts/push-menu.ts
View File

@ -1,7 +1,8 @@
/** /**
* -------------------------------------------- * --------------------------------------------
* AdminLTE push-menu.ts * @file AdminLTE push-menu.ts
* License MIT * @description Push menu for AdminLTE.
* @license MIT
* -------------------------------------------- * --------------------------------------------
*/ */

23
src/ts/treeview.ts
View File

@ -1,7 +1,8 @@
/** /**
* -------------------------------------------- * --------------------------------------------
* AdminLTE treeview.ts * @file AdminLTE treeview.ts
* License MIT * @description Treeview plugin for AdminLTE.
* @license MIT
* -------------------------------------------- * --------------------------------------------
*/ */
@ -32,11 +33,13 @@ const SELECTOR_TREEVIEW_MENU = '.nav-treeview'
const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="treeview"]' const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="treeview"]'
const Default = { const Default = {
animationSpeed: 300 animationSpeed: 300,
accordion: true
} }
type Config = { type Config = {
animationSpeed: number; animationSpeed: number;
accordion: boolean;
} }
/** /**
@ -56,6 +59,20 @@ class Treeview {
open(): void { open(): void {
const event = new Event(EVENT_EXPANDED) const event = new Event(EVENT_EXPANDED)
if (this._config.accordion) {
const openMenuList = this._element.parentElement?.querySelectorAll(`${SELECTOR_NAV_ITEM}.${CLASS_NAME_MENU_OPEN}`)
openMenuList?.forEach(openMenu => {
if (openMenu !== this._element.parentElement) {
openMenu.classList.remove(CLASS_NAME_MENU_OPEN)
const childElement = openMenu?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
if (childElement) {
slideUp(childElement, this._config.animationSpeed)
}
}
})
}
this._element.classList.add(CLASS_NAME_MENU_OPEN) this._element.classList.add(CLASS_NAME_MENU_OPEN)
const childElement = this._element?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined const childElement = this._element?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined

2
src/ts/util/index.ts
View File

@ -83,7 +83,7 @@ const slideDown = (target: HTMLElement, duration = 500) => {
}, duration) }, duration)
} }
/* TOOGLE */ /* TOGGLE */
const slideToggle = (target: HTMLElement, duration = 500) => { const slideToggle = (target: HTMLElement, duration = 500) => {
if (window.getComputedStyle(target).display === 'none') { if (window.getComputedStyle(target).display === 'none') {
slideDown(target, duration) slideDown(target, duration)