From cb47c822e700ac5faab5d3e7191647903eced944 Mon Sep 17 00:00:00 2001 From: Daniel <50356015+danny007in@users.noreply.github.com> Date: Fri, 24 Jan 2025 17:04:48 +0530 Subject: [PATCH] Added new layout fixed-header fixed-footer --- src/html/components/dashboard/_sidenav.astro | 27 ++++ src/html/pages/generate/theme.astro | 147 +++++++++++++++++++ src/html/pages/layout/fixed-complete.astro | 109 ++++++++++++++ src/html/pages/layout/fixed-footer.astro | 107 ++++++++++++++ src/html/pages/layout/fixed-header.astro | 107 ++++++++++++++ src/scss/_app-footer.scss | 8 + src/scss/_app-header.scss | 8 + src/scss/_variables.scss | 3 +- 8 files changed, 515 insertions(+), 1 deletion(-) create mode 100644 src/html/pages/layout/fixed-complete.astro create mode 100644 src/html/pages/layout/fixed-footer.astro create mode 100644 src/html/pages/layout/fixed-header.astro diff --git a/src/html/components/dashboard/_sidenav.astro b/src/html/components/dashboard/_sidenav.astro index 6b752c52a72..424d35dd39c 100644 --- a/src/html/components/dashboard/_sidenav.astro +++ b/src/html/components/dashboard/_sidenav.astro @@ -161,6 +161,33 @@ const htmlPath = convertPathToHtml(path);

Fixed Sidebar

+
  • + + +

    Fixed Header

    +     +
    • +
  • + + +

    Fixed Footer

    +     +
    • +
  • + + +

    Fixed Complete

    +     +
  • + + +
    + +
    + +

    Footer Theme

    + + + +
    + + +
    + +
    + + +
    + +
    + +
    + +
    + + +
    + +
    + + +
    + +
    + +
    + +
    + + +
    + Check more color in + Bootstrap Background Colors +
    + +
    + @@ -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 ``; + }, + ); + + let footerColorMode = ""; + let footerBg = ""; + + function updateFooter() { + appFooter.setAttribute("data-bs-theme", footerColorMode); + footerColorCode.innerHTML = `
    <footer class="app-footer ${footerBg}" data-bs-theme="${footerColorMode}">...</footer>
    `; + } + + 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(); + }); + }); diff --git a/src/html/pages/layout/fixed-complete.astro b/src/html/pages/layout/fixed-complete.astro new file mode 100644 index 00000000000..9a0fe397647 --- /dev/null +++ b/src/html/pages/layout/fixed-complete.astro @@ -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"; +--- + + + + + + + + + + + +
    + + + + +
    + +
    + +
    + +
    +
    +

    Fixed Complete

    +
    +
    +
      +
    1. Home
      2. +
    2. + Fixed Complete +
      3. +
    +
    +
    + +
    + +
    + + +
    + +
    + +
    +
    + +
    +
    +

    Title

    + +
    + + +
    +
    +
    + Start creating your amazing application! +
    + +
    Footer
    + +
    + +
    +
    + +
    + +
    + +
    + +
    +
    + + + + + + diff --git a/src/html/pages/layout/fixed-footer.astro b/src/html/pages/layout/fixed-footer.astro new file mode 100644 index 00000000000..7024b61a1f4 --- /dev/null +++ b/src/html/pages/layout/fixed-footer.astro @@ -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"; +--- + + + + + + + + + + + +
    + + + +
    + +
    + +
    + +
    +
    +

    Fixed Footer

    +
    +
    +
      +
    1. Home
      2. +
    2. + Fixed Footer +
      3. +
    +
    +
    + +
    + +
    + + +
    + +
    + +
    +
    + +
    +
    +

    Title

    + +
    + + +
    +
    +
    + Start creating your amazing application! +
    + +
    Footer
    + +
    + +
    +
    + +
    +
    + +
    + +
    +
    + + + + + + diff --git a/src/html/pages/layout/fixed-header.astro b/src/html/pages/layout/fixed-header.astro new file mode 100644 index 00000000000..00e5194a76b --- /dev/null +++ b/src/html/pages/layout/fixed-header.astro @@ -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"; +--- + + + + + + + + + + + +
    + + + +
    + +
    + +
    + +
    +
    +

    Fixed Header

    +
    +
    +
      +
    1. Home
      2. +
    2. + Fixed Header +
      3. +
    +
    +
    + +
    + +
    + + +
    + +
    + +
    +
    + +
    +
    +

    Title

    + +
    + + +
    +
    +
    + Start creating your amazing application! +
    + +
    Footer
    + +
    + +
    +
    + +
    +
    + +
    + +
    +
    + + + + + + diff --git a/src/scss/_app-footer.scss b/src/scss/_app-footer.scss index 2ea71464d1b..5cfa36a4843 100644 --- a/src/scss/_app-footer.scss +++ b/src/scss/_app-footer.scss @@ -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; + } +} diff --git a/src/scss/_app-header.scss b/src/scss/_app-header.scss index ab28d7111a4..729828a0640 100644 --- a/src/scss/_app-header.scss +++ b/src/scss/_app-header.scss @@ -24,3 +24,11 @@ font-size: .6rem; font-weight: 400; } + +.fixed-header { + .app-header { + position: sticky; + top: 0; + z-index: $lte-zindex-fixed-header; + } +} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index ae5feedcc1f..35675327dd5 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -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;