diff --git a/src/html/components/dashboard/_sidenav.astro b/src/html/components/dashboard/_sidenav.astro index 721aead66..4a964de47 100644 --- a/src/html/components/dashboard/_sidenav.astro +++ b/src/html/components/dashboard/_sidenav.astro @@ -124,7 +124,7 @@ const htmlPath = convertPathToHtml(path);

Layout Options - 6 @@ -140,7 +140,7 @@ const htmlPath = convertPathToHtml(path); ]} > -

Unfixed Sidebar

+

Default Sidebar

  • @@ -152,6 +152,15 @@ const htmlPath = convertPathToHtml(path);

    Fixed Sidebar

    • +
  • + + +

    Fixed Complete

    +     +
  • Level 2 (Badge) 6 diff --git a/src/html/pages/layout/fixed-complete.astro b/src/html/pages/layout/fixed-complete.astro new file mode 100644 index 000000000..25959a5b0 --- /dev/null +++ b/src/html/pages/layout/fixed-complete.astro @@ -0,0 +1,208 @@ +--- +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 (Sidebar, Header & Footer)

    +
    +
    +
      +
    1. Home
      2. +
    2. + Fixed Layout +
      3. +
    +
    +
    + +
    + +
    + + +
    + +
    + +
    +
    + +
    +
    +

    Title

    + +
    + + +
    +
    +
    +

    + 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. +

    +

    + 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. +

    +

    + 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. +

    +

    + 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. +

    +

    + Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum + dolore eu feugiat nulla facilisis. +

    +

    + 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. +

    +

    + 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. +

    +

    + 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. +

    +

    + 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. +

    +

    + 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. +

    +

    + 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. +

    +

    + Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum + dolore eu feugiat nulla facilisis. +

    +
    +
    Footer
    +
    +
    +
    + +
    + +
    + +
    + +
    +
    +
    + +
    +
    +
    + + +
    +
    +
    + + + + + + diff --git a/src/scss/_app-content.scss b/src/scss/_app-content.scss new file mode 100644 index 000000000..a08d6f954 --- /dev/null +++ b/src/scss/_app-content.scss @@ -0,0 +1,36 @@ +.app-content { + padding: $lte-content-padding-y $lte-content-padding-x; +} + +.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; + border-top: $lte-app-footer-border-top; + + > .row { + display: contents; + } + + &:not(.app-content-bottom-area-md), + &:not(.app-content-bottom-area-lg), + &:not(.app-content-bottom-area-xl) { + min-height: $lte-app-content-bottom-area-height-sm; + max-height: $lte-app-content-bottom-area-height-sm; + } + + &.app-content-bottom-area-md { + min-height: $lte-app-content-bottom-area-height-md; + max-height: $lte-app-content-bottom-area-height-md; + } + &.app-content-bottom-area-lg { + min-height: $lte-app-content-bottom-area-height-lg; + max-height: $lte-app-content-bottom-area-height-lg; + } + &.app-content-bottom-area-xl { + min-height: $lte-app-content-bottom-area-height-xl; + max-height: $lte-app-content-bottom-area-height-xl; + } +} diff --git a/src/scss/_app-footer.scss b/src/scss/_app-footer.scss index a237e1c31..2ea71464d 100644 --- a/src/scss/_app-footer.scss +++ b/src/scss/_app-footer.scss @@ -6,11 +6,10 @@ grid-area: #{$lte-prefix}app-footer; width: inherit; max-width: 100vw; + min-height: 3rem; padding: $lte-app-footer-padding; - min-height: $lte-app-footer-height; color: $lte-app-footer-color; background-color: $lte-app-footer-bg; border-top: $lte-app-footer-border-top; @include transition($lte-transition-speed $lte-transition-fn); } - diff --git a/src/scss/_app-main.scss b/src/scss/_app-main.scss index 37a8e0bb7..cc5d01643 100644 --- a/src/scss/_app-main.scss +++ b/src/scss/_app-main.scss @@ -1,8 +1,8 @@ .app-main { + position: relative; grid-area: #{$lte-prefix}app-main; max-width: 100vw; padding-bottom: 1rem; - position: relative; @include transition($lte-transition-speed $lte-transition-fn); .app-content-header { @@ -14,63 +14,4 @@ line-height: 2.5rem; } } - - .app-content-bottom-area { - position: absolute; - bottom: 0; - left: 0; - right: 0; - padding: $lte-content-padding-y $lte-content-padding-x; - display: flex; - align-items: center; - background: $lte-app-footer-bg; - border-top: $lte-app-footer-border-top; - overflow: auto; - - > .row { - display: contents; - } - } - - &.app-content-bottom-area-sm, - &.app-content-bottom-area-md, - &.app-content-bottom-area-lg { - height: calc(100vh - #{$lte-app-header-height} - #{$lte-app-footer-height}); - - .compact-mode & { - height: calc(100vh - #{$lte-app-header-height-compact} - #{$lte-app-footer-height}); - } - .content { - height: 100%; - overflow: auto; - padding-bottom: 1rem; - } - } - &.app-content-bottom-area-sm { - padding-bottom: $lte-app-content-bottom-area-height-sm * 2; - - .app-content-bottom-area { - height: $lte-app-content-bottom-area-height-sm; - } - } - - &.app-content-bottom-area-md { - padding-bottom: $lte-app-content-bottom-area-height-md * 2; - - .app-content-bottom-area { - height: $lte-app-content-bottom-area-height-md; - } - } - - &.app-content-bottom-area-lg { - padding-bottom: $lte-app-content-bottom-area-height-lg * 2; - - .app-content-bottom-area { - height: $lte-app-content-bottom-area-height-lg; - } - } - - .app-content { - padding: $lte-content-padding-y $lte-content-padding-x; - } } diff --git a/src/scss/_app-sidebar.scss b/src/scss/_app-sidebar.scss index 13c48b8cf..b4d1c9101 100644 --- a/src/scss/_app-sidebar.scss +++ b/src/scss/_app-sidebar.scss @@ -22,13 +22,13 @@ .sidebar-brand { display: flex; - justify-content: center; align-items: center; + justify-content: center; + height: $lte-app-header-height; padding: $lte-brand-link-padding-y $lte-brand-link-padding-x; overflow: hidden; font-size: $navbar-brand-font-size; white-space: nowrap; - height: $lte-app-header-height; border-bottom: $lte-brand-link-border-buttom solid var(--#{$prefix}border-color); @include transition(width $lte-transition-speed $lte-transition-fn); @@ -67,8 +67,8 @@ } .brand-text { - color: rgba(var(--#{$prefix}emphasis-color-rgb), .8); margin-left: .5rem; + color: rgba(var(--#{$prefix}emphasis-color-rgb), .8); @include transition(flex $lte-transition-speed $lte-transition-fn, width $lte-transition-speed $lte-transition-fn); &:hover { color: var(--#{$prefix}emphasis-color); @@ -81,17 +81,19 @@ padding-right: $lte-sidebar-padding-x; padding-bottom: $lte-sidebar-padding-y; padding-left: $lte-sidebar-padding-x; - overflow-x: hidden; - overflow-y: auto; @include scrollbar-color-gray(); @include scrollbar-width-thin(); .nav-link { display: flex; + justify-content: flex-start; } .nav-icon { display: flex; align-items: center; + justify-content: center; + min-width: 1.5rem; + max-width: 1.5rem; } // Sidebar Menu. First level links @@ -184,6 +186,9 @@ .nav-arrow { @include transition(transform $lte-transition-fn $lte-transition-speed); transform: translateY(-50%) #{"/*rtl:rotate(180deg)*/"}; + animation-name: fadeIn; + animation-duration: $lte-transition-speed; + animation-fill-mode: both; } } } @@ -193,6 +198,10 @@ .nav-link > p > .nav-badge { position: absolute; right: 1rem; + animation-name: fadeIn; + animation-duration: $lte-transition-speed; + animation-fill-mode: both; + animation-delay: $lte-transition-speed; } .nav-link > .nav-arrow, @@ -200,6 +209,10 @@ position: absolute; top: 50%; right: 1rem; + animation-name: fadeIn; + animation-duration: $lte-transition-speed; + animation-fill-mode: both; + animation-delay: $lte-transition-speed; } .nav-link { @@ -297,15 +310,20 @@ .sidebar-menu { .nav-link { width: $lte-sidebar-mini-width - $lte-sidebar-padding-x * 2; + p { display: inline-block; width: 0; white-space: nowrap; } } - .badge, + .nav-badge, .nav-arrow { display: none; + animation-name: fadeOut; + animation-duration: $lte-transition-speed; + animation-fill-mode: both; + animation-delay: $lte-transition-speed; } } @@ -317,13 +335,15 @@ .sidebar-menu .nav-link p, .brand-text, - .logo-xl { + .logo-xl, + .nav-arrow { visibility: hidden; animation-name: fadeOut; animation-duration: $lte-transition-speed; animation-fill-mode: both; } + .logo-xs { display: inline-block; visibility: visible; @@ -357,16 +377,23 @@ .brand-text { display: inline; max-width: inherit; - overflow: auto; margin-left: .5rem; + animation-name: fadeIn; + animation-duration: $lte-transition-speed; + animation-fill-mode: both; } - .badge, + .nav-badge, .nav-arrow { - display: inherit; + display: inline-block; + visibility: visible; + animation-name: fadeIn; + animation-duration: $lte-transition-speed; + animation-fill-mode: both; + animation-delay: $lte-transition-speed; } .nav-link p { - padding-left: inherit; + padding-left: .5rem; } .logo-xs { visibility: hidden; @@ -379,8 +406,7 @@ .sidebar-collapse:not(.sidebar-mini) { .app-sidebar { - // stylelint-disable-next-line - margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); + margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list } } @@ -392,46 +418,34 @@ /* 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; + flex-direction: column; + min-height: 100vh; + } + .app-sidebar-wrapper { + position: relative; + } + .app-main { + flex: 1 1 auto; + overflow: auto; + } .app-sidebar { - position: fixed; + position: sticky; top: 0; bottom: 0; - left: 0; max-height: 100vh; .sidebar-wrapper { - height: subtract(100vh, add($lte-app-header-height, $lte-app-header-bottom-border-width)); + height: subtract(100vh, add($lte-app-header-height, 1px)); } } - - .app-header, - .app-main, - .app-footer { - margin-left: var(--#{$lte-prefix}sidebar-width); - } - - &.sidebar-collapse { - .app-header, - .app-main, - .app-footer { - margin-left: 0; - } - } - - &.sidebar-mini.sidebar-collapse { - .app-header, - .app-main, - .app-footer { - margin-left: $lte-sidebar-mini-width; - } - &.compact-mode { - .app-header, - .app-main, - .app-footer { - margin-left: $lte-sidebar-mini-width-compact; - } - } + } + &.layout-fixed-complete { + .app-main-wrapper { + max-height: 100vh; } } } @@ -445,36 +459,24 @@ } .app-sidebar { - position: fixed; + position: sticky; top: 0; bottom: 0; - left: 0; max-height: 100vh; - margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list .sidebar-wrapper { - height: subtract(100vh, add($lte-app-header-height, $lte-app-header-bottom-border-width)); - overflow-x: hidden; - overflow-y: auto; + height: subtract(100vh, add($lte-app-header-height, 1px)); } } - &.sidebar-mini .app-sidebar { - margin-left: -$lte-sidebar-mini-width; - } - &.sidebar-open { - .app-sidebar { - margin-left: 0; - } - .sidebar-overlay { - position: fixed; - top: 0; - left: 0; + position: absolute; + inset: 0; z-index: $lte-zindex-sidebar-overlay; width: 100%; height: 100%; + cursor: pointer; visibility: visible; background-color: rgba(0, 0, 0, .2); animation-name: fadeIn; diff --git a/src/scss/_bootstrap-variables.scss b/src/scss/_bootstrap-variables.scss index 27d9a36b8..808774f6e 100644 --- a/src/scss/_bootstrap-variables.scss +++ b/src/scss/_bootstrap-variables.scss @@ -1248,7 +1248,7 @@ $dropdown-bg: var(--#{$prefix}body-bg) !default; $dropdown-border-color: var(--#{$prefix}border-color-translucent) !default; $dropdown-border-radius: var(--#{$prefix}border-radius) !default; $dropdown-border-width: var(--#{$prefix}border-width) !default; -$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list +$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default; $dropdown-divider-bg: $dropdown-border-color !default; $dropdown-divider-margin-y: $spacer * .5 !default; $dropdown-box-shadow: $box-shadow !default; @@ -1439,7 +1439,7 @@ $popover-max-width: 276px !default; $popover-border-width: var(--#{$prefix}border-width) !default; $popover-border-color: var(--#{$prefix}border-color-translucent) !default; $popover-border-radius: var(--#{$prefix}border-radius-lg) !default; -$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list +$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default; $popover-box-shadow: $box-shadow !default; $popover-header-font-size: $font-size-base !default; diff --git a/src/scss/_compact-mode.scss b/src/scss/_compact-mode.scss index d752c9359..4a9b50a18 100644 --- a/src/scss/_compact-mode.scss +++ b/src/scss/_compact-mode.scss @@ -1,5 +1,7 @@ .compact-mode { .app-header { + max-height: $lte-app-header-height-compact; + .nav-link { max-height: $nav-link-height-compact; } @@ -29,15 +31,12 @@ } .brand-image { - height: $nav-link-height-compact; width: $nav-link-height-compact; + height: $nav-link-height-compact; } .sidebar-brand { height: $lte-app-header-height-compact; } - .app-header { - max-height: $lte-app-header-height-compact; - } .app-footer { padding: $lte-app-footer-padding-compact; diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 81b9048c9..bfaa67096 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -63,20 +63,20 @@ $lte-content-padding-y: 0 !default; $lte-content-padding-x: .5rem !default; // MAIN CONTENT -$lte-app-content-bottom-area-height-sm: 3rem !default; -$lte-app-content-bottom-area-height-md: 4.5rem !default; -$lte-app-content-bottom-area-height-lg: 6rem !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-lg: 9rem !default; +$lte-app-content-bottom-area-height-xl: 12rem !default; // MAIN FOOTER // -------------------------------------------------------- $lte-app-footer-padding: 1rem !default; -$lte-app-footer-padding-compact: 0.5rem !default; +$lte-app-footer-padding-compact: .5rem !default; $lte-app-footer-border-top-width: 1px !default; $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-app-footer-height: 2.5rem !default; // BRAND LINK // -------------------------------------------------------- diff --git a/src/scss/mixins/_animations.scss b/src/scss/mixins/_animations.scss index 61ff385b6..5a4031755 100644 --- a/src/scss/mixins/_animations.scss +++ b/src/scss/mixins/_animations.scss @@ -46,8 +46,6 @@ to { opacity: 0; - padding-left: 0; - margin-left: 0; } } diff --git a/src/scss/parts/_core.scss b/src/scss/parts/_core.scss index d6679e30e..255dc03d7 100644 --- a/src/scss/parts/_core.scss +++ b/src/scss/parts/_core.scss @@ -4,6 +4,7 @@ @import "../root"; @import "../app-wrapper"; +@import "../app-content"; @import "../app-header"; @import "../app-sidebar"; @import "../app-main";