mirror of https://github.com/ColorlibHQ/AdminLTE
Added new layout fixed-header fixed-footer
Daniel
parent
e081265bc8
commit
cb47c822e7
|
|
@ -161,6 +161,33 @@ const htmlPath = convertPathToHtml(path);
|
|||
<p>Fixed Sidebar</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href={htmlPath + "/layout/fixed-header.html"}
|
||||
class:list={["nav-link", page === "fixed-header" && "active"]}
|
||||
>
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>Fixed Header</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href={htmlPath + "/layout/fixed-footer.html"}
|
||||
class:list={["nav-link", page === "fixed-footer" && "active"]}
|
||||
>
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>Fixed Footer</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href={htmlPath + "/layout/fixed-complete.html"}
|
||||
class:list={["nav-link", page === "fixed-complete" && "active"]}
|
||||
>
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>Fixed Complete</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href={htmlPath + "/layout/layout-custom-area.html"}
|
||||
|
|
|
|||
|
|
@ -321,6 +321,86 @@ const htmlPath = convertPathToHtml(path);
|
|||
<!--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">Footer 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="footer-color-modes"
|
||||
class="form-select form-select-lg"
|
||||
aria-label="Footer 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="footer-color"
|
||||
class="form-select form-select-lg"
|
||||
aria-label="Footer Color Select"
|
||||
>
|
||||
<option value="">---Select---</option>
|
||||
</select>
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<!--begin::Col-->
|
||||
<div class="col-md-6">
|
||||
<div id="footer-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>
|
||||
|
|
@ -473,6 +553,73 @@ const htmlPath = convertPathToHtml(path);
|
|||
updateNavbar();
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const appFooter = document.querySelector(".app-footer");
|
||||
const footerColorModes = document.querySelector("#footer-color-modes");
|
||||
const footerColor = document.querySelector("#footer-color");
|
||||
const footerColorCode = document.querySelector("#footer-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("#footer-color").innerHTML = themeBg.map(
|
||||
(bg) => {
|
||||
// return option element with value and text
|
||||
return `<option value="${bg}" class="text-${bg}">${bg}</option>`;
|
||||
},
|
||||
);
|
||||
|
||||
let footerColorMode = "";
|
||||
let footerBg = "";
|
||||
|
||||
function updateFooter() {
|
||||
appFooter.setAttribute("data-bs-theme", footerColorMode);
|
||||
footerColorCode.innerHTML = `<pre><code class="language-html"><footer class="app-footer ${footerBg}" data-bs-theme="${footerColorMode}">...</footer></code></pre>`;
|
||||
}
|
||||
|
||||
footerColorModes.addEventListener("input", (event) => {
|
||||
footerColorMode = event.target.value;
|
||||
updateFooter();
|
||||
});
|
||||
|
||||
footerColor.addEventListener("input", (event) => {
|
||||
footerBg = event.target.value;
|
||||
|
||||
themeBg.forEach((className) => {
|
||||
appFooter.classList.remove(className);
|
||||
});
|
||||
|
||||
if (themeBg.includes(footerBg)) {
|
||||
appFooter.classList.add(footerBg);
|
||||
}
|
||||
|
||||
updateFooter();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!--end::Script-->
|
||||
</body><!--end::Body-->
|
||||
|
|
|
|||
|
|
@ -0,0 +1,109 @@
|
|||
---
|
||||
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 fixed-header fixed-footer 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">Fixed Complete</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">
|
||||
Fixed Complete
|
||||
</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-->
|
||||
</main>
|
||||
<!--end::App Main-->
|
||||
<Footer />
|
||||
</div>
|
||||
<!--end::App Wrapper-->
|
||||
<!--begin::Script-->
|
||||
<Scripts path={path} />
|
||||
<!--end::Script-->
|
||||
</body><!--end::Body-->
|
||||
</html>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
---
|
||||
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 Footer";
|
||||
const path = "../../../dist";
|
||||
const mainPage = "layout";
|
||||
const page = "fixed-footer";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--begin::Head-->
|
||||
<head>
|
||||
<Head title={title} path={path} />
|
||||
</head>
|
||||
<!--end::Head-->
|
||||
<!--begin::Body-->
|
||||
<body class="fixed-footer 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">Fixed Footer</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">
|
||||
Fixed Footer
|
||||
</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>
|
||||
</div>
|
||||
<!--end::App Content-->
|
||||
</main>
|
||||
<!--end::App Main-->
|
||||
<Footer />
|
||||
</div>
|
||||
<!--end::App Wrapper-->
|
||||
<!--begin::Script-->
|
||||
<Scripts path={path} />
|
||||
<!--end::Script-->
|
||||
</body><!--end::Body-->
|
||||
</html>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
---
|
||||
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 Header";
|
||||
const path = "../../../dist";
|
||||
const mainPage = "layout";
|
||||
const page = "fixed-header";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--begin::Head-->
|
||||
<head>
|
||||
<Head title={title} path={path} />
|
||||
</head>
|
||||
<!--end::Head-->
|
||||
<!--begin::Body-->
|
||||
<body class="fixed-header 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">Fixed Header</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">
|
||||
Fixed Header
|
||||
</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>
|
||||
</div>
|
||||
<!--end::App Content-->
|
||||
</main>
|
||||
<!--end::App Main-->
|
||||
<Footer />
|
||||
</div>
|
||||
<!--end::App Wrapper-->
|
||||
<!--begin::Script-->
|
||||
<Scripts path={path} />
|
||||
<!--end::Script-->
|
||||
</body><!--end::Body-->
|
||||
</html>
|
||||
|
|
@ -13,3 +13,11 @@
|
|||
border-top: $lte-app-footer-border-top;
|
||||
@include transition($lte-transition-speed $lte-transition-fn);
|
||||
}
|
||||
|
||||
.fixed-footer {
|
||||
.app-footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: $lte-zindex-fixed-footer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,3 +24,11 @@
|
|||
font-size: .6rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.fixed-header {
|
||||
.app-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: $lte-zindex-fixed-header;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ $lte-app-header-bottom-border: $lte-app-header-bottom-border-width solid
|
|||
$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;
|
||||
$lte-zindex-fixed-header: $zindex-fixed !default;
|
||||
|
||||
// APP MAIN
|
||||
// --------------------------------------------------------
|
||||
|
|
@ -77,7 +78,7 @@ $lte-app-footer-border-top-color: var(--#{$prefix}border-color) !default;
|
|||
$lte-app-footer-border-top: $lte-app-footer-border-top-width solid $lte-app-footer-border-top-color !default;
|
||||
$lte-app-footer-bg: var(--#{$prefix}body-bg) !default;
|
||||
$lte-app-footer-color: var(--#{$prefix}secondary-color) !default;
|
||||
|
||||
$lte-zindex-fixed-footer: $zindex-fixed !default;
|
||||
// CONTENT BOTTOM AREA
|
||||
// --------------------------------------------------------
|
||||
$lte-app-content-bottom-area-margin-bottom: -$lte-app-main-padding-bottom !default;
|
||||
|
|
|
|||
Loading…
Reference in New Issue