Home Explore
原型工具、Api管理、Bug管理等 更多工具
 团队协作  快速原型  自动标注  Bug管理  Api管理
Sign In
zhuliang
/
AdminLTE
mirror of https://github.com/almasaeed2010/AdminLTE.git
Watch 1
Star 0
Fork 0
Files Issues 0 Wiki
Browse Source

added fixed layout page

Daniel 3 years ago
parent
e25bd67708
commit
7523fda0df
8 changed files with 107 additions and 22 deletions
Unified View Show Diff Stats
  1. 75 0
      src/pages/layout/fixed-sidebar.html
  2. 18 0
      src/partials/dashboard/_sidenav.html
  3. 0 8
      src/scss/_layout-fixed.scss
  4. 7 0
      src/scss/_main-sidebar.scss
  5. 0 4
      src/scss/_miscellaneous.scss
  6. 1 2
      src/ts/card-widget.ts
  7. 5 7
      src/ts/layout.ts
  8. 1 1
      src/ts/sidebar-overlay.ts

+ 75 - 0
src/pages/layout/fixed-sidebar.html
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 - 0
src/partials/dashboard/_sidenav.html
View File 

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

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

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

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

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

+ 0 - 4
src/scss/_miscellaneous.scss
View File 

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

+ 1 - 2
src/ts/card-widget.ts
View File 

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

+ 5 - 7
src/ts/layout.ts
View File 

@@ -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 - 1
src/ts/sidebar-overlay.ts
View File 

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