mirror of https://github.com/ColorlibHQ/AdminLTE
added fixed layout page
parent
e25bd67708
commit
7523fda0df
|
@ -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>
|
|
@ -50,6 +50,24 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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}">
|
<li class="nav-item @@if (context.mainPage === 'forms') {menu-open}">
|
||||||
<a href="javascript:void(0)" class="nav-link @@if (context.mainPage === 'forms') {active}">
|
<a href="javascript:void(0)" class="nav-link @@if (context.mainPage === 'forms') {active}">
|
||||||
<i class="nav-icon fas fa-circle"></i>
|
<i class="nav-icon fas fa-circle"></i>
|
||||||
|
|
|
@ -1,13 +1,5 @@
|
||||||
@include media-breakpoint-up(lg) {
|
@include media-breakpoint-up(lg) {
|
||||||
.layout-fixed:not(.sidebar-horizontal) {
|
.layout-fixed:not(.sidebar-horizontal) {
|
||||||
// .main-brand {
|
|
||||||
// bottom: 0;
|
|
||||||
// float: none;
|
|
||||||
// left: 0;
|
|
||||||
// position: fixed;
|
|
||||||
// top: 0;
|
|
||||||
// }
|
|
||||||
|
|
||||||
.main-sidebar {
|
.main-sidebar {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
float: none;
|
float: none;
|
||||||
|
|
|
@ -54,3 +54,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hold-transition {
|
||||||
|
.main-sidebar {
|
||||||
|
animation: none !important;
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -481,7 +481,3 @@ blockquote {
|
||||||
padding: .375rem .6rem;
|
padding: .375rem .6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.resize-animation-stopper * {
|
|
||||||
animation: none !important;
|
|
||||||
transition: none !important;
|
|
||||||
}
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
/**
|
/**
|
||||||
* --------------------------------------------
|
* --------------------------------------------
|
||||||
* AdminLTE card-widget.js
|
* AdminLTE card-widget.ts
|
||||||
* License MIT
|
* License MIT
|
||||||
* --------------------------------------------
|
* --------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
@ -159,7 +159,6 @@ class CardWidget {
|
||||||
minElm?.classList.remove(this._config.minimizeIcon)
|
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;`
|
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(() => {
|
setTimeout(() => {
|
||||||
document.querySelector('html')?.classList.remove(CLASS_NAME_MAXIMIZED)
|
document.querySelector('html')?.classList.remove(CLASS_NAME_MAXIMIZED)
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
/**
|
/**
|
||||||
* --------------------------------------------
|
* --------------------------------------------
|
||||||
* AdminLTE treeview.ts
|
* AdminLTE layout.ts
|
||||||
* License MIT
|
* License MIT
|
||||||
* --------------------------------------------
|
* --------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
@ -9,15 +9,13 @@ import {
|
||||||
domReady
|
domReady
|
||||||
} from './util/index'
|
} from './util/index'
|
||||||
|
|
||||||
import OverlayScrollbars from 'overlayscrollbars'
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
* Constants
|
* Constants
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const CLASS_NAME_RESIZE_ANIMATION_STOPPER = 'resize-animation-stopper'
|
const CLASS_NAME_HOLD_TRANSITIONs = 'hold-transition'
|
||||||
|
|
||||||
const SELECTOR_SIDEBAR = '.sidebar'
|
const SELECTOR_SIDEBAR = '.sidebar'
|
||||||
|
|
||||||
|
@ -35,10 +33,10 @@ class Layout {
|
||||||
holdTransition(): void {
|
holdTransition(): void {
|
||||||
let resizeTimer: number | undefined
|
let resizeTimer: number | undefined
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
document.body.classList.add(CLASS_NAME_RESIZE_ANIMATION_STOPPER)
|
document.body.classList.add(CLASS_NAME_HOLD_TRANSITIONs)
|
||||||
clearTimeout(resizeTimer)
|
clearTimeout(resizeTimer)
|
||||||
resizeTimer = setTimeout(() => {
|
resizeTimer = setTimeout(() => {
|
||||||
document.body.classList.remove(CLASS_NAME_RESIZE_ANIMATION_STOPPER)
|
document.body.classList.remove(CLASS_NAME_HOLD_TRANSITIONs)
|
||||||
}, 400)
|
}, 400)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -47,7 +45,7 @@ class Layout {
|
||||||
domReady(() => {
|
domReady(() => {
|
||||||
const data = new Layout()
|
const data = new Layout()
|
||||||
data.holdTransition()
|
data.holdTransition()
|
||||||
|
// @ts-expect-error
|
||||||
if (typeof OverlayScrollbars !== 'undefined') {
|
if (typeof OverlayScrollbars !== 'undefined') {
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
// eslint-disable-next-line new-cap
|
// eslint-disable-next-line new-cap
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
/**
|
/**
|
||||||
* --------------------------------------------
|
* --------------------------------------------
|
||||||
* AdminLTE treeview.ts
|
* AdminLTE sidebar-overlay.ts
|
||||||
* License MIT
|
* License MIT
|
||||||
* --------------------------------------------
|
* --------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
Loading…
Reference in New Issue