Merge pull request epicmaxco#2 from vlad-shusterman/FirstTask

First task
Olaw2jr · Apr 22, 2018 · 61423bc · 61423bc
2 parents aa3e982 + 8f73889
commit 61423bc
Show file tree

Hide file tree

Showing 12 changed files with 283 additions and 219 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app" class="app">
-    <layout v-if="!isAuth"></layout>
+    <layout v-if="!isAuth"/>
     <auth-layout v-else></auth-layout>
   </div>
 </template>
@@ -27,6 +27,7 @@
 
 <style lang="scss">
   @import "sass/main";
+
   body {
     height: 100%;
     #app {

diff --git a/src/components/dashboard/Dashboard.vue b/src/components/dashboard/Dashboard.vue
@@ -4,7 +4,9 @@
     <dashboard-info-widgets></dashboard-info-widgets>
 
     <vuestic-widget class="no-padding no-v-padding">
-      <vuestic-tabs :names="[$t('dashboard.dataVisualization'), $t('dashboard.usersAndMembers'), $t('dashboard.setupProfile'), $t('dashboard.features')]" ref="tabs">
+      <vuestic-tabs
+        :names="[$t('dashboard.dataVisualization'), $t('dashboard.usersAndMembers'), $t('dashboard.setupProfile'), $t('dashboard.features')]"
+        ref="tabs">
         <div :slot="$t('dashboard.dataVisualization')">
           <data-visualisation-tab></data-visualisation-tab>
         </div>
@@ -59,10 +61,8 @@
       }
     }
   }
-</script>
 
+</script>
 <style lang="scss" scoped>
-
-
   @import "../../sass/_variables.scss";
 </style>
diff --git a/src/components/layout/Layout.vue b/src/components/layout/Layout.vue
@@ -1,18 +1,17 @@
 <template>
-  <div class="layout" :class="classObject"  v-resize>
+  <div class="layout" :class="classObject" v-resize>
     <navbar></navbar>
     <sidebar></sidebar>
-
+    <div class="content-wrap" id="content-wrap">
+      <main id="content" class="content" role="main">
+        <vuestic-breadcrumbs :breadcrumbs="breadcrumbs"/>
+        <vuestic-pre-loader v-show="isLoading" ref="preLoader" class="pre-loader"></vuestic-pre-loader>
+        <router-view v-show="!isLoading"></router-view>
+      </main>
+    </div>
     <div class="made-by-footer">
       ©2018. Made by&nbsp;<a href="http://epicmax.co" target="_blank">Epicmax</a>
     </div>
-    <div class="content-wrap" id="content-wrap">
-        <main id="content" class="content" role="main">
-          <vuestic-breadcrumbs :breadcrumbs="breadcrumbs"/>
-          <vuestic-pre-loader v-show="isLoading" ref="preLoader" class="pre-loader"></vuestic-pre-loader>
-          <router-view v-show="!isLoading"></router-view>
-        </main>
-      </div>
   </div>
 </template>
 
@@ -23,26 +22,22 @@
   import Sidebar from './sidebar/Sidebar'
   import Resize from 'directives/ResizeHandler'
 
-
   export default {
     name: 'layout',
 
     components: {
       Navbar,
       Sidebar
     },
-
     directives: {
       resize: Resize
     },
-
     props: {
       fixed: {
         type: Boolean,
-        default: true,
+        default: false,
       }
     },
-
     computed: {
       ...mapGetters([
         'sidebarOpened',
@@ -70,18 +65,16 @@
   @import "~bootstrap/scss/variables";
 
   .layout {
-
     &-fixed {
       .content-wrap {
         padding-right: $layout-padding-right;
         padding-top: $sidebar-top;
-      }
-      .navbar{
-        position: fixed; top: 0; width: 100%; z-index: 1;
-      }
 
-      .sidebar{
-        position: fixed;
+        @include media-breakpoint-down(md) {
+          padding: $content-mobile-wrap-fixed-layout;
+          margin-left: 0;
+
+        }
       }
     }
   }
@@ -90,7 +83,7 @@
     margin-left: $content-wrap-ml;
     transition: margin-left 0.3s ease;
     padding-right: $layout-padding-right;
-    padding-top: $layout-padding ;
+    padding-top: $layout-padding;
 
     .pre-loader {
       position: absolute;
@@ -113,8 +106,8 @@
     }
   }
 
-
   .made-by-footer {
+    padding-top:60px;
     position: absolute;
     bottom: 0;
     height: calc(#{$layout-padding} + #{$widget-mb});

diff --git a/src/components/layout/navbar/LanguageSelector.vue b/src/components/layout/navbar/LanguageSelector.vue
@@ -88,7 +88,7 @@
       padding: 0;
 
       &:after {
-      display: none;
+        display: none;
       }
     }
 

diff --git a/src/components/layout/navbar/Navbar.vue b/src/components/layout/navbar/Navbar.vue
@@ -18,7 +18,8 @@
       </div>
 
       <div class="col nav-item dropdown navbar-dropdown d-flex align-items-center justify-content-center" v-dropdown>
-        <a class="nav-link dropdown-toggle d-flex align-items-center justify-content" href="#" @click.prevent="closeMenu">
+        <a class="nav-link dropdown-toggle d-flex align-items-center justify-content" href="#"
+           @click.prevent="closeMenu">
           <span class="i-nav-messages notify"></span>
         </a>
         <div class="dropdown-menu">
@@ -36,7 +37,8 @@
         </div>
       </div>
       <div class="col nav-item dropdown navbar-dropdown d-flex align-items-center justify-content-center" v-dropdown>
-        <a class="nav-link dropdown-toggle d-flex align-items-center justify-content" href="#" @click.prevent="closeMenu">
+        <a class="nav-link dropdown-toggle d-flex align-items-center justify-content" href="#"
+           @click.prevent="closeMenu">
           <span class="i-nav-notification notify"></span>
         </a>
         <div class="dropdown-menu">
@@ -58,9 +60,10 @@
       </div>
       <language-selector :options="langs"></language-selector>
       <div class="col nav-item dropdown navbar-dropdown d-flex align-items-center justify-content-center" v-dropdown>
-        <a class="nav-link dropdown-toggle d-flex align-items-center justify-content" href="#" @click.prevent="closeMenu">
+        <a class="nav-link dropdown-toggle d-flex align-items-center justify-content" href="#"
+           @click.prevent="closeMenu">
           <span class="avatar-container">
-            <img src="http://i.imgur.com/nfa5itq.png" />
+            <img src="http://i.imgur.com/nfa5itq.png"/>
           </span>
         </a>
         <div class="dropdown-menu last">
@@ -79,13 +82,16 @@
 </template>
 
 <script>
-  import { mapGetters, mapActions } from 'vuex'
+  import {mapGetters, mapActions} from 'vuex'
   import LanguageSelector from './LanguageSelector'
+
   export default {
     name: 'navbar',
+
     components: {
       LanguageSelector
     },
+
     data () {
       return {
         langs: [
@@ -100,12 +106,14 @@
         ]
       }
     },
+
     computed: {
       ...mapGetters([
         'sidebarOpened',
         'toggleWithoutAnimation'
       ])
     },
+
     methods: {
       ...mapActions([
         'closeMenu',
@@ -121,16 +129,28 @@
   @import "~bootstrap/scss/mixins/breakpoints";
   @import "~bootstrap/scss/functions";
   @import "~bootstrap/scss/variables";
+
+  .navbar {
+    .layout-fixed & {
+      position: fixed;
+      top: 0;
+      width: 100%;
+      z-index: 1;
+    }
+  }
+
   .navbar.app-navbar {
     .navbar-container {
       width: 100%;
       height: 100%;
       margin: 0;
     }
+
     height: $top-nav-height;
     padding-left: $nav-padding-left;
     padding-right: $nav-padding-right;
     background-color: $top-nav-bg;
+
     .avatar-container {
       display: inline-block;
       width: 50px;
@@ -139,33 +159,39 @@
       border-radius: 50%;
       border: 2px solid $lighter-gray;
       overflow: hidden;
+
       img {
         height: 100%;
         width: 100%;
       }
     }
+
     .menu-icon-container {
       padding: 0;
       font-size: $font-size-base;
     }
+
     .navbar-brand-container {
       position: absolute;
       z-index: 3;
       height: 100%;
       left: $navbar-brand-container-left;
       top: 0;
     }
+
     .nav-item {
       padding: 0;
       height: 100%;
     }
+
     .dropdown.navbar-dropdown {
       .dropdown-toggle {
         padding: 0;
         &:after {
           display: none;
         }
       }
+
       &.show {
         @include media-breakpoint-up(lg) {
           .dropdown-menu {
@@ -186,31 +212,39 @@
           border-bottom: 10px solid $darkest-gray;
         }
       }
+
       .dropdown-menu {
         margin-top: $dropdown-show-b;
         padding-top: 0;
         width: 100%;
       }
+
       .dropdown-item {
         height: $navbar-dd-item-height;
         cursor: pointer;
         font-size: $font-size-base;
+
         &:hover, &:active, &:focus, &.active {
           outline: none;
         }
+
         &.plain-link-item {
           color: $brand-primary;
+
           &:hover, &:active, &:focus {
             background: $dropdown-background;
           }
+
           .plain-link {
             text-decoration: none;
           }
         }
       }
     }
+
     .notify {
       position: relative;
+
       &::after {
         content: '';
         position: absolute;
@@ -222,13 +256,16 @@
         border-radius: 50%;
       }
     }
+
     .i-nav-notification.notify::after {
       right: -4px;
       top: 0;
     }
+
     @include media-breakpoint-down(md) {
       height: $top-mobile-nav-height;
       padding: $nav-mobile-pt $nav-mobile-padding-h $nav-mobile-pb $nav-mobile-padding-h;
+
       .navbar-brand-container {
         width: $nav-mobile-brand-width;
         top: $nav-mobile-brand-top;
@@ -240,6 +277,7 @@
           font-size: $font-size-smaller;
         }
       }
+
       .dropdown.navbar-dropdown {
         &.show {
           display: flex;