样式兼容

config/admin.php

@@ -312,23 +312,12 @@ return [
     | This value is the layout of admin pages.
     */
     'layout' => [
-        // vertical, horizontal
-        'mainLayout_type' => 'vertical',
-
         'body_class' => '',
 
         'sidebar_collapsed' => false,
 
-        'blank_page' => false,
-
         // bg-primary, bg-info, bg-warning, bg-success, bg-danger, bg-dark
         'navbar_color' => '',
-
-        // floating, static, sticky, hidden
-        'vertical_menu_navbar_type' => 'floating',
-
-        // static, sticky, hidden
-        'footer_type' => 'static',
     ],
 
     /*

resources/assets/adminlte/scss/_buttons.scss

@@ -45,7 +45,7 @@
 // Button color variations
 .btn-default {
   background-color: $button-default-background-color;
-  border-color: $button-default-border-color;
+  border-color: $button-default-background-color;
   color: $button-default-color;
 
   &:hover,

resources/assets/adminlte/scss/_sidebar-mini.scss

@@ -79,7 +79,7 @@
 
   .main-sidebar {
     .nav .nav-item .nav-link {
-      padding: 10px 25px !important;
+      padding: 10px 23px !important;
     }
 
     .nav .nav-treeview {

resources/assets/dcat/js/extensions/Slider.js

@@ -1,7 +1,7 @@
 
 let idPrefix = 'dcat-slider-',
-    template = `<div id="{id}" class="customizer {class}">
-    <div class="customizer-content position-fixed p-1 ps ps--active-y"></div>
+    template = `<div id="{id}" class="slider-panel {class}">
+    <div class="slider-content position-fixed p-1 ps ps--active-y"></div>
 </div>`;
 
 export default class Slider {
@@ -23,10 +23,10 @@ export default class Slider {
         );
 
         _this.$container.appendTo('body');
-        _this.$container.find('.customizer-content').append(_this.$target);
+        _this.$container.find('.slider-content').append(_this.$target);
 
         // 滚动条
-        new PerfectScrollbar(`#${_this.id} .customizer-content`);
+        new PerfectScrollbar(`#${_this.id} .slider-content`);
 
         if (_this.options.autoDestory) {
             // 刷新或跳转页面时移除面板

resources/assets/dcat/sass/components/_button.scss

@@ -8,6 +8,10 @@
   cursor: pointer;
 }
 
+.btn-warning {
+  color: white;
+}
+
 .btn-group {
   .btn {
     box-shadow: none;

resources/assets/dcat/sass/components/_menu.scss

@@ -1,25 +1,11 @@
 
 .main-menu {
   .navbar-header {
-    padding: 0.35rem 1rem 4.5rem;
+    padding: 0.35rem 1rem 0;
 
     .navbar-brand {
       margin-top: 1.2rem;
 
-      .logo-mini {
-        display: none;
-        font-size: 1.8rem;
-      }
-
-      .logo-lg {
-        color: $primary;
-        font-weight: 400;
-        letter-spacing: 0.01rem;
-        font-size: 1.55rem;
-        -webkit-animation: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1 fadein;
-        animation: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1 fadein;
-      }
-
       img {
         display: inline-block;
         max-width: 45px;
@@ -28,12 +14,21 @@
       }
     }
 
-    .modern-nav-toggle {
-      display: block;
-      float: right;
-      margin-top: 1px;
+    .logo-mini {
+      display: none;
+      font-size: 1.8rem;
+    }
+
+    .logo-lg {
+      color: $primary;
+      font-weight: 400;
+      letter-spacing: 0.01rem;
+      font-size: 1.55rem;
+      -webkit-animation: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1 fadein;
+      animation: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1 fadein;
     }
 
+
     .nav-item {
       width: 100%;
       text-align: center;
@@ -55,21 +50,19 @@
   box-shadow: $menu-shadow;
 }
 
-body.vertical-layout.vertical-menu-modern.menu-collapsed {
-  .main-menu:not(.expanded) .navbar-header {
-    width: 80px;
-    padding: 0.35rem 15px;
+body.sidebar-collapse {
+  .main-sidebar:not(:hover) {
+    .navbar-header {
+      width: 80px;
+      padding: 0.35rem 15px;
 
-    .logo-lg {
-      display: none;
-    }
+      .logo-lg {
+        display: none;
+      }
 
-    .logo-mini {
-      display: inline-block;
+      .logo-mini {
+        display: inline-block;
+      }
     }
   }
 }
-
-body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > i:before {
-  font-size: 1.3rem;
-}

resources/assets/dcat/sass/components/_slider-panel.scss

@@ -0,0 +1,68 @@
+.slider-panel {
+  padding: 0;
+  background-color: $white;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
+  transition: right 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
+  backface-visibility: hidden;
+  border-left: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: $menu-shadow;
+
+  width: 450px;
+  right: -450px;
+  z-index: 100;
+
+  &.open{
+    right: 0;
+  }
+
+  .slider-content {
+    position: relative;
+    height: 100%;
+    width: 450px;
+  }
+
+  .slider-close{
+    position: absolute;
+    right: 30px;
+    top: 20px;
+    padding: 7px;
+    width: auto;
+    z-index: 10;
+    color: #626262;
+    i{
+      font-size: 1.71rem;
+    }
+  }
+
+  .slider-toggle {
+    background: $primary;
+    color: $white;
+    display: block;
+    box-shadow: -3px 0px 8px rgba(0, 0, 0, 0.1);
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+    position: absolute;
+    top: 50%;
+    width: 38px;
+    height: 38px;
+    left: -39px;
+    text-align: center;
+    line-height: 40px;
+    cursor: pointer;
+  }
+}
+
+@media (max-width: 576px) {
+  .slider-panel {
+    width: 410px;
+    right: -410px;
+
+    .slider-content {
+      width: 410px;
+    }
+  }
+}

resources/assets/dcat/sass/components/_slider.scss

@@ -1,21 +0,0 @@
-.customizer {
-  width: 450px;
-  right: -450px;
-  box-shadow: $menu-shadow;
-  z-index: 48;
-
-  .customizer-content {
-    width: 450px;
-  }
-}
-
-@media (max-width: 576px) {
-  .customizer {
-    width: 410px;
-    right: -410px;
-
-    .customizer-content {
-      width: 410px;
-    }
-  }
-}

resources/assets/dcat/sass/dcat-app.scss

@@ -160,7 +160,7 @@ ol, ul, dl {
 // layer弹窗
 @import "./components/layer";
 // 滑动面板
-@import "./components/slider";
+@import "./components/slider-panel";
 // grid selector
 @import "./components/grid-selector";
 // box

resources/assets/sass/bootstrap-extended.scss

@@ -4,14 +4,9 @@
 
 // mixins
 @import "bootstrap-extended/mixins/_buttons";
-@import "bootstrap-extended/mixins/_buttons";
 @import "bootstrap-extended/mixins/_navs";
 @import "bootstrap-extended/mixins/_forms";
 
-// Load variable overrides
-@import "variables/variables";
-@import "bootstrap/variables";
-
 // Bootstrap  variables
 @import "bootstrap/variables";
 @import "variables/variables";

resources/assets/sass/bootstrap-extended/_buttons.scss

@@ -7,6 +7,7 @@
   }
   // for white button
   &.btn-white{
+    background: white;
     color: $body-color;
     &:hover,&:focus,&:active{
       color: $body-color !important;

resources/assets/sass/bootstrap-extended/_pagination.scss

@@ -115,7 +115,7 @@
     .page-link {
       border: none;
       margin: 0;
-      color: rgba($pure-black, .6);
+      color: rgba($pure-black, .9);
       background-color: $pagination-bg-color;
       margin-left: 0;
       font-size: 1rem;

resources/views/filter/button.blade.php

@@ -1,6 +1,6 @@
 <div class="btn-group filter-button-group btn-no-shadow dropdown" style="margin-right:3px">
     <button
-            class="btn btn-primary {{ $btn_class }}"
+            class="btn btn-outline-primary {{ $btn_class }}"
             @if($only_scopes)data-toggle="dropdown"@endif
             @if($scopes->isNotEmpty()) style="border-right: 0" @endif
     >
@@ -14,7 +14,7 @@
             <li role="separator" class="dropdown-divider"></li>
             <li class="dropdown-item"><a href="{{ $url_no_scopes }}">{{ trans('admin.cancel') }}</a></li>
         </ul>
-        <button type="button" class="btn btn-primary" data-toggle="dropdown" style="padding: 0.75rem 1rem !important;border-left: 0">
+        <button type="button" class="btn btn-outline-primary" data-toggle="dropdown" style="padding: 0.75rem 1rem !important;border-left: 0">
             @if($current_label) <span>{{ $current_label }}&nbsp;</span>@endif <i class="feather icon-chevron-down"></i>
         </button>
     @endif

resources/views/layouts/full-page.blade.php

@@ -27,8 +27,8 @@
 </head>
 
 <body
-      class="dcat-admin-body vertical-layout vertical-menu-modern 1-column {{ $configData['blank_page_class'] }} {{ $configData['body_class'] }} {{($configData['theme'] === 'light') ? '' : $configData['theme'] }}"
-        data-menu="vertical-menu-modern" data-col="1-column" data-layout="{{ $configData['theme'] }}">
+      class="dcat-admin-body 1-column  {{ $configData['body_class'] }}"
+         data-col="1-column">
 
 <script>
     var Dcat = CreateDcat({!! Dcat\Admin\Admin::jsVariables() !!});

resources/views/layouts/vertical.blade.php

@@ -1,5 +1,5 @@
 <body
-    class="dcat-admin-body sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed {{ $configData['blank_page_class'] }} {{ $configData['body_class']}} {{ $configData['sidebar_class'] }}" >
+    class="dcat-admin-body sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed {{ $configData['body_class']}} {{ $configData['sidebar_class'] }}" >
 
     <script>
         var Dcat = CreateDcat({!! Dcat\Admin\Admin::jsVariables() !!});
@@ -19,7 +19,7 @@
         </div>
     </div>
 
-    <footer class="main-footer {{($configData['footer_type'] === 'footer-hidden') ? 'd-none':''}}">
+    <footer class="main-footer">
         <p class="clearfix blue-grey lighten-2 mb-0">
             <span class="text-center d-block d-md-inline-block mt-25">
                 Powered by

resources/views/partials/navbar.blade.php

@@ -1,8 +1,8 @@
 
 <nav class="header-navbar navbar-expand-lg navbar
-    navbar-with-menu
-{{ $configData['navbar_class'] }}
-        navbar-light navbar-shadow {{ $configData['navbar_color'] }}" style="top: 0;">
+    navbar-with-menu {{ $configData['navbar_class'] }}
+{{ $configData['navbar_color'] }}
+        navbar-light navbar-shadow " style="top: 0;">
 
     <div class="navbar-wrapper">
         <div class="navbar-container content">

resources/views/partials/sidebar.blade.php

@@ -1,41 +1,25 @@
 <div class="main-menu">
-{{--    <div class="navbar-header">--}}
-{{--        <ul class="nav navbar-nav flex-row">--}}
-{{--            <li class="nav-item mr-auto">--}}
-{{--                <a href="{{ admin_url('/') }}" class="navbar-brand waves-effect waves-light">--}}
-{{--                    <span class="logo-mini">{!! config('admin.logo-mini') !!}</span>--}}
-{{--                    <span class="logo-lg">{!! config('admin.logo') !!}</span>--}}
-{{--                </a>--}}
-
-{{--                <a class="nav-link modern-nav-toggle pr-0" data-toggle="collapse">--}}
-{{--                    <i class="feather icon-x d-block d-xl-none font-medium-4 primary toggle-icon"></i>--}}
-{{--                    <i class="toggle-icon feather icon-disc font-medium-4 d-none d-xl-block primary collapse-toggle-icon"--}}
-{{--                       data-ticon="icon-disc">--}}
-{{--                    </i>--}}
-{{--                </a>--}}
-{{--            </li>--}}
-{{--        </ul>--}}
-{{--    </div>--}}
-{{--    <div class="shadow-bottom"></div>--}}
     <div class="main-menu-content">
         <aside class="main-sidebar sidebar-light-primary shadow">
-            <!-- Brand Logo -->
-            <a href="index3.html" class="brand-link">
-                <img class="brand-image img-circle elevation-3" >
-                <span class="brand-text font-weight-light">AdminLTE 3</span>
-            </a>
-
-            <div class="sidebar">
+            <div class="navbar-header">
+                <ul class="nav navbar-nav flex-row">
+                    <li class="nav-item mr-auto">
+                        <a href="{{ admin_url('/') }}" class="navbar-brand waves-effect waves-light">
+                            <span class="logo-mini">{!! config('admin.logo-mini') !!}</span>
+                            <span class="logo-lg">{!! config('admin.logo') !!}</span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
 
-                <nav class="mt-2">
-                    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
-                        {!! admin_section(AdminSection::LEFT_SIDEBAR_MENU_TOP) !!}
+            <div class="sidebar mt-1">
+                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
+                    {!! admin_section(AdminSection::LEFT_SIDEBAR_MENU_TOP) !!}
 
-                        {!! admin_section(AdminSection::LEFT_SIDEBAR_MENU) !!}
+                    {!! admin_section(AdminSection::LEFT_SIDEBAR_MENU) !!}
 
-                        {!! admin_section(AdminSection::LEFT_SIDEBAR_MENU_BOTTOM) !!}
-                    </ul>
-                </nav>
+                    {!! admin_section(AdminSection::LEFT_SIDEBAR_MENU_BOTTOM) !!}
+                </ul>
             </div>
         </aside>
     </div>

src/Grid/Tools/RefreshButton.php

@@ -16,7 +16,7 @@ class RefreshButton implements Renderable
         $refresh = trans('admin.refresh');
 
         return <<<EOT
-<button data-action="refresh" class="btn btn-primary grid-refresh btn-mini" style="margin-right:3px">
+<button data-action="refresh" class="btn btn-outline-primary grid-refresh btn-mini" style="margin-right:3px">
     <i class="feather icon-refresh-cw"></i><span class="d-none d-sm-inline">&nbsp; $refresh</span>
 </button>
 EOT;

src/Layout/Content.php

@@ -409,17 +409,11 @@ class Content implements Renderable
     {
         // default data array
         $defaultData = [
-            'main_layout_type' => 'vertical',
-            'theme' => 'light',
             'sidebar_collapsed' => false,
             'navbar_color' => '',
-            'horizontal_menu_type' => 'floating',
-            'vertical_menu_navbar_type' => 'floating',
-            'footer_type' => 'static', //footer
+            'navbar_class' => 'floating',
+            'footer_type' => '',
             'body_class' => '',
-            'content_layout' => 'default',
-            'blank_page' => false,
-            'direction' => env('MIX_CONTENT_DIRECTION', 'ltr'),
         ];
 
         $data = array_merge(
@@ -427,27 +421,13 @@ class Content implements Renderable
             $this->config
         );
 
-        // All options available in the template
         $allOptions = [
-            'main_layout_type' => ['vertical', 'horizontal'],
-            'theme' => ['light' => 'light', 'dark' => 'dark-layout', 'semi-dark' => 'semi-dark-layout'],
             'sidebar_collapsed' => [true, false],
             'navbar_color' => ['bg-primary', 'bg-info', 'bg-warning', 'bg-success', 'bg-danger', 'bg-dark'],
-            'content_layout' => ['default', 'content-left-sidebar', 'content-right-sidebar', 'content-detached-left-sidebar', 'content-detached-right-sidebar'],
-            'sidebar_position_class' => ['content-left-sidebar' => 'sidebar-left', 'content-right-sidebar' => 'sidebar-right', 'content-detached-left-sidebar' => 'sidebar-detached sidebar-left', 'content-detached-right-sidebar' => 'sidebar-detached sidebar-right', 'default' => 'default-sidebar-position'],
-            'content_sidebar_class' => ['content-left-sidebar' => 'content-right', 'content-right-sidebar' => 'content-left', 'content-detached-left-sidebar' => 'content-detached content-right', 'content-detached-right-sidebar' => 'content-detached content-left', 'default' => 'default-sidebar'],
-            'direction' => ['ltr', 'rtl'],
-            'horizontal_menu_type' => ['floating' => 'navbar-floating', 'static' => 'navbar-static', 'sticky' => 'navbar-sticky'],
-            'horizontal_menu_class' => ['static' => 'menu-static', 'sticky' => 'fixed-top', 'floating' => 'floating-nav'],
-            'vertical_menu_navbar_type' => ['floating' => 'navbar-floating', 'static' => 'navbar-static', 'sticky' => 'navbar-sticky', 'hidden' => 'navbar-hidden'],
-            'navbar_class' => ['floating' => 'floating-nav', 'static' => 'static-top', 'sticky' => 'fixed-top', 'hidden' => 'd-none'],
-            'footer_type' => ['static' => 'footer-static', 'sticky' => 'fixed-footer', 'hidden' => 'footer-hidden'],
+            'navbar_class' => ['floating' => 'floating-nav', 'sticky' => 'fixed-top', 'hidden' => 'd-none'],
         ];
 
         $maps = [
-            'content_layout' => 'sidebar_position_class',
-            'horizontal_menu_type' => 'horizontal_menu_type',
-            'vertical_menu_navbar_type' => 'vertical_menu_navbar_type',
             'footer_type' => 'footer_type',
         ];
 
@@ -470,26 +450,13 @@ class Content implements Renderable
             }
         }
 
-        // layout classes
         return [
             'theme' => $data['theme'],
-            'layout_theme' => $allOptions['theme'][$data['theme']] ?? $data['theme'],
             'sidebar_collapsed' => $data['sidebar_collapsed'],
-            'vertical_menu_navbar_type' => $allOptions['vertical_menu_navbar_type'][$data['vertical_menu_navbar_type']],
-            'navbar_class' => $allOptions['navbar_class'][$data['vertical_menu_navbar_type']],
             'navbar_color' => $data['navbar_color'],
-            'horizontal_menu_type' => $allOptions['horizontal_menu_type'][$data['horizontal_menu_type']],
-            'horizontal_menu_class' => $allOptions['horizontal_menu_class'][$data['horizontal_menu_type']],
-            'footer_type' => $allOptions['footer_type'][$data['footer_type']],
-            'sidebar_class' => $data['sidebar_collapsed'] ? 'menu-collapsed' : 'menu-expanded',
+            'navbar_class' => $allOptions['navbar_class'][$data['navbar_class']],
+            'sidebar_class' => $data['sidebar_collapsed'] ? 'sidebar-collapse' : '',
             'body_class' => $data['body_class'],
-            'blank_page' => $data['blank_page'],
-            'blank_page_class' => $data['blank_page'] ? 'blank-page' : '',
-            'content_layout' => $data['content_layout'],
-            'sidebar_position_class' => $allOptions['sidebar_position_class'][$data['content_layout']],
-            'content_sidebar_class' => $allOptions['content_sidebar_class'][$data['content_layout']],
-            'main_layout_type' => $data['main_layout_type'],
-            'direction' => $data['direction'],
         ];
     }