Compare commits
35 Commits
v4.0.0-bet
...
v4.0.0-bet
| Author | SHA1 | Date | |
|---|---|---|---|
|
d9e6519d85 | ||
|
|
bdda97a727 | ||
|
|
0cf8cd4d10 | ||
|
|
1774b42fad | ||
|
|
79703897f0 | ||
|
|
f34dc849fb | ||
|
|
00a7e97c31 | ||
|
|
d3a877025a | ||
|
|
26b66a2d5b | ||
|
|
d5113d6b03 | ||
|
|
4f65a9296f | ||
|
|
fc842df7bf | ||
|
|
562842d2ac | ||
|
|
27bae7fbc1 | ||
|
|
4b841a5c1e | ||
|
|
ad25b07f56 | ||
|
|
53f9e44a81 | ||
|
|
ee675afccb | ||
|
|
b29afe148e | ||
|
|
f9f316197a | ||
|
|
4f9b29d494 | ||
|
|
83619db217 | ||
|
|
059d4e7947 | ||
|
|
7e81d3267a | ||
|
|
ab910fe1ec | ||
|
|
a07ca85efb | ||
|
|
d4e2adfdb1 | ||
|
|
0c4b2ec82d | ||
|
|
98dc2f6d5d | ||
|
|
572dbf900f | ||
|
|
2ffcd8e1b5 | ||
|
|
f0e666d109 | ||
|
|
b0b5fd798a | ||
|
|
ecce37d9d8 | ||
|
|
601b1bd603 |
18
.npmignore
18
.npmignore
@@ -5,3 +5,21 @@
|
||||
/.github/
|
||||
/.temp/
|
||||
/.lgtm.yml
|
||||
/.cache/
|
||||
/.idea/
|
||||
/.browserlistrc
|
||||
/.bundlewatch.config.json
|
||||
/.editorconfig
|
||||
/.eslintignore
|
||||
/.eslintrc.json
|
||||
/.gitattributes
|
||||
/.gitignore
|
||||
/.gitpod.yml
|
||||
/.stylelintignore
|
||||
/.stylelintrc.json
|
||||
/composer.json
|
||||
/tsconfig.json
|
||||
/src/assets/
|
||||
/src/config/
|
||||
/src/html/
|
||||
/src/utils/
|
||||
|
||||
2907
package-lock.json
generated
2907
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
38
package.json
38
package.json
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "admin-lte",
|
||||
"description": "Responsive open source admin dashboard and control panel.",
|
||||
"version": "4.0.0-beta1",
|
||||
"version": "4.0.0-beta2",
|
||||
"license": "MIT",
|
||||
"author": "Colorlib <https://colorlib.com>",
|
||||
"main": "dist/js/adminlte.min.js",
|
||||
@@ -57,15 +57,15 @@
|
||||
"url": "https://github.com/ColorlibHQ/AdminLTE/issues"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/check": "^0.6.0",
|
||||
"@astrojs/mdx": "^3.0.0",
|
||||
"@astrojs/check": "^0.9.3",
|
||||
"@astrojs/mdx": "^3.1.5",
|
||||
"@rollup/plugin-typescript": "^11.1.6",
|
||||
"@typescript-eslint/eslint-plugin": "^7.5.0",
|
||||
"@typescript-eslint/parser": "^7.5.0",
|
||||
"astro": "^4.5.17",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"astro": "^4.15.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"bootstrap": "^5.3.2",
|
||||
"bundlewatch": "^0.3.3",
|
||||
"bundlewatch": "^0.4.0",
|
||||
"clean-css-cli": "^5.6.3",
|
||||
"concurrently": "^8.2.2",
|
||||
"cross-env": "^7.0.3",
|
||||
@@ -77,20 +77,20 @@
|
||||
"eslint-plugin-unicorn": "^52.0.0",
|
||||
"fs-extra": "^11.1.1",
|
||||
"js-beautify": "^1.15.1",
|
||||
"lockfile-lint": "^4.13.2",
|
||||
"nodemon": "^3.0.2",
|
||||
"lockfile-lint": "^4.14.0",
|
||||
"nodemon": "^3.1.2",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.4.31",
|
||||
"postcss": "^8.4.41",
|
||||
"postcss-cli": "^11.0.0",
|
||||
"prettier": "^3.2.5",
|
||||
"prettier-plugin-astro": "^0.13.0",
|
||||
"rollup": "^4.17.2",
|
||||
"rtlcss": "^4.1.1",
|
||||
"sass": "^1.77.1",
|
||||
"stylelint": "^16.3.1",
|
||||
"stylelint-config-twbs-bootstrap": "^14.1.0",
|
||||
"terser": "^5.31.0",
|
||||
"tslib": "^2.6.2",
|
||||
"typescript": "^5.4.4"
|
||||
"prettier": "^3.3.3",
|
||||
"prettier-plugin-astro": "^0.14.1",
|
||||
"rollup": "^4.21.0",
|
||||
"rtlcss": "^4.2.0",
|
||||
"sass": "^1.77.4",
|
||||
"stylelint": "^16.8.2",
|
||||
"stylelint-config-twbs-bootstrap": "^14.2.0",
|
||||
"terser": "^5.31.6",
|
||||
"tslib": "^2.7.0",
|
||||
"typescript": "^5.5.4"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,5 +15,12 @@ export default defineConfig({
|
||||
integrations: [mdx()],
|
||||
srcDir: './src/html',
|
||||
cacheDir: './dist/pages',
|
||||
outDir: './dist/pages'
|
||||
outDir: './dist/pages',
|
||||
vite: {
|
||||
server: {
|
||||
watch: {
|
||||
ignored: ['!**/dist/**'],
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -75,6 +75,15 @@ const htmlPath = convertPathToHtml(path);
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href={htmlPath + "/generate/theme.html"}
|
||||
class:list={["nav-link", page === "theme-generate" && "active"]}
|
||||
>
|
||||
<i class="nav-icon bi bi-palette"></i>
|
||||
<p>Theme Generate</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class:list={["nav-item", mainPage === "widgets" && "menu-open"]}>
|
||||
<a
|
||||
href="#"
|
||||
@@ -154,11 +163,11 @@ const htmlPath = convertPathToHtml(path);
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href={htmlPath + "/layout/fixed-complete.html"}
|
||||
class:list={["nav-link", page === "fixed-complete" && "active"]}
|
||||
href={htmlPath + "/layout/layout-custom-area.html"}
|
||||
class:list={["nav-link", page === "layout-custom-area" && "active"]}
|
||||
>
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>Fixed Complete</p>
|
||||
<p>Layout <small>+ Custom Area </small></p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
@@ -225,6 +234,15 @@ const htmlPath = convertPathToHtml(path);
|
||||
<p>General</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href={htmlPath + "/UI/icons.html"}
|
||||
class:list={["nav-link", page === "icons" && "active"]}
|
||||
>
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>Icons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href={htmlPath + "/UI/timeline.html"}
|
||||
|
||||
@@ -16,7 +16,7 @@ _**Important Note**: You needed to add separately cdn links for plugins in your
|
||||
|
||||
```html
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta1/dist/js/adminlte.min.js"
|
||||
src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta2/dist/js/adminlte.min.js"
|
||||
integrity="sha256-5SPy1/00NR75iVOk7p0Ci0nwAAM8Ab7j31wyie+DKYw="
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
@@ -25,7 +25,7 @@ _**Important Note**: You needed to add separately cdn links for plugins in your
|
||||
```html
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta1/dist/css/adminlte.min.css"
|
||||
href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta2/dist/css/adminlte.min.css"
|
||||
integrity="sha256-c66Dhf3TzKZoXxk8aNaf2lu580xGnKke4mjUtbpMqYg="
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
@@ -38,19 +38,19 @@ _**Important Note**: To install it via npm/Yarn, you need at least Node.js 14 or
|
||||
#### Via npm
|
||||
|
||||
```bash
|
||||
npm install admin-lte@4.0.0-beta1 --save
|
||||
npm install admin-lte@4.0.0-beta2 --save
|
||||
```
|
||||
|
||||
#### Via Yarn
|
||||
|
||||
```bash
|
||||
yarn add admin-lte@4.0.0-beta1
|
||||
yarn add admin-lte@4.0.0-beta2
|
||||
```
|
||||
|
||||
#### Via Composer
|
||||
|
||||
```bash
|
||||
composer require "almasaeed2010/adminlte=4.0.0-beta1"
|
||||
composer require "almasaeed2010/adminlte=4.0.0-beta2"
|
||||
```
|
||||
|
||||
#### Via Git
|
||||
|
||||
93
src/html/pages/UI/icons.astro
Normal file
93
src/html/pages/UI/icons.astro
Normal file
@@ -0,0 +1,93 @@
|
||||
---
|
||||
import Head from "@components/_head.astro";
|
||||
import Footer from "@components/dashboard/_footer.astro";
|
||||
import Topbar from "@components/dashboard/_topbar.astro";
|
||||
import Sidenav from "@components/dashboard/_sidenav.astro";
|
||||
import Scripts from "@components/_scripts.astro";
|
||||
|
||||
const title = "AdminLTE 4 | Icons";
|
||||
const path = "../../../dist";
|
||||
const mainPage = "ui-elements";
|
||||
const page = "icons";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--begin::Head-->
|
||||
<head>
|
||||
<Head title={title} path={path} />
|
||||
</head>
|
||||
<!--end::Head-->
|
||||
<!--begin::Body-->
|
||||
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
||||
<!--begin::App Wrapper-->
|
||||
<div class="app-wrapper">
|
||||
<Topbar path={path} />
|
||||
<Sidenav path={path} mainPage={mainPage} page={page} />
|
||||
<!--begin::App Main-->
|
||||
<main class="app-main">
|
||||
<!--begin::App Content Header-->
|
||||
<div class="app-content-header">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3 class="mb-0">Icons</h3>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">
|
||||
Icons
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content Header-->
|
||||
<!--begin::App Content-->
|
||||
<div class="app-content">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!-- Timelime example -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- The icons -->
|
||||
<div class="col-12">
|
||||
<div class="card card-primary card-outline">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Icons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>You can use any font library you like with AdminLTE 4.</p>
|
||||
<strong>Recommendations</strong>
|
||||
<ul class="mt-1">
|
||||
<li><a href="https://fontawesome.com/" target="_blank">Font Awesome</a></li>
|
||||
<li><a href="https://useiconic.com/open/" target="_blank">Iconic Icons</a></li>
|
||||
<li><a href="https://ionicons.com/" target="_blank">Ion Icons</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content-->
|
||||
</main>
|
||||
<!--end::App Main-->
|
||||
<Footer />
|
||||
</div>
|
||||
<!--end::App Wrapper-->
|
||||
<!--begin::Script-->
|
||||
<Scripts path={path} />
|
||||
<!--end::Script-->
|
||||
</body><!--end::Body-->
|
||||
</html>
|
||||
479
src/html/pages/generate/theme.astro
Normal file
479
src/html/pages/generate/theme.astro
Normal file
@@ -0,0 +1,479 @@
|
||||
---
|
||||
import Head from "@components/_head.astro";
|
||||
import Footer from "@components/dashboard/_footer.astro";
|
||||
import Topbar from "@components/dashboard/_topbar.astro";
|
||||
import Scripts from "@components/_scripts.astro";
|
||||
import { convertPathToHtml } from "../../../utils/index.js";
|
||||
|
||||
const title = "AdminLTE 4 | Theme Customize";
|
||||
const path = "../../../dist";
|
||||
const htmlPath = convertPathToHtml(path);
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<!--begin::Head-->
|
||||
<head>
|
||||
<Head title={title} path={path} />
|
||||
</head>
|
||||
<!--end::Head-->
|
||||
<!--begin::Body-->
|
||||
<body class="sidebar-expand-lg bg-body-tertiary">
|
||||
<!--begin::App Wrapper-->
|
||||
<div class="app-wrapper">
|
||||
<Topbar path={path} />
|
||||
<!--begin::Sidebar-->
|
||||
<aside class="app-sidebar bg-primary shadow" data-bs-theme="dark">
|
||||
<!--begin::Sidebar Brand-->
|
||||
<div class="sidebar-brand">
|
||||
<!--begin::Brand Link-->
|
||||
<a href={htmlPath + "/index.html"} class="brand-link">
|
||||
<!--begin::Brand Image-->
|
||||
<img
|
||||
src={path + "/assets/img/AdminLTELogo.png"}
|
||||
alt="AdminLTE Logo"
|
||||
class="brand-image opacity-75 shadow"
|
||||
/>
|
||||
<!--end::Brand Image-->
|
||||
<!--begin::Brand Text-->
|
||||
<span class="brand-text fw-light">AdminLTE 4</span>
|
||||
<!--end::Brand Text-->
|
||||
</a>
|
||||
<!--end::Brand Link-->
|
||||
</div>
|
||||
<!--end::Sidebar Brand-->
|
||||
|
||||
<!--begin::Sidebar Wrapper-->
|
||||
<div class="sidebar-wrapper">
|
||||
<nav class="mt-2">
|
||||
<!--begin::Sidebar Menu-->
|
||||
<ul
|
||||
class="nav sidebar-menu flex-column"
|
||||
data-lte-toggle="treeview"
|
||||
role="menu"
|
||||
data-accordion="false"
|
||||
>
|
||||
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon bi bi-circle-fill"></i>
|
||||
<p>Level 1</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon bi bi-circle-fill"></i>
|
||||
<p>
|
||||
Level 1
|
||||
<i class="nav-arrow bi bi-chevron-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>Level 2</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>
|
||||
Level 2
|
||||
<i class="nav-arrow bi bi-chevron-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon bi bi-record-circle-fill"></i>
|
||||
<p>Level 3</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon bi bi-record-circle-fill"></i>
|
||||
<p>Level 3</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon bi bi-record-circle-fill"></i>
|
||||
<p>Level 3</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>Level 2</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon bi bi-circle-fill"></i>
|
||||
<p>Level 1</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!--end::Sidebar Menu-->
|
||||
</nav>
|
||||
</div>
|
||||
<!--end::Sidebar Wrapper-->
|
||||
</aside>
|
||||
<!--end::Sidebar-->
|
||||
<!--begin::App Main-->
|
||||
<main class="app-main">
|
||||
<!--begin::App Content Header-->
|
||||
<div class="app-content-header">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<!--begin::Col-->
|
||||
<div class="col-sm-6">
|
||||
<h3 class="mb-0">Theme Customize</h3>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<!--begin::Col-->
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">
|
||||
Theme Customize
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content Header-->
|
||||
<!--begin::App Content-->
|
||||
<div class="app-content">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<!--begin::Col-->
|
||||
<div class="col-12">
|
||||
<!--begin::Card-->
|
||||
<div class="card">
|
||||
<!--begin::Card Header-->
|
||||
<div class="card-header">
|
||||
<!--begin::Card Title-->
|
||||
<h3 class="card-title">Sidebar Theme</h3>
|
||||
<!--end::Card Title-->
|
||||
|
||||
<!--begin::Card Toolbar-->
|
||||
<div class="card-tools">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-toggle="card-collapse"
|
||||
>
|
||||
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
|
||||
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-toggle="card-remove"
|
||||
title="Remove"
|
||||
>
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!--end::Card Toolbar-->
|
||||
</div>
|
||||
<!--end::Card Header-->
|
||||
<!--begin::Card Body-->
|
||||
<div class="card-body">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<!--begin::Col-->
|
||||
<div class="col-md-3">
|
||||
<select
|
||||
id="sidebar-color-modes"
|
||||
class="form-select form-select-lg"
|
||||
aria-label="Sidebar Color Mode Select"
|
||||
>
|
||||
<option value="">---Select---</option>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="light">Light</option>
|
||||
</select>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<!--begin::Col-->
|
||||
<div class="col-md-3">
|
||||
<select
|
||||
id="sidebar-color"
|
||||
class="form-select form-select-lg"
|
||||
aria-label="Sidebar Color Select"
|
||||
>
|
||||
<option value="">---Select---</option>
|
||||
</select>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<!--begin::Col-->
|
||||
<div class="col-md-6">
|
||||
<div id="sidebar-color-code" class="w-100"></div>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Card Body-->
|
||||
<!--begin::Card Footer-->
|
||||
<div class="card-footer">
|
||||
Check more color in
|
||||
<a
|
||||
href="https://getbootstrap.com/docs/5.3/utilities/background/"
|
||||
target="_blank"
|
||||
class="link-primary">Bootstrap Background Colors</a
|
||||
>
|
||||
</div>
|
||||
<!--end::Card Footer-->
|
||||
</div>
|
||||
<!--end::Card-->
|
||||
|
||||
<!--begin::Card-->
|
||||
<div class="card mt-4">
|
||||
<!--begin::Card Header-->
|
||||
<div class="card-header">
|
||||
<!--begin::Card Title-->
|
||||
<h3 class="card-title">Navbar Theme</h3>
|
||||
<!--end::Card Title-->
|
||||
|
||||
<!--begin::Card Toolbar-->
|
||||
<div class="card-tools">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-toggle="card-collapse"
|
||||
>
|
||||
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
|
||||
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-toggle="card-remove"
|
||||
title="Remove"
|
||||
>
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!--end::Card Toolbar-->
|
||||
</div>
|
||||
<!--end::Card Header-->
|
||||
<!--begin::Card Body-->
|
||||
<div class="card-body">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<!--begin::Col-->
|
||||
<div class="col-md-3">
|
||||
<select
|
||||
id="navbar-color-modes"
|
||||
class="form-select form-select-lg"
|
||||
aria-label="Navbar Color Mode Select"
|
||||
>
|
||||
<option value="">---Select---</option>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="light">Light</option>
|
||||
</select>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<!--begin::Col-->
|
||||
<div class="col-md-3">
|
||||
<select
|
||||
id="navbar-color"
|
||||
class="form-select form-select-lg"
|
||||
aria-label="Navbar Color Select"
|
||||
>
|
||||
<option value="">---Select---</option>
|
||||
</select>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<!--begin::Col-->
|
||||
<div class="col-md-6">
|
||||
<div id="navbar-color-code" class="w-100"></div>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Card Body-->
|
||||
<!--begin::Card Footer-->
|
||||
<div class="card-footer">
|
||||
Check more color in
|
||||
<a
|
||||
href="https://getbootstrap.com/docs/5.3/utilities/background/"
|
||||
target="_blank"
|
||||
class="link-primary">Bootstrap Background Colors</a
|
||||
>
|
||||
</div>
|
||||
<!--end::Card Footer-->
|
||||
</div>
|
||||
<!--end::Card-->
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content-->
|
||||
</main>
|
||||
<!--end::App Main-->
|
||||
<Footer />
|
||||
</div>
|
||||
<!--end::App Wrapper-->
|
||||
<!--begin::Script-->
|
||||
<Scripts path={path} />
|
||||
<script is:inline>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const appSidebar = document.querySelector(".app-sidebar");
|
||||
const sidebarColorModes = document.querySelector(
|
||||
"#sidebar-color-modes",
|
||||
);
|
||||
const sidebarColor = document.querySelector("#sidebar-color");
|
||||
const sidebarColorCode = document.querySelector("#sidebar-color-code");
|
||||
|
||||
const themeBg = [
|
||||
"bg-primary",
|
||||
"bg-primary-subtle",
|
||||
"bg-secondary",
|
||||
"bg-secondary-subtle",
|
||||
"bg-success",
|
||||
"bg-success-subtle",
|
||||
"bg-danger",
|
||||
"bg-danger-subtle",
|
||||
"bg-warning",
|
||||
"bg-warning-subtle",
|
||||
"bg-info",
|
||||
"bg-info-subtle",
|
||||
"bg-light",
|
||||
"bg-light-subtle",
|
||||
"bg-dark",
|
||||
"bg-dark-subtle",
|
||||
"bg-body-secondary",
|
||||
"bg-body-tertiary",
|
||||
"bg-body",
|
||||
"bg-black",
|
||||
"bg-white",
|
||||
"bg-transparent",
|
||||
];
|
||||
|
||||
// loop through each option themeBg array
|
||||
document.querySelector("#sidebar-color").innerHTML = themeBg.map(
|
||||
(bg) => {
|
||||
// return option element with value and text
|
||||
return `<option value="${bg}" class="text-${bg}">${bg}</option>`;
|
||||
},
|
||||
);
|
||||
|
||||
let sidebarColorMode = "";
|
||||
let sidebarBg = "";
|
||||
|
||||
function updateSidebar() {
|
||||
appSidebar.setAttribute("data-bs-theme", sidebarColorMode);
|
||||
|
||||
sidebarColorCode.innerHTML = `<pre><code class="language-html"><aside class="app-sidebar ${sidebarBg}" data-bs-theme="${sidebarColorMode}">...</aside></code></pre>`;
|
||||
}
|
||||
|
||||
sidebarColorModes.addEventListener("input", (event) => {
|
||||
sidebarColorMode = event.target.value;
|
||||
updateSidebar();
|
||||
});
|
||||
|
||||
sidebarColor.addEventListener("input", (event) => {
|
||||
sidebarBg = event.target.value;
|
||||
|
||||
themeBg.forEach((className) => {
|
||||
appSidebar.classList.remove(className);
|
||||
});
|
||||
|
||||
if (themeBg.includes(sidebarBg)) {
|
||||
appSidebar.classList.add(sidebarBg);
|
||||
}
|
||||
|
||||
updateSidebar();
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const appNavbar = document.querySelector(".app-header");
|
||||
const navbarColorModes = document.querySelector("#navbar-color-modes");
|
||||
const navbarColor = document.querySelector("#navbar-color");
|
||||
const navbarColorCode = document.querySelector("#navbar-color-code");
|
||||
|
||||
const themeBg = [
|
||||
"bg-primary",
|
||||
"bg-primary-subtle",
|
||||
"bg-secondary",
|
||||
"bg-secondary-subtle",
|
||||
"bg-success",
|
||||
"bg-success-subtle",
|
||||
"bg-danger",
|
||||
"bg-danger-subtle",
|
||||
"bg-warning",
|
||||
"bg-warning-subtle",
|
||||
"bg-info",
|
||||
"bg-info-subtle",
|
||||
"bg-light",
|
||||
"bg-light-subtle",
|
||||
"bg-dark",
|
||||
"bg-dark-subtle",
|
||||
"bg-body-secondary",
|
||||
"bg-body-tertiary",
|
||||
"bg-body",
|
||||
"bg-black",
|
||||
"bg-white",
|
||||
"bg-transparent",
|
||||
];
|
||||
|
||||
// loop through each option themeBg array
|
||||
document.querySelector("#navbar-color").innerHTML = themeBg.map(
|
||||
(bg) => {
|
||||
// return option element with value and text
|
||||
return `<option value="${bg}" class="text-${bg}">${bg}</option>`;
|
||||
},
|
||||
);
|
||||
|
||||
let navbarColorMode = "";
|
||||
let navbarBg = "";
|
||||
|
||||
function updateNavbar() {
|
||||
appNavbar.setAttribute("data-bs-theme", navbarColorMode);
|
||||
navbarColorCode.innerHTML = `<pre><code class="language-html"><nav class="app-header navbar navbar-expand ${navbarBg}" data-bs-theme="${navbarColorMode}">...</nav></code></pre>`;
|
||||
}
|
||||
|
||||
navbarColorModes.addEventListener("input", (event) => {
|
||||
navbarColorMode = event.target.value;
|
||||
updateNavbar();
|
||||
});
|
||||
|
||||
navbarColor.addEventListener("input", (event) => {
|
||||
navbarBg = event.target.value;
|
||||
|
||||
themeBg.forEach((className) => {
|
||||
appNavbar.classList.remove(className);
|
||||
});
|
||||
|
||||
if (themeBg.includes(navbarBg)) {
|
||||
appNavbar.classList.add(navbarBg);
|
||||
}
|
||||
|
||||
updateNavbar();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!--end::Script-->
|
||||
</body><!--end::Body-->
|
||||
</html>
|
||||
@@ -1,209 +0,0 @@
|
||||
---
|
||||
import Head from "@components/_head.astro";
|
||||
import Footer from "@components/dashboard/_footer.astro";
|
||||
import Topbar from "@components/dashboard/_topbar.astro";
|
||||
import Sidenav from "@components/dashboard/_sidenav.astro";
|
||||
import Scripts from "@components/_scripts.astro";
|
||||
|
||||
const title = "AdminLTE 4 | Fixed Complete";
|
||||
const path = "../../../dist";
|
||||
const mainPage = "layout";
|
||||
const page = "fixed-complete";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--begin::Head-->
|
||||
<head>
|
||||
<Head title={title} path={path}/>
|
||||
</head>
|
||||
<!--end::Head-->
|
||||
<!--begin::Body-->
|
||||
<body class="layout-fixed-complete sidebar-expand-lg bg-body-tertiary">
|
||||
<!--begin::App Wrapper-->
|
||||
<div class="app-wrapper">
|
||||
<Sidenav path={path} mainPage={mainPage} page={page}/>
|
||||
<div class="app-main-wrapper">
|
||||
<Topbar path={path}/>
|
||||
<!--begin::App Main-->
|
||||
<main class="app-main">
|
||||
<!--begin::App Content Header-->
|
||||
<div class="app-content-header">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<h3 class="mb-0">Fixed Complete <small>(Sidebar, Header & Footer)</small></h3>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">
|
||||
Fixed Layout
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content Header-->
|
||||
<!--begin::App Content-->
|
||||
<div class="app-content">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- Default box -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Title</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-toggle="card-collapse"
|
||||
title="Collapse"
|
||||
>
|
||||
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
|
||||
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-toggle="card-remove"
|
||||
title="Remove"
|
||||
>
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
<p>
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
|
||||
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
|
||||
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit
|
||||
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
|
||||
aliquam erat volutpat.
|
||||
</p>
|
||||
<p>
|
||||
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
|
||||
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
|
||||
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
|
||||
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
|
||||
facilisi.
|
||||
</p>
|
||||
<p>
|
||||
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
|
||||
placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
||||
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
|
||||
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
|
||||
consequat.
|
||||
</p>
|
||||
<p>
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
|
||||
dolore eu feugiat nulla facilisis.
|
||||
</p>
|
||||
<p>
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
|
||||
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
|
||||
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
|
||||
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
|
||||
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At
|
||||
accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt
|
||||
justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero
|
||||
voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
|
||||
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
|
||||
</p>
|
||||
<p>
|
||||
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
||||
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
||||
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
|
||||
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
||||
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
||||
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
|
||||
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
||||
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
||||
clita kasd gubergren, no sea takimata sanctus.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
|
||||
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
<p>
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
|
||||
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
|
||||
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit
|
||||
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
|
||||
aliquam erat volutpat.
|
||||
</p>
|
||||
<p>
|
||||
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
|
||||
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
|
||||
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
|
||||
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
|
||||
facilisi.
|
||||
</p>
|
||||
<p>
|
||||
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
|
||||
placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
||||
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
|
||||
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
|
||||
consequat.
|
||||
</p>
|
||||
<p>
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
|
||||
dolore eu feugiat nulla facilisis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer">Footer</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content-->
|
||||
</main>
|
||||
|
||||
<div class="app-content-bottom-area">
|
||||
<div class="row">
|
||||
<div class="col-12 text-end">
|
||||
<button type="submit" class="btn btn-primary" name="save" value="create">Create Admin</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--end::App Main-->
|
||||
<Footer/>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::App Wrapper-->
|
||||
<!--begin::Script-->
|
||||
<Scripts path={path}/>
|
||||
<!--end::Script-->
|
||||
</body><!--end::Body-->
|
||||
</html>
|
||||
144
src/html/pages/layout/layout-custom-area.astro
Normal file
144
src/html/pages/layout/layout-custom-area.astro
Normal file
@@ -0,0 +1,144 @@
|
||||
---
|
||||
import Head from "@components/_head.astro";
|
||||
import Footer from "@components/dashboard/_footer.astro";
|
||||
import Topbar from "@components/dashboard/_topbar.astro";
|
||||
import Sidenav from "@components/dashboard/_sidenav.astro";
|
||||
import Scripts from "@components/_scripts.astro";
|
||||
|
||||
const title = "AdminLTE 4 | Layout Custom Area";
|
||||
const path = "../../../dist";
|
||||
const mainPage = "layout";
|
||||
const page = "layout-custom-area";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--begin::Head-->
|
||||
<head>
|
||||
<Head title={title} path={path}/>
|
||||
</head>
|
||||
<!--end::Head-->
|
||||
<!--begin::Body-->
|
||||
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
||||
<!--begin::App Wrapper-->
|
||||
<div class="app-wrapper">
|
||||
<Topbar path={path}/>
|
||||
<Sidenav path={path} mainPage={mainPage} page={page}/>
|
||||
|
||||
<!--begin::App Main-->
|
||||
<main class="app-main">
|
||||
<!--begin::App Content Top Area-->
|
||||
<div class="app-content-top-area">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div>App Content Top Area</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 text-end">
|
||||
<button type="submit" class="btn btn-primary" name="save" value="create">Create Admin</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content Bottom Area-->
|
||||
<!--begin::App Content Header-->
|
||||
<div class="app-content-header">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<h3 class="mb-0"> Layout Custom Area </h3>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">
|
||||
Fixed Layout
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content Header-->
|
||||
<!--begin::App Content-->
|
||||
<div class="app-content">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- Default box -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Title</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-toggle="card-collapse"
|
||||
title="Collapse"
|
||||
>
|
||||
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
|
||||
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-tool"
|
||||
data-lte-toggle="card-remove"
|
||||
title="Remove"
|
||||
>
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Start creating your amazing application!
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer">Footer</div>
|
||||
<!-- /.card-footer-->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content-->
|
||||
|
||||
<!--begin::App Content Bottom Area-->
|
||||
<div class="app-content-bottom-area">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div>App Content Bottom Area</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 text-end">
|
||||
<button type="submit" class="btn btn-secondary" name="save" value="create">Refresh</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content Bottom Area-->
|
||||
</main>
|
||||
<!--end::App Main-->
|
||||
<Footer/>
|
||||
</div>
|
||||
<!--end::App Wrapper-->
|
||||
<!--begin::Script-->
|
||||
<Scripts path={path}/>
|
||||
<!--end::Script-->
|
||||
</body><!--end::Body-->
|
||||
</html>
|
||||
@@ -1,52 +1,3 @@
|
||||
.app-content {
|
||||
padding: $lte-content-padding-y $lte-content-padding-x;
|
||||
}
|
||||
|
||||
.app-content-top-area,
|
||||
.app-content-bottom-area{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $lte-content-padding-y $lte-content-padding-x;
|
||||
overflow: auto;
|
||||
background: $lte-app-footer-bg;
|
||||
|
||||
> .row {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
&.app-content-top-area-sm,
|
||||
&.app-content-bottom-area-sm{
|
||||
min-height: $lte-app-content-bottom-area-height-sm;
|
||||
}
|
||||
|
||||
&.app-content-top-area-md,
|
||||
&.app-content-bottom-area-md{
|
||||
min-height: $lte-app-content-bottom-area-height-md;
|
||||
}
|
||||
&.app-content-top-area-lg,
|
||||
&.app-content-bottom-area-lg{
|
||||
min-height: $lte-app-content-bottom-area-height-lg;
|
||||
}
|
||||
&.app-content-top-area-xl,
|
||||
&.app-content-bottom-area-xl{
|
||||
min-height: $lte-app-content-bottom-area-height-xl;
|
||||
}
|
||||
}
|
||||
|
||||
.app-content-top-area:not(.app-content-top-area-sm):not(.app-content-top-area-md):not(.app-content-top-area-lg):not(.app-content-top-area-xl),
|
||||
.app-content-bottom-area:not(.app-content-bottom-area-sm):not(.app-content-bottom-area-md):not(.app-content-bottom-area-lg):not(.app-content-bottom-area-xl) {
|
||||
padding-top: $grid-gutter-width * .625;
|
||||
padding-bottom: $grid-gutter-width * .625;
|
||||
}
|
||||
|
||||
.app-content-bottom-area {
|
||||
border-top: $lte-app-footer-border-top;
|
||||
}
|
||||
.app-content-top-area {
|
||||
border-bottom: $lte-app-footer-border-top;
|
||||
|
||||
+ .app-main {
|
||||
padding-top: $grid-gutter-width * .5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
.app-main {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-area: #{$lte-prefix}app-main;
|
||||
max-width: 100vw;
|
||||
padding-bottom: $grid-gutter-width * .5;
|
||||
padding-bottom: $lte-app-main-padding-bottom;
|
||||
@include transition($lte-transition-speed $lte-transition-fn);
|
||||
|
||||
.app-content-header {
|
||||
@@ -18,4 +20,22 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-content-top-area,
|
||||
.app-content-bottom-area {
|
||||
color: $lte-app-content-bottom-area-color;
|
||||
background-color: $lte-app-content-bottom-area-bg;
|
||||
}
|
||||
|
||||
.app-content-top-area {
|
||||
padding: $lte-app-content-top-area-padding-y $lte-app-content-top-area-padding-x;
|
||||
border-bottom: $lte-app-content-top-area-top-border;
|
||||
}
|
||||
|
||||
.app-content-bottom-area {
|
||||
padding: $lte-app-content-bottom-area-padding-y $lte-app-content-bottom-area-padding-x;
|
||||
margin-top: auto;
|
||||
margin-bottom: $lte-app-content-bottom-area-margin-bottom;
|
||||
border-top: $lte-app-content-bottom-area-top-border;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -452,7 +452,6 @@
|
||||
/* stylelint-disable-next-line scss/selector-no-union-class-name */
|
||||
&#{$infix} {
|
||||
@include media-breakpoint-up($next) {
|
||||
&.layout-fixed-complete,
|
||||
&.layout-fixed {
|
||||
.app-main-wrapper {
|
||||
display: flex;
|
||||
@@ -477,11 +476,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&.layout-fixed-complete {
|
||||
.app-main-wrapper {
|
||||
max-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-open {
|
||||
.nav-link > .nav-badge,
|
||||
.nav-link > p > .nav-badge {
|
||||
|
||||
@@ -1,30 +1,4 @@
|
||||
.compact-mode {
|
||||
.app-content-top-area:not(.app-content-top-area-sm):not(.app-content-top-area-md):not(.app-content-top-area-lg):not(.app-content-top-area-xl),
|
||||
.app-content-bottom-area:not(.app-content-bottom-area-sm):not(.app-content-bottom-area-md):not(.app-content-bottom-area-lg):not(.app-content-bottom-area-xl) {
|
||||
padding-top: $grid-gutter-width * .425;
|
||||
padding-bottom: $grid-gutter-width * .425;
|
||||
}
|
||||
.app-content-top-area-sm,
|
||||
.app-content-bottom-area-sm {
|
||||
min-height: $lte-app-content-bottom-area-height-sm * .825;
|
||||
}
|
||||
|
||||
.app-content-top-area-md,
|
||||
.app-content-bottom-area-md {
|
||||
min-height: $lte-app-content-bottom-area-height-md * .825;
|
||||
}
|
||||
|
||||
.app-content-top-area-lg,
|
||||
.app-content-bottom-area-lg {
|
||||
min-height: $lte-app-content-bottom-area-height-lg * .825;
|
||||
}
|
||||
|
||||
.app-content-top-area-xl,
|
||||
.app-content-bottom-area-xl {
|
||||
min-height: $lte-app-content-bottom-area-height-xl * .825;
|
||||
}
|
||||
|
||||
|
||||
.app-header {
|
||||
max-height: $lte-app-header-height-compact;
|
||||
|
||||
|
||||
@@ -59,18 +59,15 @@ $lte-app-header-link-padding-y: $navbar-padding-y !default;
|
||||
$lte-app-header-height: ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
|
||||
$lte-app-header-height-compact: ($nav-link-height-compact + ($lte-app-header-link-padding-y * 2)) !default;
|
||||
|
||||
// APP MAIN
|
||||
// --------------------------------------------------------
|
||||
$lte-app-main-padding-bottom: $grid-gutter-width * .5 !default;
|
||||
|
||||
// CONTENT PADDING
|
||||
// --------------------------------------------------------
|
||||
$lte-content-padding-y: 0 !default;
|
||||
$lte-content-padding-x: .5rem !default;
|
||||
|
||||
// MAIN CONTENT
|
||||
// --------------------------------------------------------
|
||||
$lte-app-content-bottom-area-height-sm: 3.5rem !default;
|
||||
$lte-app-content-bottom-area-height-md: 6rem !default;
|
||||
$lte-app-content-bottom-area-height-lg: 9rem !default;
|
||||
$lte-app-content-bottom-area-height-xl: 12rem !default;
|
||||
|
||||
// MAIN FOOTER
|
||||
// --------------------------------------------------------
|
||||
$lte-app-footer-padding: 1rem !default;
|
||||
@@ -81,6 +78,21 @@ $lte-app-footer-border-top: $lte-app-footer-border-top-width solid $lte-a
|
||||
$lte-app-footer-bg: var(--#{$prefix}body-bg) !default;
|
||||
$lte-app-footer-color: var(--#{$prefix}secondary-color) !default;
|
||||
|
||||
// CONTENT BOTTOM AREA
|
||||
// --------------------------------------------------------
|
||||
$lte-app-content-bottom-area-margin-bottom: -$lte-app-main-padding-bottom !default;
|
||||
$lte-app-content-bottom-area-color: $lte-app-footer-color !default;
|
||||
$lte-app-content-bottom-area-bg: $lte-app-footer-bg !default;
|
||||
$lte-app-content-bottom-area-top-border: $lte-app-footer-border-top !default;
|
||||
$lte-app-content-bottom-area-padding-y: $lte-app-footer-padding !default;
|
||||
$lte-app-content-bottom-area-padding-x: 0 !default;
|
||||
|
||||
// CONTENT TOP AREA
|
||||
// --------------------------------------------------------
|
||||
$lte-app-content-top-area-top-border: $lte-app-footer-border-top !default;
|
||||
$lte-app-content-top-area-padding-y: $lte-app-footer-padding !default;
|
||||
$lte-app-content-top-area-padding-x: 0 !default;
|
||||
|
||||
// BRAND LINK
|
||||
// --------------------------------------------------------
|
||||
$navbar-brand-padding-y-compact: $navbar-brand-padding-y * .75 !default;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* AdminLTE v4.0.0-beta1
|
||||
* AdminLTE v4.0.0-beta2
|
||||
* Author: Colorlib
|
||||
* Website: AdminLTE.io <https://adminlte.io>
|
||||
* License: Open source - MIT <https://opensource.org/licenses/MIT>
|
||||
|
||||
@@ -156,7 +156,7 @@ onDOMContentLoaded(() => {
|
||||
const target = event.currentTarget as HTMLElement
|
||||
const data = new PushMenu(target, Defaults)
|
||||
data.collapse()
|
||||
})
|
||||
}, { passive: true })
|
||||
sidebarOverlay.addEventListener('click', event => {
|
||||
event.preventDefault()
|
||||
const target = event.currentTarget as HTMLElement
|
||||
|
||||
Reference in New Issue
Block a user