From 7523fda0dfd85928dd3975b44a2ddbe801929731 Mon Sep 17 00:00:00 2001 From: Daniel <50356015+danny007in@users.noreply.github.com> Date: Sun, 13 Jun 2021 17:20:36 +0530 Subject: [PATCH] added fixed layout page --- src/pages/layout/fixed-sidebar.html | 75 ++++++++++++++++++++++++++++ src/partials/dashboard/_sidenav.html | 18 +++++++ src/scss/_layout-fixed.scss | 8 --- src/scss/_main-sidebar.scss | 7 +++ src/scss/_miscellaneous.scss | 4 -- src/ts/card-widget.ts | 3 +- src/ts/layout.ts | 12 ++--- src/ts/sidebar-overlay.ts | 2 +- 8 files changed, 107 insertions(+), 22 deletions(-) create mode 100644 src/pages/layout/fixed-sidebar.html diff --git a/src/pages/layout/fixed-sidebar.html b/src/pages/layout/fixed-sidebar.html new file mode 100644 index 000000000..2c5bee894 --- /dev/null +++ b/src/pages/layout/fixed-sidebar.html @@ -0,0 +1,75 @@ + + + + + + @@include('./_head.html', { + "path": "../..", + "title": "AdminLTE 4 | Fixed Sidebar" + }) + + +
+ @@include('./dashboard/_topbar.html', { + "path": "../.." + }) + + @@include('./dashboard/_sidenav.html', { + "mainPage": "layout", + "page": "fixed-sidebar", + "path": "../.." + }) + +
+ @@include('./dashboard/_content-header.html', { + "header_name": "Fixed Layout" + }) + +
+
+
+
+ +
+
+

Title

+ +
+ + +
+
+
+ Start creating your amazing application! +
+ +
+ Footer +
+ +
+ +
+
+ +
+
+ +
+ + + @@include('./dashboard/_footer.html', { + "path": "../.." + }) +
+ + + @@include('./_scripts.html', { + "path": "../.." + }) + + diff --git a/src/partials/dashboard/_sidenav.html b/src/partials/dashboard/_sidenav.html index a3bebd57e..73f06846b 100644 --- a/src/partials/dashboard/_sidenav.html +++ b/src/partials/dashboard/_sidenav.html @@ -50,6 +50,24 @@

+
  • + + +

    + Layout Options + 6 + +

    +     + +
  • diff --git a/src/scss/_layout-fixed.scss b/src/scss/_layout-fixed.scss index 6926eaf18..602ab8729 100644 --- a/src/scss/_layout-fixed.scss +++ b/src/scss/_layout-fixed.scss @@ -1,13 +1,5 @@ @include media-breakpoint-up(lg) { .layout-fixed:not(.sidebar-horizontal) { - // .main-brand { - // bottom: 0; - // float: none; - // left: 0; - // position: fixed; - // top: 0; - // } - .main-sidebar { bottom: 0; float: none; diff --git a/src/scss/_main-sidebar.scss b/src/scss/_main-sidebar.scss index 3e39a1708..d1b7d1923 100644 --- a/src/scss/_main-sidebar.scss +++ b/src/scss/_main-sidebar.scss @@ -54,3 +54,10 @@ } } } + +.hold-transition { + .main-sidebar { + animation: none !important; + transition: none !important; + } +} diff --git a/src/scss/_miscellaneous.scss b/src/scss/_miscellaneous.scss index e9319cffb..3e0f02bbd 100644 --- a/src/scss/_miscellaneous.scss +++ b/src/scss/_miscellaneous.scss @@ -481,7 +481,3 @@ blockquote { padding: .375rem .6rem; } -.resize-animation-stopper * { - animation: none !important; - transition: none !important; -} diff --git a/src/ts/card-widget.ts b/src/ts/card-widget.ts index 6e7f291ac..5efb518ba 100644 --- a/src/ts/card-widget.ts +++ b/src/ts/card-widget.ts @@ -1,6 +1,6 @@ /** * -------------------------------------------- - * AdminLTE card-widget.js + * AdminLTE card-widget.ts * License MIT * -------------------------------------------- */ @@ -159,7 +159,6 @@ class CardWidget { minElm?.classList.remove(this._config.minimizeIcon) this._parent.style.cssText = `height: ${this._parent.style.height} !important; width: ${this._parent.style.width} !important; transition: all .15s;` - // console.log('🚀 ~ file: card-widget.ts ~ line 164 ~ CardWidget ~ minimize ~ this._parent.style.height', this._parent.style.height) setTimeout(() => { document.querySelector('html')?.classList.remove(CLASS_NAME_MAXIMIZED) diff --git a/src/ts/layout.ts b/src/ts/layout.ts index 8166a3bdb..b7bcacaba 100644 --- a/src/ts/layout.ts +++ b/src/ts/layout.ts @@ -1,6 +1,6 @@ /** * -------------------------------------------- - * AdminLTE treeview.ts + * AdminLTE layout.ts * License MIT * -------------------------------------------- */ @@ -9,15 +9,13 @@ import { domReady } from './util/index' -import OverlayScrollbars from 'overlayscrollbars' - /** * ------------------------------------------------------------------------ * Constants * ------------------------------------------------------------------------ */ -const CLASS_NAME_RESIZE_ANIMATION_STOPPER = 'resize-animation-stopper' +const CLASS_NAME_HOLD_TRANSITIONs = 'hold-transition' const SELECTOR_SIDEBAR = '.sidebar' @@ -35,10 +33,10 @@ class Layout { holdTransition(): void { let resizeTimer: number | undefined window.addEventListener('resize', () => { - document.body.classList.add(CLASS_NAME_RESIZE_ANIMATION_STOPPER) + document.body.classList.add(CLASS_NAME_HOLD_TRANSITIONs) clearTimeout(resizeTimer) resizeTimer = setTimeout(() => { - document.body.classList.remove(CLASS_NAME_RESIZE_ANIMATION_STOPPER) + document.body.classList.remove(CLASS_NAME_HOLD_TRANSITIONs) }, 400) }) } @@ -47,7 +45,7 @@ class Layout { domReady(() => { const data = new Layout() data.holdTransition() - + // @ts-expect-error if (typeof OverlayScrollbars !== 'undefined') { // @ts-expect-error // eslint-disable-next-line new-cap diff --git a/src/ts/sidebar-overlay.ts b/src/ts/sidebar-overlay.ts index 162abb1cf..2295673c0 100644 --- a/src/ts/sidebar-overlay.ts +++ b/src/ts/sidebar-overlay.ts @@ -1,6 +1,6 @@ /** * -------------------------------------------- - * AdminLTE treeview.ts + * AdminLTE sidebar-overlay.ts * License MIT * -------------------------------------------- */