feat(App): update design

Author: shoudaos

changelog.md

@@ -0,0 +1,13 @@
+# Changelog
+
+## [v2.1.0]
+
+### Updated
+
+- New Design
+
+## [v2.0.0]
+
+### Updated
+
+- Remove All Jquery

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --port 3000",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "start": "node server.js"
@@ -16,35 +16,35 @@
     "apexcharts": "^3.8.6",
     "awesome-bootstrap-checkbox": "^1.0.1",
     "bootstrap": "^4.3.1",
-    "bootstrap-vue": "^2.0.0-rc.11",
-    "chart.js": "^2.7.3",
+    "bootstrap-vue": "2.0.3",
+    "chart.js": "^2.8.0",
     "css-loader": "^1.0.0",
-    "echarts": "^4.3.0",
+    "echarts": "4.5.0",
     "expose-loader": "^0.7.5",
     "font-awesome": "4.7.0",
     "glyphicons-halflings": "^1.9.1",
     "highcharts": "^7.2.0",
     "highcharts-vue": "^1.3.5",
     "imports-loader": "^0.8.0",
-    "line-awesome": "icons8/line-awesome",
+    "line-awesome": "1.3.0",
     "node-sass": "^4.9.0",
     "sass-loader": "^7.0.1",
-    "v-calendar": "^0.9.7",
+    "v-calendar": "^1.0.0-beta.16",
     "vue": "^2.5.17",
     "vue-apexcharts": "^1.5.0",
-    "vue-chartjs": "^3.4.0",
+    "vue-chartjs": "^3.4.2",
     "vue-echarts": "^4.0.4",
-    "vue-toasted": "^1.1.27",
     "vue-router": "^3.0.1",
-    "vue2-google-maps": "^0.10.2",
+    "vue-toasted": "^1.1.27",
+    "vue2-google-maps": "0.10.7",
     "vuex": "^3.0.1",
     "webpack-cli": "^3.1.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.12.0",
     "@vue/cli-plugin-eslint": "^3.12.0",
     "@vue/cli-service": "^3.12.0",
-    "vue-template-compiler": "^2.5.17"
+    "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {
     "root": true,

public/demo/grid/autoload.php

@@ -8,7 +8,7 @@ import Notifications from '@/pages/Notifications/Notifications';
 import Icons from '@/pages/Icons/Icons';
 import Maps from '@/pages/Maps/Maps';
 import Charts from '@/pages/Charts/Charts';
-import Dashboard from '@/pages/Dashboard/Dashboard';
+import Dashboard from '@/pages/Visits/Visits';
 import Login from '@/pages/Login/Login';
 import ErrorPage from '@/pages/Error/Error';
 

public/demo/grid/default.php

@@ -1,24 +1,22 @@
 @import '../../styles/app';
 
-.header {
+.app-header.navbar {
   z-index: 100;
   padding: 0 1.85rem 0;
 
   @include media-breakpoint-down(md) {
-    padding: 7px 10px;
+    padding: 0 10px;
   }
 
-  :global(.dropdown-menu) {
-    background-color: transparentize($body-bg, .15);
+  .dropdown-menu {
     color: $text-muted;
     margin-top: 12.5px;
+    background: $default-bg;
+    border: none;
   }
 
-  :global(.dropdown-item) {
-
-    .avatar {
-      margin-top: 0;
-    }
+  .dropdown-item {
+    color: $text-color;
 
     &:active,
     &:focus,
@@ -29,65 +27,90 @@
     }
   }
 
-  :global(.dropdown-menu-messages) {
-    min-width: 20rem;
+  .dropdown-menu-messages {
+    .dropdown-item {
+      display: flex;
+      align-items: center;
+    }
   }
-}
-
-.input-group-text {
-  padding-right: 0;
-  padding-left: .85rem;
-  color: $gray-600;
-}
 
-.avatar {
-  margin-top: -7px;
-}
+  .dropdown-menu-settings {
+    .dropdown-divider {
+      border-color: $dark;
+    }
+  }
 
-.divider {
-  display: block;
-  height: 38px;
-  width: 1px;
-  margin: 0 15px;
-  background: linear-gradient(rgba(51,51,51,0), rgba(51,51,51,0.5), rgba(102,102,102,0));
-}
 
-.header-alert {
-  background: $text-transparent;
-  border: none;
-  font-size: $font-size-sm;
-  line-height: 19px;
-  margin-bottom: 0;
-  padding: 3px 9px;
-  text-shadow: none;
-  border-radius: 10px;
-  color: $text-color;
-
-  :global(.close) {
-    margin-left: 1rem;
+  .input-group-text {
+    padding-left: .85rem;
+    color: $gray-600;
   }
 
-  @media (max-width: breakpoint-max('lg')) {
-    display: none;
+  .divider {
+    display: block;
+    width: 1px;
+    margin: 0 15px;
+    background: linear-gradient(rgba($dark, 0), rgba($text-color, 0.5), rgba($dark, 0));
   }
-}
 
-.navbar-nav-mobile {
-  flex-direction: row;
+  .header-alert {
+    background: $text-transparent;
+    border: none;
+    font-size: $font-size-sm;
+    line-height: 19px;
+    margin-bottom: 0;
+    padding: 3px 9px;
+    text-shadow: none;
+    border-radius: 10px;
+    color: $text-color;
+
+    .close {
+      margin-left: 1rem;
+    }
 
-  :global(.nav-link) {
-    padding-right: $navbar-nav-link-padding-x;
-    padding-left: $navbar-nav-link-padding-x;
+    @media (max-width: breakpoint-max('lg')) {
+      display: none;
+    }
   }
 
-  :global(.dropdown-menu) {
-    position: absolute;
+  .navbar-nav-mobile {
+    flex-direction: row;
+
+    .nav-item {
+      display: flex;
+      align-items: center;
 
-    @media (max-width: breakpoint-max('xs')) {
-      position: fixed;
-      top: $navbar-height;
-      right: 1rem;
-      margin-top: 0;
+      &.show {
+        display: flex !important;
+      }
+
+      .nav-link {
+        display: flex;
+        align-items: center;
+        padding-right: $navbar-nav-link-padding-x;
+        padding-left: $navbar-nav-link-padding-x;
+        color: $text-color;
+
+        &:hover {
+          color: $header-color;
+        }
+      }
+    }
+
+    .navbar-text {
+      display: flex;
+      align-items: center;
+    }
+
+    .dropdown-menu {
+      position: absolute;
+
+      @media (max-width: breakpoint-max('xs')) {
+        position: fixed;
+        top: $navbar-height;
+        right: 1rem;
+        margin-top: 0;
+      }
     }
   }
-}
+}