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

main-header improved

Daniel 3 years ago
parent
0a2ac71002
commit
a29afb44db
8 changed files with 114 additions and 54 deletions
Split View Show Diff Stats
  1. 0 12
      src/pages/demo.html
  2. 5 5
      src/pages/forms/general.html
  3. 5 5
      src/pages/widgets.html
  4. 5 1
      src/partials/_head.html
  5. 55 20
      src/partials/dashboard/_sidenav.html
  6. 32 9
      src/partials/dashboard/_topbar.html
  7. 10 0
      src/scss/_main-header.scss
  8. 2 2
      src/scss/_variables.scss

+ 0 - 12
src/pages/demo.html
View File 

@@ -1,12 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-<head>
 
-  <meta charset="UTF-8">
 
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <title>Demo</title>
 
-</head>
 
-<body>
 
-
 
-</body>
 
-</html>

+ 5 - 5
src/pages/forms/general.html
View File 

@@ -4,20 +4,20 @@
 
 <!-- <html lang="en" dir="rtl"> -->
 
   <head>
 
     @@include('./_head.html', {
 
-      "path": "../../",
 
+      "path": "../..",
 
       "title": "AdminLTE 4 | General Form Elements"
 
     })
 
   </head>
 
   <body class="layout-fixed">
 
     <div class="wrapper">
 
       @@include('./dashboard/_topbar.html', {
 
-        "path": "../../"
 
+        "path": "../.."
 
       })
 
 
       @@include('./dashboard/_sidenav.html', {
 
         "mainPage": "forms",
 
         "page": "general",
 
-        "path": "../../"
 
+        "path": "../.."
 
       })
 
       <!-- Main content -->
 
       <div class="content-wrapper">
 
@@ -73,13 +73,13 @@
 
       <!-- /.content-wrapper -->
 
 
       @@include('./dashboard/_footer.html', {
 
-        "path": "../../"
 
+        "path": "../.."
 
       })
 
     </div>
 
     <!--  ./wrapper -->
 
 
     @@include('./_scripts.html', {
 
-      "path": "../../"
 
+      "path": "../.."
 
     })
 
   </body>
 
 </html>

+ 5 - 5
src/pages/widgets.html
View File 

@@ -4,7 +4,7 @@
 
 <!-- <html lang="en" dir="rtl"> -->
 
   <head>
 
     @@include('./_head.html', {
 
-      "path": "../",
 
+      "path": "..",
 
       "title": "AdminLTE 4 | General Form Elements"
 
     })
 
     <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 
@@ -12,13 +12,13 @@
 
   <body class="layout-fixed">
 
     <div class="wrapper">
 
       @@include('./dashboard/_topbar.html', {
 
-        "path": "../"
 
+        "path": ".."
 
       })
 
 
       @@include('./dashboard/_sidenav.html', {
 
         "mainPage": "pages",
 
         "page": "widgets",
 
-        "path": "../"
 
+        "path": ".."
 
       })
 
       <!-- Main content -->
 
       <div class="content-wrapper">
 
@@ -407,13 +407,13 @@
 
       <!-- /.content-wrapper -->
 
 
       @@include('./dashboard/_footer.html', {
 
-        "path": "../"
 
+        "path": ".."
 
       })
 
     </div>
 
     <!--  ./wrapper -->
 
 
     @@include('./_scripts.html', {
 
-      "path": "../"
 
+      "path": ".."
 
     })
 
   </body>
 
 </html>

+ 5 - 1
src/partials/_head.html
View File 

@@ -4,9 +4,13 @@
 
 <!-- If add @@path/css/dark/adminlte-dark.css then the page supports both dark and light color schemes, and the page author prefers / default is light. -->
 
 <meta name="color-scheme" content="light dark">
 
 <title>@@title</title>
 
+<!-- Google Font: Source Sans Pro -->
 
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
 
+<!-- Font Awesome -->
 
+<link rel="stylesheet" href="@@path/vendor/@fortawesome/fontawesome-free/css/all.min.css">
 
+<!-- Theme style -->
 
 <!-- For dark mode use @@path/css/dark/adminlte-dark.css, remove dist/css/adminlte.css -->
 
 <!-- <link rel="stylesheet" href="@@path/css/dark/adminlte-dark.css"> -->
 
 <!-- For RTL verison use @@path/css/rtl/adminlte.rtl.css, remove dist/css/adminlte.css -->
 
 <!-- <link rel="stylesheet" href="@@path/css/rtl/adminlte.rtl.css"> -->
 
 <link rel="stylesheet" href="@@path/css/adminlte.css">
 
-<link rel="stylesheet" href="@@path/vendor/@fortawesome/fontawesome-free/css/all.min.css">

+ 55 - 20
src/partials/dashboard/_sidenav.html
View File 

@@ -24,25 +24,19 @@
 
             <li class="nav-item">
 
               <a href="@@path/index.html" class="nav-link @@if (context.page === 'index') {active}">
 
                 <i class="nav-icon far fa-circle"></i>
 
-                <p>
 
-                  Dashboard v1
 
-                </p>
 
+                <p>Dashboard v1</p>
 
               </a>
 
             </li>
 
             <li class="nav-item">
 
               <a href="@@path/index2.html" class="nav-link @@if (context.page === 'index2') {active}">
 
                 <i class="nav-icon far fa-circle"></i>
 
-                <p>
 
-                  Dashboard v2
 
-                </p>
 
+                <p>Dashboard v2</p>
 
               </a>
 
             </li>
 
             <li class="nav-item">
 
               <a href="@@path/index3.html" class="nav-link @@if (context.page === 'index3') {active}">
 
                 <i class="nav-icon far fa-circle"></i>
 
-                <p>
 
-                  Dashboard v3
 
-                </p>
 
+                <p>Dashboard v3</p>
 
               </a>
 
             </li>
 
           </ul>
 
@@ -68,16 +62,18 @@
 
             <li class="nav-item">
 
               <a href="@@path/pages/forms/general.html" class="nav-link @@if (context.page === 'general') {active}">
 
                 <i class="nav-icon far fa-circle"></i>
 
-                <p>
 
-                  General Elements
 
-                </p>
 
+                <p>General Elements</p>
 
               </a>
 
             </li>
 
           </ul>
 
         </li>
 
-
 
         <li class="nav-header">MULTI LEVEL EXAMPLE</li>
 
-
 
+        <li class="nav-item">
 
+          <a href="#" class="nav-link">
 
+            <i class="nav-icon fas fa-circle"></i>
 
+            <p>Level 1</p>
 
+          </a>
 
+        </li>
 
         <li class="nav-item">
 
           <a href="#" class="nav-link">
 
             <i class="nav-icon fas fa-circle"></i>
 
@@ -90,6 +86,12 @@
 
             <li class="nav-item">
 
               <a href="#" class="nav-link">
 
                 <i class="nav-icon far fa-circle"></i>
 
+                <p>Level 2</p>
 
+              </a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a href="#" class="nav-link">
 
+                <i class="nav-icon far fa-circle"></i>
 
                 <p>
 
                   Level 2
 
                   <i class="right fas fa-angle-left"></i>
 
@@ -99,9 +101,19 @@
 
                 <li class="nav-item">
 
                   <a href="#" class="nav-link">
 
                     <i class="nav-icon far fa-dot-circle"></i>
 
-                    <p>
 
-                      Level 3
 
-                    </p>
 
+                    <p>Level 3</p>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a href="#" class="nav-link">
 
+                    <i class="nav-icon far fa-dot-circle"></i>
 
+                    <p>Level 3</p>
 
+                  </a>
 
+                </li>
 
+                <li class="nav-item">
 
+                  <a href="#" class="nav-link">
 
+                    <i class="nav-icon far fa-dot-circle"></i>
 
+                    <p>Level 3</p>
 
                   </a>
 
                 </li>
 
               </ul>
 
@@ -109,13 +121,36 @@
 
             <li class="nav-item">
 
               <a href="#" class="nav-link">
 
                 <i class="nav-icon far fa-circle"></i>
 
-                <p>
 
-                  Level 2
 
-                </p>
 
+                <p>Level 2</p>
 
               </a>
 
             </li>
 
           </ul>
 
         </li>
 
+        <li class="nav-item">
 
+          <a href="#" class="nav-link">
 
+            <i class="nav-icon fas fa-circle"></i>
 
+            <p>Level 1</p>
 
+          </a>
 
+        </li>
 
+        <li class="nav-header">LABELS</li>
 
+        <li class="nav-item">
 
+          <a href="#" class="nav-link">
 
+            <i class="nav-icon far fa-circle text-danger"></i>
 
+            <p class="text">Important</p>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item">
 
+          <a href="#" class="nav-link">
 
+            <i class="nav-icon far fa-circle text-warning"></i>
 
+            <p>Warning</p>
 
+          </a>
 
+        </li>
 
+        <li class="nav-item">
 
+          <a href="#" class="nav-link">
 
+            <i class="nav-icon far fa-circle text-info"></i>
 
+            <p>Informational</p>
 
+          </a>
 
+        </li>
 
       </ul>
 
     </nav>
 
   </div>

+ 32 - 9
src/partials/dashboard/_topbar.html
View File 

@@ -1,5 +1,5 @@
 
 <!-- Navbar -->
 
-<nav class="main-header navbar navbar-expand">
 
+<nav class="main-header navbar navbar-expand navbar-light">
 
   <div class="container-fluid">
 
     <ul class="navbar-nav">
 
       <li class="nav-item">
 
@@ -11,16 +11,39 @@
 
       <li class="nav-item">
 
         <a href="#" class="nav-link">Contact</a>
 
       </li>
 
+    </ul>
 
+    <!-- Right navbar links -->
 
+    <ul class="navbar-nav mr-auto">
 
+      <!-- Navbar Search -->
 
+      <li class="nav-item">
 
+        <a class="nav-link" data-widget="navbar-search" href="#" role="button">
 
+          <i class="fas fa-search"></i>
 
+        </a>
 
+      </li>
 
+
 
+      <!-- Messages Dropdown Menu -->
 
+      <li class="nav-item dropdown">
 
+        <a class="nav-link" data-toggle="dropdown" href="#">
 
+          <i class="far fa-comments"></i>
 
+          <span class="badge bg-danger navbar-badge">3</span>
 
+        </a>
 
+      </li>
 
+      <!-- Notifications Dropdown Menu -->
 
       <li class="nav-item dropdown">
 
-        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
 
-          Dropdown
 
+        <a class="nav-link" data-toggle="dropdown" href="#">
 
+          <i class="far fa-bell"></i>
 
+          <span class="badge bg-warning navbar-badge">15</span>
 
+        </a>
 
+      </li>
 
+      <li class="nav-item">
 
+        <a class="nav-link" data-widget="fullscreen" href="#" role="button">
 
+          <i class="fas fa-expand-arrows-alt"></i>
 
+        </a>
 
+      </li>
 
+      <li class="nav-item">
 
+        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
 
+          <i class="fas fa-th-large"></i>
 
         </a>
 
-        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
-          <li><a class="dropdown-item" href="#">Action</a></li>
 
-          <li><a class="dropdown-item" href="#">Another action</a></li>
 
-          <li><hr class="dropdown-divider"></li>
 
-          <li><a class="dropdown-item" href="#">Something else here</a></li>
 
-        </ul>
 
       </li>
 
     </ul>
 
   </div>

+ 10 - 0
src/scss/_main-header.scss
View File 

@@ -16,6 +16,16 @@
 
   z-index: $zindex-main-header;
 
 }
 
 
+// Navbar badge
 
+.navbar-badge {
 
+  font-size: .6rem;
 
+  font-weight: 300;
 
+  padding: 2px 4px;
 
+  position: absolute;
 
+  right: 5px;
 
+  top: 9px;
 
+}
 
+
 
 .layout-navbar-fixed {
 
   .main-header {
 
     // position: fixed;

+ 2 - 2
src/scss/_variables.scss
View File 

@@ -419,7 +419,7 @@ $aspect-ratios: (
 
 
 // scss-docs-start font-variables
 
 // stylelint-disable value-keyword-case
 
-$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 
+$font-family-sans-serif:      "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 
 // stylelint-enable value-keyword-case
 
 $font-family-base:            var(--#{$variable-prefix}font-sans-serif) !default;
 
@@ -945,7 +945,7 @@ $nav-pills-link-active-bg:          $component-active-bg !default;
 
 $navbar-padding-y:                  $spacer / 2 !default;
 
 $navbar-padding-x:                  null !default;
 
 
-$navbar-nav-link-padding-x:         .5rem !default;
 
+$navbar-nav-link-padding-x:         1rem !default;
 
 
 $navbar-brand-font-size:            $font-size-lg !default;
 
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link