github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

added fixed layout page

pull/3891/head
Daniel 2021-06-13 17:20:36 +05:30
parent e25bd67708
commit 7523fda0df
8 changed files with 107 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/pages/layout/fixed-sidebar.html Normal file
View File

@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<!-- For RTL verison -->
<!-- <html lang="en" dir="rtl"> -->
<head>
@@include('./_head.html', {
"path": "../..",
"title": "AdminLTE 4 | Fixed Sidebar"
})
</head>
<body class="layout-fixed">
<div class="wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
@@include('./dashboard/_sidenav.html', {
"mainPage": "layout",
"page": "fixed-sidebar",
"path": "../.."
})
<!-- Main content -->
<div class="content-wrapper">
@@include('./dashboard/_content-header.html', {
"header_name": "Fixed Layout"
})
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<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 class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove" title="Remove">
<i class="fas fa-times"></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>
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
</div>
<!-- ./wrapper -->
@@include('./_scripts.html', {
"path": "../.."
})
</body>
</html>

18
src/partials/dashboard/_sidenav.html
View File

@ -50,6 +50,24 @@
</p>
</a>
</li>
<li class="nav-item @@if (context.mainPage === 'layout') {menu-open}">
<a href="javascript:void(0)" class="nav-link @@if (context.mainPage === 'layout') {active}">
<i class="nav-icon fas fa-circle"></i>
<p>
Layout Options
<span class="badge bg-info float-end me-3">6</span>
<i class="end fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="@@path/pages/layout/fixed-sidebar.html" class="nav-link @@if (context.page === 'fixed-sidebar') {active}">
<i class="nav-icon far fa-circle"></i>
<p>Fixed Sidebar</p>
</a>
</li>
</ul>
</li>
<li class="nav-item @@if (context.mainPage === 'forms') {menu-open}">
<a href="javascript:void(0)" class="nav-link @@if (context.mainPage === 'forms') {active}">
<i class="nav-icon fas fa-circle"></i>

8
src/scss/_layout-fixed.scss
View File

@ -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;

7
src/scss/_main-sidebar.scss
View File

@ -54,3 +54,10 @@
}
}
}
.hold-transition {
.main-sidebar {
animation: none !important;
transition: none !important;
}
}

4
src/scss/_miscellaneous.scss
View File

@ -481,7 +481,3 @@ blockquote {
padding: .375rem .6rem;
}
.resize-animation-stopper * {
animation: none !important;
transition: none !important;
}

3
src/ts/card-widget.ts
View File

@ -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)

12
src/ts/layout.ts
View File

@ -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

2
src/ts/sidebar-overlay.ts
View File

@ -1,6 +1,6 @@
/**
* --------------------------------------------
* AdminLTE treeview.ts
* AdminLTE sidebar-overlay.ts
* License MIT
* --------------------------------------------
*/