adding layout and layout fixing classes

feedju · Apr 11, 2018 · a6489a1 · a6489a1
1 parent 1010e6a
commit a6489a1
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 42 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/layout/Layout.vue b/src/components/layout/Layout.vue
@@ -1,19 +1,19 @@
 <template>
-  <div :class="classObject" v-resize>
+  <div class="layout" :class="classObject"  v-resize>
+    <div class="layout layout-fixed"></div>
     <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 +24,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 +52,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,11 +70,20 @@
   @import "~bootstrap/scss/functions";
   @import "~bootstrap/scss/variables";
 
+
+  .layout {
+    &-fixed {
+      .content-wrap {
+        padding-top: $sidebar-top;
+      }
+    }
+  }
+
+
+
   .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-top: 0;
 
     .pre-loader {
       position: absolute;
@@ -85,6 +105,7 @@
     }
   }
 
+
   .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
@@ -162,7 +162,7 @@
 
     .navbar-brand-container {
       position: absolute;
-      z-index: 3;
+      z-index: 1;
       height: 100%;
       left: $navbar-brand-container-left;
       top: 0;
@@ -177,8 +177,8 @@
       .dropdown-toggle {
         padding: 0;
         &:after {
-           display: none;
-         }
+          display: none;
+        }
       }
 
       &.show {
@@ -189,17 +189,17 @@
           }
         }
         &: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 {
@@ -273,7 +273,7 @@
           display: flex;
           &:after {
             bottom: -$dropdown-mobile-show-b;
-            z-index: 2;
+            z-index: 1;
           }
           .dropdown-menu {
             margin-top: $dropdown-mobile-show-b;

diff --git a/src/components/layout/sidebar/Sidebar.vue b/src/components/layout/sidebar/Sidebar.vue
@@ -170,7 +170,6 @@
       right: $sidebar-arrow-right;
       top: calc(50% - #{$font-size-root}/2);
       font-weight: bold;
-      transition: transform 0.3s ease;
     }
 
     &.expanded {

diff --git a/src/sass/_base.scss b/src/sass/_base.scss
@@ -1,11 +1,12 @@
 html {
   min-height: 100%;
 }
+
 body {
+
   height: 100%;
   min-height: 100vh;
   position: relative;
-  padding-top: $sidebar-top;
 }
 
 //Util classes

diff --git a/src/sass/_material-forms.scss b/src/sass/_material-forms.scss
@@ -218,7 +218,7 @@ fieldset {
     text-overflow: ellipsis;
     pointer-events: none;
     padding-left: $mf-spacer;
-    z-index: 1;
+    z-index: 3;
     color: $mf-label-color;
     font-size: $mf-font-size;
     font-weight: normal;

diff --git a/src/vuestic-theme/vuestic-components/vuestic-widget/VuesticWidget.vue b/src/vuestic-theme/vuestic-components/vuestic-widget/VuesticWidget.vue
@@ -1,12 +1,3 @@
-<template>
-  <div class="widget" :class="{'no-header': !headerText}">
-    <div class="widget-header" v-if="headerText">{{headerText}}</div>
-    <div class="widget-body">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
 <script>
   export default {
     name: 'vuestic-widget',
@@ -90,3 +81,12 @@
     }
   }
 </style>
+
+<template>
+  <div class="widget" :class="{'no-header': !headerText}">
+    <div class="widget-header" v-if="headerText">{{headerText}}</div>
+    <div class="widget-body">
+      <slot></slot>
+    </div>
+  </div>
+</template>