Dashboard: fix charts adaptive, fix percent position, justify content;

Helper: fix link to documentation;
Invoice: fix table colors, change logo, add breadcrumbs;
Calendar: fix icon color;
Maps: fix widget justify;
Progress: change bg color;
Table: fix checkbox style;
Grid: fix position, widget icons, add spaces;
Charts: fix several charts;
Upd dependencies, changelog.

Author: Blari

changelog.md

@@ -1,54 +1,53 @@
 # Changelog
-## [3.1.6]
+## [3.1.7]
+### Updated
+- Update dependency 
+
+### Fixed
+Much work has been done to improve and correct a lot of small bugs :)
 
+## [3.1.6]
 ### Updated
 - Update dependency 
-## [3.1.5]
 
+## [3.1.5]
 ### Fixed
 - Update dependency 
 - Fix animate class 
 - Fix link to git repo
 
 ## [3.1.4]
-
 ### Fixed
 
 - Fix invalid token validation
 
 ## [3.1.3]
-
 ### Fixed
 
 - fixed issue with themes
 
 ## [3.1.2]
-
 ### Updated
 
 - updated seed version
 - updated documentation
 
 ## [3.1.1]
-
 ### Fixed
 
 - Design fixes
 
 ## [3.1.0]
-
 ### Updated
 
 - Added brand new design!
 
 ## [3.0.5]
-
 ### Fixed
 
 - fix bugs
 
 ## [3.0.4]
-
 ### Updated
 
 - added documentation menu

package.json

@@ -1,6 +1,6 @@
 {
   "name": "light-blue-vue",
-  "version": "3.1.6",
+  "version": "3.1.7",
   "private": true,
   "scripts": {
     "start": "vue-cli-service serve --port 3000",
@@ -19,14 +19,14 @@
     "@fullcalendar/interaction": "^4.4.2",
     "@fullcalendar/timegrid": "^4.4.2",
     "@fullcalendar/vue": "^4.4.2",
-    "animate.css": "^4.1.0",
+    "animate.css": "^4.1.1",
     "animated-number-vue": "^1.0.0",
-    "apexcharts": "^3.21.0",
+    "apexcharts": "^3.22.1",
     "awesome-bootstrap-checkbox": "^1.0.1",
-    "axios": "^0.20.0",
-    "bootstrap": "^4.5.2",
-    "bootstrap-vue": "2.17.3",
-    "chart.js": "^2.9.3",
+    "axios": "^0.21.0",
+    "bootstrap": "^4.5.3",
+    "bootstrap-vue": "2.18.1",
+    "chart.js": "^2.9.4",
     "css-loader": "^1.0.1",
     "cross-env": "^7.0.2",
     "echarts": "4.9.0",
@@ -40,7 +40,7 @@
     "jsonwebtoken": "^8.5.1",
     "line-awesome": "1.3.0",
     "mavon-editor": "^2.9.0",
-    "moment": "^2.29.0",
+    "moment": "^2.29.1",
     "node-sass": "^4.14.1",
     "rickshaw": "1.7.1",
     "sass-loader": "^7.3.1",
@@ -60,7 +60,7 @@
     "vue-form-wizard": "^0.8.4",
     "vue-gallery": "^1.5.0",
     "vue-input-tag": "^2.0.7",
-    "vue-router": "^3.4.3",
+    "vue-router": "^3.4.8",
     "vue-select": "^2.6.4",
     "vue-tables-2": "^1.6.25",
     "vue-textarea-autosize": "^1.1.1",
@@ -69,7 +69,7 @@
     "vue2-datepicker": "^2.13.4",
     "vue2-dropzone": "^3.6.0",
     "vue2-google-maps": "0.10.7",
-    "vuedraggable": "^2.24.1",
+    "vuedraggable": "^2.24.3",
     "vuetrend": "^0.3.4",
     "vuex": "^3.5.1",
     "webpack-cli": "^3.3.12"

src/Routes.js

@@ -45,6 +45,7 @@ import SearchPage from '@/pages/Extra/Search/Search';
 import TimelinePage from '@/pages/Extra/Timeline/Timeline';
 import GalleryPage from '@/pages/Extra/Gallery/Gallery';
 import Login from '@/pages/Login/Login';
+import LoginDemo from '@/pages/Extra/LoginDemo/LoginDemo';
 import Register from '@/pages/Register/Register';
 import ErrorPage from '@/pages/Error/Error';
 // Ui
@@ -95,6 +96,11 @@ export default new Router({
       name: 'Login',
       component: Login,
     },
+    {
+      path: '/login-demo',
+      name: 'LoginDemo',
+      component: LoginDemo,
+    },
     {
       path: '/register',
       name: 'Register',

src/assets/logo.jpg

@@ -18,12 +18,11 @@
                     class="btn btn-warning btn-rounded-f btn-block fs-mini text-white">
                         Purchase
                     </a>
-                    <a href='https://demo.flatlogic.com/light-blue-vue/dark/#/documentation'
-                    target="_blank"
-                    role="button"
+                  <router-link
+                    to="/documentation"
                     class="btn btn-inverse btn-rounded-f btn-block fs-mini">
-                        Documentation
-                    </a>
+                      Documentation
+                  </router-link>
                 </div>
                 <div class="d-flex justify-content-between mt-lg">
                     <a role="button"

src/components/Helper/Helper.vue

@@ -170,7 +170,7 @@
                 :childrenLinks="[
             { header: 'Calendar', link: '/app/extra/calendar' },
             { header: 'Invoice', link: '/app/extra/invoice' },
-            { header: 'Login Page', link: '/login' },
+            { header: 'Login Page', link: '/login-demo' },
             { header: 'Error Page', link: '/error' },
             { header: 'Gallery', link: '/app/extra/gallery' },
             { header: 'Search Result', link: '/app/extra/search' },

src/components/Sidebar/Sidebar.vue

@@ -4,7 +4,7 @@
     <div class="sidesWrapper">
       <div class="analyticsSide">
         <b-row>
-          <b-col lg="3" sm="6" xs="12">
+          <b-col xl="3" sm="6" xs="12">
             <div class="pb-xlg h-100">
               <Widget class="h-100 mb-0" title="Visits Today" close :fetchingData="isReceiving">
                 <div class="d-flex justify-content-between align-items-center mb-lg">
@@ -25,14 +25,14 @@
               </Widget>
             </div>
           </b-col>
-          <b-col lg="3" sm="6" xs="12">
+          <b-col xl="3" sm="6" xs="12">
             <div class="pb-xlg h-100">
               <Widget class="h-100 mb-0" title="Revenue Breakdown" close :fetchingData="isReceiving">
                 <highcharts :options="donut"></highcharts>
               </Widget>
             </div>
           </b-col>
-          <b-col lg="3" sm="6" xs="12">
+          <b-col xl="3" sm="6" xs="12">
             <div class="pb-xlg h-100">
               <Widget class="h-100 mb-0" title="App Perfomance" close :fetchingData="isReceiving">
                 <p class="text-muted d-flex flex-wrap">
@@ -62,7 +62,7 @@
               </Widget>
             </div>
           </b-col>
-          <b-col lg="3" sm="6" xs="12">
+          <b-col xl="3" sm="6" xs="12">
             <div class="pb-xlg h-100">
               <Widget class="h-100 mb-0" title="Server Overview" close :fetchingData="isReceiving">
                 <div class="d-flex align-items-center mb-sm">

src/pages/Dashboard/Dashboard.vue

@@ -30,7 +30,7 @@
               class="external-event"
               data-event='{ "classNames": ["bg-gray", "text-white"], "title": "Some stuff" }'
           >
-            <i class="fa fa-circle-o fa-fw text-gray-light ml-xs mr-xs"></i>
+            <i class="fa fa-circle fa-fw text-info ml-xs mr-xs"></i>
             Some stuff
           </div>
           <div

src/pages/Extra/Calendar/Calendar.vue

@@ -2,7 +2,8 @@
 
 .invoice-page {
   .invoiceLogo {
-    max-height: 50px;
+    max-height: 100px;
+    border-radius: 10px;
   }
 
   .invoiceBody {

src/pages/Extra/Invoice/Invoice.scss

@@ -1,13 +1,19 @@
 <template>
   <b-row>
+    <b-col cols="12">
+      <ol class="breadcrumb">
+        <li class="breadcrumb-item">YOU ARE HERE</li>
+        <li class="breadcrumb-item active">Invoice</li>
+      </ol>
+    </b-col>
     <b-col lg='11'>
       <b-row class='invoice-page'>
         <b-col xs='12'>
           <Widget>
               <header>
                 <b-row>
                   <b-col md="6" xs="12" class="b-col-print-6">
-                    <img src="../../../assets/invoice-logo.png" alt="Logo" class='invoiceLogo' />
+                    <img src="../../../assets/logo.jpg" alt="Logo" class='invoiceLogo' />
                   </b-col>
                   <b-col md="6" xs="12" class="b-col-print-6">
                     <h4 class="text-right">

src/pages/Extra/Invoice/Invoice.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="auth-page">
+    <b-container>
+      <Widget class="widget-auth mx-auto" title="<h3 class='mt-0'>Login to your Web App</h3>" customHeader>
+        <p class="widget-auth-info">
+          Use your email to sign in.
+        </p>
+        <b-alert class="alert-sm text-center mt-2 widget-middle-overflow rounded-0" variant="default" show>
+          This is a real app with Node.js backend - use
+          <br/>
+          <span class="font-weight-bold">"admin@flatlogic.com / password"</span>
+          <br/>
+          to login!
+        </b-alert>
+        <form class="mt" @submit.prevent="login">
+          <b-alert class="alert-sm" variant="danger" :show="!!errorMessage">
+            {{errorMessage}}
+          </b-alert>
+          <b-form-group label="Email" label-for="email">
+            <b-input-group>
+              <b-input-group-text slot="prepend"><i class="la la-user text-white"></i></b-input-group-text>
+              <input id="email"
+                     ref="email"
+                     class="form-control input-transparent pl-3"
+                     type="email"
+                     required
+                     placeholder="Email"/>
+            </b-input-group>
+          </b-form-group>
+          <b-form-group label="Password" label-for="password">
+            <b-input-group>
+              <b-input-group-text slot="prepend"><i class="la la-lock text-white"></i></b-input-group-text>
+              <input id="password"
+                     ref="password"
+                     class="form-control input-transparent pl-3"
+                     type="password"
+                     required
+                     placeholder="Password"/>
+            </b-input-group>
+          </b-form-group>
+          <div class="bg-widget auth-widget-footer">
+            <b-button type="submit" variant="danger" class="auth-btn" size="sm">
+              <span class="auth-btn-circle">
+                <i class="la la-caret-right"></i>
+              </span>
+              {{this.isFetching ? 'Loading...' : 'Login'}}
+            </b-button>
+            <p class="widget-auth-info mt-4">
+              Don't have an account? Sign up now!
+            </p>
+            <router-link class="d-block text-center mb-4" to="register">Create an Account</router-link>
+            <div class="social-buttons">
+              <b-button @click="this.googleLogin" variant="primary" class="social-button">
+                <i class="social-icon social-google"></i>
+                <p class="social-text">GOOGLE</p>
+              </b-button>
+              <b-button @click="this.microsoftLogin" variant="success" class="social-button">
+                <i class="social-icon social-microsoft"></i>
+                <p class="social-text">MICROSOFT</p>
+              </b-button>
+            </div>
+          </div>
+        </form>
+      </Widget>
+    </b-container>
+    <footer class="auth-footer">
+      Light Blue Vue Admin Dashboard Template - Made by <a href="https://flatlogic.com" target="_blank">Flatlogic</a>
+    </footer>
+  </div>
+</template>
+
+<script>
+import Widget from '@/components/Widget/Widget';
+import {mapState, mapActions} from 'vuex';
+
+import config from '../../../config';
+import NavLink from '../../../components/Sidebar/NavLink/NavLink';
+
+export default {
+  name: 'LoginDemoPage',
+  components: {NavLink, Widget },
+  computed: {
+    ...mapState('auth', {
+      isFetching: state => state.isFetching,
+      errorMessage: state => state.errorMessage,
+    }),
+  },
+  methods: {
+    ...mapActions('auth', ['loginUser', 'receiveToken', 'receiveLogin']),
+    login() {
+      const email = this.$refs.email.value;
+      const password = this.$refs.password.value;
+
+      if (email.length !== 0 && password.length !== 0) {
+        this.loginUser({email, password});
+      }
+    },
+    googleLogin() {
+      this.loginUser({social: "google"});
+    },
+    microsoftLogin() {
+      this.loginUser({social: "microsoft"});
+    }
+  },
+  mounted() {
+    const creds = config.auth;
+    this.$refs.email.value = creds.email;
+    this.$refs.password.value = creds.password;
+  }
+};
+</script>

src/pages/Extra/LoginDemo/LoginDemo.vue

@@ -8,7 +8,7 @@
       Amcharts <span class="fw-semi-bold">Maps</span>
     </h1>
     <b-row>
-      <b-col xs="12" md="10">
+      <b-col cols="12">
         <Widget
             title="<h5>Vue Amcharts Maps <small class='text-muted'>Default and customized</small></h5>"
             customHeader close collapse

src/pages/Maps/Amcharts/Amcharts.vue

@@ -8,7 +8,7 @@
       Google <span class="fw-semi-bold">Maps</span>
     </h1>
     <b-row>
-      <b-col xs="12" md="10">
+      <b-col cols="12">
         <Widget
                 title="<h5>Vue Google Maps <small class='text-muted'>Default and customized</small></h5>"
                 customHeader close collapse

src/pages/Maps/Google/Google.vue

@@ -4,4 +4,10 @@
   .table th {
     font-size: $font-size-sm;
   }
-}
+  .abc-checkbox {
+    label::before {
+      background-color: transparent;
+      border: 1px solid #c1ccd3;
+    }
+  }
+}

src/pages/Tables/Basic/Basic.scss

@@ -68,7 +68,7 @@
           </div>
           <div class="clearfix">
             <div class="float-right">
-              <b-button variant="default" class="mr-xs" size="sm">Send to...</b-button>
+              <b-button variant="default" class="mr-3" size="sm">Send to...</b-button>
               <b-dropdown variant="inverse" class="mr-xs" size="sm" text="Clear" right>
                 <b-dropdown-item>Clear</b-dropdown-item>
                 <b-dropdown-item>Move ...</b-dropdown-item>