Optimize dashboard sidebar

jcc · Sep 5, 2018 · bf1d427 · bf1d427
1 parent 3e4184b
commit bf1d427
Show file tree

Hide file tree

Showing 11 changed files with 62 additions and 69 deletions.
diff --git a/resources/assets/js/dashboard/Main.vue b/resources/assets/js/dashboard/Main.vue
@@ -62,7 +62,8 @@ body {
   height: 100%;
   margin-left: -250px;
   overflow-y: auto;
-  background: #4d5e70;
+  background-color: transparent;
+  background-image: linear-gradient(180deg, #647f9d, #3d4e60);
   transition: all 0.5s ease;
 }
 

diff --git a/resources/assets/js/dashboard/components/Form.vue b/resources/assets/js/dashboard/components/Form.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="row">
-    <div class="ibox">
-      <div class="ibox-title">
+    <div class="box">
+      <div class="box-title">
         <small class="float-right">
           <slot name="buttons"></slot>
         </small>
         <h5>{{ title }}</h5>
       </div>
-      <div class="ibox-content">
+      <div class="box-content">
         <slot name="content"></slot>
       </div>
     </div>

diff --git a/resources/assets/js/dashboard/components/Table.vue b/resources/assets/js/dashboard/components/Table.vue
@@ -1,6 +1,6 @@
 <template>
-  <div :class="wrapperClass" class="ibox">
-    <div class="ibox-title d-flex">
+  <div :class="wrapperClass" class="box">
+    <div class="box-title d-flex">
       <h5 class="align-self-center font-weight-normal">{{ title }}</h5>
       <small class="ml-auto d-flex flex-row">
         <div class="input-group input-group-sm mr-2">
@@ -12,7 +12,7 @@
         <slot name="buttons"></slot>
       </small>
     </div>
-    <div class="ibox-content no-padding table-responsive">
+    <div class="box-content no-padding table-responsive">
       <table :class="tableClass">
         <thead>
           <tr>

diff --git a/resources/assets/js/dashboard/components/particals/Navbar.vue b/resources/assets/js/dashboard/components/particals/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <nav class="navbar navbar bg-white">
+  <nav class="navbar navbar bg-white shadow">
     <div class="navbar-brand">
       <a class="navbar-toggler text-left" @click="toggle">
         <i class="fas fa-bars text-secondary"></i>

diff --git a/resources/assets/js/dashboard/components/particals/Sidebar.vue b/resources/assets/js/dashboard/components/particals/Sidebar.vue
@@ -85,7 +85,6 @@
 .user {
   text-align: center;
   padding-top: 15px;
-  background-color: #52697f;
 }
 
 .user .avatar {
@@ -107,25 +106,27 @@
   height: 40px;
   line-height: 40px;
   margin-right: 5px;
-  color: #828a9a;
+  color: #fff;
+  opacity: .5;
 }
 .buttons a:hover {
-  color: #fff;
+  opacity: 1;
 }
 .sidebar-nav li a {
   display: block;
   text-decoration: none;
-  color: #999999;
+  color: #fff;
+  opacity: .5;
 }
 
 .sidebar-nav li a:hover {
+  opacity: 1;
   text-decoration: none;
-  color: #fff;
-  background: rgba(255,255,255,0.2);
+  background: #647f9d;
 }
 
 .sidebar-nav li .active {
-  color: #fff !important;
+  opacity: 1;
 }
 
 .sidebar-nav li a i {
@@ -144,19 +145,4 @@
 .active a {
   color: #fff !important;
 }
-
-.sidebar-nav > .sidebar-brand {
-  height: 65px;
-  font-size: 18px;
-  line-height: 60px;
-}
-
-.sidebar-nav > .sidebar-brand a {
-  color: #999999;
-}
-
-.sidebar-nav > .sidebar-brand a:hover {
-  color: #fff;
-  background: none;
-}
 </style>
diff --git a/resources/assets/js/dashboard/modules/file/File.vue b/resources/assets/js/dashboard/modules/file/File.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="row">
-    <div class="ibox">
-      <div class="ibox-title">
+    <div class="box">
+      <div class="box-title">
         <div class="row d-flex no-margin">
           <div class="col-md-6 d-flex align-self-center">
             <h5 class="align-self-center float-left">{{ $t('page.files') }}&nbsp;&nbsp;</h5>
@@ -30,7 +30,7 @@
           </div>
         </div>
       </div>
-      <div class="ibox-content no-padding">
+      <div class="box-content no-padding">
         <table id="uploads-table" class="table table-striped table-hover">
           <tbody>
             <tr>
@@ -313,7 +313,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.ibox-content .btn {
+.box-content .btn {
   display: inline-block;
   border-radius: 50%;
   width: 2.2rem;

diff --git a/resources/assets/js/dashboard/modules/home/Home.vue b/resources/assets/js/dashboard/modules/home/Home.vue
@@ -1,56 +1,46 @@
 <template>
   <div class="wrapper">
-    <div class="row">
-      <div class="col-md-12 col-sm-12 col-xs-12">
-        <div class="ibox">
-          <div class="ibox-title ibox-warning">
-            <span class="badge badge-secondary float-right">{{ $t('page.admin') }}</span>
-            <h5 class="no-margins">Notice For Everyone.</h5>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="row">
+    <div class="row pt-3">
       <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="ibox">
-          <div class="ibox-title">
+        <div class="box shadow-sm box-radius">
+          <div class="box-title">
             <span class="badge badge-success float-right">{{ $t('page.all') }}</span>
             <h5 class="no-margins">{{ $t('page.user_num') }}</h5>
           </div>
-          <div class="ibox-content">
+          <div class="box-content">
             <h1 class="no-margins"><i class="fas fa-users"></i>{{ statistics.users }}</h1>
           </div>
         </div>
       </div>
       <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="ibox">
-          <div class="ibox-title">
+        <div class="box box-radius">
+          <div class="box-title">
             <span class="badge badge-success float-right">{{ $t('page.all') }}</span>
             <h5 class="no-margins">{{ $t('page.view_num') }}</h5>
           </div>
-          <div class="ibox-content">
+          <div class="box-content">
             <h1 class="no-margins"><i class="fas fa-eye"></i>{{ statistics.visitors }}</h1>
           </div>
         </div>
       </div>
       <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="ibox">
-          <div class="ibox-title">
+        <div class="box box-radius">
+          <div class="box-title">
             <span class="badge badge-success float-right">{{ $t('page.all') }}</span>
             <h5 class="no-margins">{{ $t('page.article_num') }}</h5>
           </div>
-          <div class="ibox-content">
+          <div class="box-content">
             <h1 class="no-margins"><i class="fas fa-newspaper"></i>{{ statistics.articles }}</h1>
           </div>
         </div>
       </div>
       <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="ibox">
-          <div class="ibox-title">
+        <div class="box box-radius">
+          <div class="box-title">
             <span class="badge badge-success float-right">{{ $t('page.all') }}</span>
             <h5 class="no-margins">{{ $t('page.comment_num') }}</h5>
           </div>
-          <div class="ibox-content">
+          <div class="box-content">
             <h1 class="no-margins"><i class="fas fa-comments"></i>{{ statistics.comments }}</h1>
           </div>
         </div>

diff --git a/resources/assets/js/dashboard/modules/system/System.vue b/resources/assets/js/dashboard/modules/system/System.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="row">
-    <div class="ibox">
-      <div class="ibox-title">
+    <div class="box">
+      <div class="box-title">
         <h5>{{ $t('page.systems') }}</h5>
       </div>
-      <div class="ibox-content">
+      <div class="box-content">
         <div class="row">
           <div class="col-md-2">
             <div class="sidebar">

diff --git a/resources/assets/sass/_ibox.scss → resources/assets/sass/_box.scss b/resources/assets/sass/_ibox.scss → resources/assets/sass/_box.scss
@@ -1,11 +1,11 @@
-.ibox {
+.box {
     clear: both;
     margin-bottom: 25px;
     margin-top: 0;
     padding: 0;
     width: 100%;
 }
-.ibox-title {
+.box-title {
     -moz-border-bottom-colors: none;
     -moz-border-left-colors: none;
     -moz-border-right-colors: none;
@@ -20,22 +20,22 @@
     padding: 15px 15px 7px;
     min-height: 48px;
 }
-.ibox-default {
+.box-default {
     border-color: #e7eaec;
 }
-.ibox-success {
+.box-success {
     border-color: #3498db;
 }
-.ibox-success {
+.box-success {
     border-color: #1abc9c;
 }
-.ibox-warning {
+.box-warning {
     border-color: #f1c40f;
 }
-.ibox-danger {
+.box-danger {
     border-color: #e74c3c;
 }
-.ibox-content {
+.box-content {
     clear: both;
     background-color: #ffffff;
     color: inherit;
@@ -48,3 +48,13 @@
 .no-padding {
     padding: 0;
 }
+.box-radius {
+  .box-title {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+  }
+  .box-content {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+}
diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss
@@ -16,9 +16,15 @@ $green:   #2ECC71 !default;
 $teal:    #1ABC9C !default;
 $cyan:    #3498db !default;
 $wet-asphalt:    #34495e !default;
+$black:   #000 !default;
 
 $component-active-bg: $wet-asphalt !default;
 
+// Shadow
+$box-shadow-sm:               0 .125rem .25rem rgba($black, .025) !default;
+$box-shadow:                  0 .25rem .5rem rgba($black, .05) !default;
+$box-shadow-lg:               0 .5rem 1.5rem rgba($black, .075) !default;
+
 // Toggle
 $rgb-black: "0,0,0" !default;
 $mdb-label-color: unquote("rgba(#{$rgb-black}, 0.26)") !default;

diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
@@ -11,7 +11,7 @@
 
 @import "form";
 @import "navbar";
-@import "ibox";
+@import "box";
 @import "toastr";
 @import "togglebutton";