diff --git a/src/html/components/dashboard/_sidenav.astro b/src/html/components/dashboard/_sidenav.astro index 3c193e7bf..6b752c52a 100644 --- a/src/html/components/dashboard/_sidenav.astro +++ b/src/html/components/dashboard/_sidenav.astro @@ -163,11 +163,11 @@ const htmlPath = convertPathToHtml(path);
  • -

    Fixed Complete

    +

    Layout + Custom Area

  • diff --git a/src/html/pages/layout/fixed-complete.astro b/src/html/pages/layout/fixed-complete.astro deleted file mode 100644 index 263a187f1..000000000 --- a/src/html/pages/layout/fixed-complete.astro +++ /dev/null @@ -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"; ---- - - - - - - - - - - - -
    - -
    - - -
    - -
    - -
    - -
    -
    -

    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/html/pages/layout/layout-custom-area.astro b/src/html/pages/layout/layout-custom-area.astro new file mode 100644 index 000000000..5ce6c97a8 --- /dev/null +++ b/src/html/pages/layout/layout-custom-area.astro @@ -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"; +--- + + + + + + + + + + + +
    + + + + +
    + +
    + +
    +
    +
    +
    App Content Top Area
    +
    + +
    + +
    +
    +
    + +
    + + +
    + +
    + +
    +
    +

    Layout Custom Area

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

    Title

    + +
    + + +
    +
    +
    + Start creating your amazing application! +
    + +
    Footer
    + +
    + +
    +
    + +
    + +
    + + + +
    + +
    +
    +
    +
    App Content Bottom Area
    +
    + +
    + +
    +
    +
    + +
    + +
    + +
    +
    + + + + + + diff --git a/src/scss/_app-content.scss b/src/scss/_app-content.scss index d4edefb08..d9dfcb9b3 100644 --- a/src/scss/_app-content.scss +++ b/src/scss/_app-content.scss @@ -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; - } -} - diff --git a/src/scss/_app-main.scss b/src/scss/_app-main.scss index 66400ccca..617cf0450 100644 --- a/src/scss/_app-main.scss +++ b/src/scss/_app-main.scss @@ -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; + } } diff --git a/src/scss/_app-sidebar.scss b/src/scss/_app-sidebar.scss index 9bf7e2b11..69dfc16b8 100644 --- a/src/scss/_app-sidebar.scss +++ b/src/scss/_app-sidebar.scss @@ -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 { diff --git a/src/scss/_compact-mode.scss b/src/scss/_compact-mode.scss index c03b86c3c..22cb5ea40 100644 --- a/src/scss/_compact-mode.scss +++ b/src/scss/_compact-mode.scss @@ -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; diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index eb92b20a5..ae5feedcc 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -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;