Skip to content

Commit

Permalink
Added new layout fixed-header fixed-footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@danny007in
danny007in committed Jan 24, 2025
1 parent e081265 commit cb47c82
Show file tree
Hide file tree
Showing 8 changed files with 515 additions and 1 deletion.
27 changes: 27 additions & 0 deletions src/html/components/dashboard/_sidenav.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"}
Expand Down
147 changes: 147 additions & 0 deletions src/html/pages/generate/theme.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">&lt;footer class="app-footer ${footerBg}" data-bs-theme="${footerColorMode}"&gt;...&lt;/footer&gt;</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-->
Expand Down
109 changes: 109 additions & 0 deletions src/html/pages/layout/fixed-complete.astro
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit cb47c82

Please sign in to comment.