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

First task
feedju · Apr 15, 2018 · aa3e982 · aa3e982
2 parents b6c0eba + 5d24009
commit aa3e982
Show file tree

Hide file tree

Showing 10 changed files with 179 additions and 194 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app" class="app">
-    <auth-layout v-if="isAuth"></auth-layout>
-    <layout v-else></layout>
+    <layout v-if="!isAuth"></layout>
+    <auth-layout v-else></auth-layout>
   </div>
 </template>
 

diff --git a/src/components/dashboard/Dashboard.vue b/src/components/dashboard/Dashboard.vue
@@ -62,5 +62,7 @@
 </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,19 +1,18 @@
 <template>
-  <div :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>
 
@@ -24,16 +23,26 @@
   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,
+      }
+    },
+
     computed: {
       ...mapGetters([
         'sidebarOpened',
@@ -42,13 +51,14 @@
       ]),
       classObject: function () {
         return {
+          'layout-fixed': this.fixed,
           'sidebar-hidden': !this.toggleWithoutAnimation && !this.sidebarOpened,
           'sidebar-hidden sidebar-hidden_without-animation': this.toggleWithoutAnimation && !this.sidebarOpened
         }
       },
       breadcrumbs () {
         return this.$store.getters.breadcrumbs(this.$route.name)
-      }
+      },
     }
   }
 </script>
@@ -59,10 +69,28 @@
   @import "~bootstrap/scss/functions";
   @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;
+      }
+    }
+  }
+
   .content-wrap {
     margin-left: $content-wrap-ml;
-    padding: $content-wrap-pt $content-wrap-pr $content-wrap-pb 0;
     transition: margin-left 0.3s ease;
+    padding-right: $layout-padding-right;
+    padding-top: $layout-padding ;
 
     .pre-loader {
       position: absolute;
@@ -80,10 +108,12 @@
 
       .sidebar-hidden & {
         margin-left: 0;
+        padding-top: $content-mobile-wrap-sb-top;
       }
     }
   }
 
+
   .made-by-footer {
     position: absolute;
     bottom: 0;

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
@@ -14,7 +14,7 @@
       </div>
 
       <div class="navbar-text offset-md-1 col-md-7 d-none d-lg-flex align-items-center justify-content-center">
-       {{'navbar.messageUs' | translate}}&nbsp;<a href="mailto:[email protected]">[email protected]</a>
+        {{'navbar.messageUs' | translate}}&nbsp;<a href="mailto:[email protected]">[email protected]</a>
       </div>
 
       <div class="col nav-item dropdown navbar-dropdown d-flex align-items-center justify-content-center" v-dropdown>
@@ -81,14 +81,11 @@
 <script>
   import { mapGetters, mapActions } from 'vuex'
   import LanguageSelector from './LanguageSelector'
-
   export default {
     name: 'navbar',
-
     components: {
       LanguageSelector
     },
-
     data () {
       return {
         langs: [
@@ -103,14 +100,12 @@
         ]
       }
     },
-
     computed: {
       ...mapGetters([
         'sidebarOpened',
         'toggleWithoutAnimation'
       ])
     },
-
     methods: {
       ...mapActions([
         'closeMenu',
@@ -126,19 +121,16 @@
   @import "~bootstrap/scss/mixins/breakpoints";
   @import "~bootstrap/scss/functions";
   @import "~bootstrap/scss/variables";
-
   .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;
@@ -147,39 +139,33 @@
       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;
-         }
+          display: none;
+        }
       }
-
       &.show {
         @include media-breakpoint-up(lg) {
           .dropdown-menu {
@@ -188,73 +174,61 @@
           }
         }
         &:after {
-           position: absolute;
-           bottom: -$dropdown-show-b;
-           right: calc(50% - 10px);
-           width: 0;
-           height: 0;
-           display: block;
-           content: '';
-           border-left: 10px solid transparent;
-           border-right: 10px solid transparent;
-           border-bottom: 10px solid $darkest-gray;
-         }
+          position: absolute;
+          bottom: -$dropdown-show-b;
+          right: calc(50% - 10px);
+          width: 0;
+          height: 0;
+          display: block;
+          content: '';
+          border-left: 10px solid transparent;
+          border-right: 10px solid transparent;
+          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;
-         right: -6px;
-         top: -6px;
-         background-color: $brand-primary;
-         height: 12px;
-         width: 12px;
-         border-radius: 50%;
-       }
+        content: '';
+        position: absolute;
+        right: -6px;
+        top: -6px;
+        background-color: $brand-primary;
+        height: 12px;
+        width: 12px;
+        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;
@@ -266,7 +240,6 @@
           font-size: $font-size-smaller;
         }
       }
-
       .dropdown.navbar-dropdown {
         &.show {
           display: flex;