fix: #217 [ios] Insufficient margin in the Drawer header.

quasarframework · Dec 17, 2016 · d947e39 · d947e39
1 parent 8b10a1d
commit d947e39
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 35 deletions.
diff --git a/src/vue-components/layout/Layout.vue b/src/vue-components/layout/Layout.vue
@@ -2,28 +2,20 @@
   <div class="layout">
     <div class="layout-header">
       <slot name="header"></slot>
-      <slot v-if="!ios" name="navigation"></slot>
+      <slot v-if="$quasar.theme !== 'ios'" name="navigation"></slot>
     </div>
 
     <div class="layout-content">
       <slot></slot>
     </div>
 
     <div class="layout-footer">
-      <slot v-if="ios" name="navigation"></slot>
       <slot name="footer"></slot>
+      <slot v-if="$quasar.theme === 'ios'" name="navigation"></slot>
     </div>
   </div>
 </template>
 
 <script>
-import { current as theme } from '../../features/theme'
-
-export default {
-  data () {
-    return {
-      ios: theme === 'ios'
-    }
-  }
-}
+export default {}
 </script>
diff --git a/src/vue-components/layout/layout.ios.styl b/src/vue-components/layout/layout.ios.styl
@@ -1,4 +1,3 @@
-$layout-navbar-order       ?= 9
 $layout-border             ?= 1px solid $toolbar-faded-color
 $layout-toolbar-min-height ?= 50px
 $toolbar-title-font-size   ?= 1.2rem
@@ -14,21 +13,13 @@ $toolbar-title-font-size   ?= 1.2rem
   display flex
   flex-direction column
 
-  > .q-tabs
-    z-index $z-marginals
-    order $layout-navbar-order
-    border-top $layout-border
-    border-radius 0 !important
-
-.layout-header
-  order -10
-  .toolbar
-    border-bottom $layout-border
+.layout-header > .toolbar
+  border-bottom $layout-border
+  &:first-child
+    align-items end
 
-.layout-footer
-  order 10
-  .toolbar
-    border-top $layout-border
+.layout-footer > .toolbar
+  border-top $layout-border
 
 body.desktop
   .layout-header, .layout-footer
@@ -50,8 +41,6 @@ body.desktop
 .layout-header, .layout-footer
   color $toolbar-color
   background $toolbar-background
-
-.layout-header, .layout-footer
   z-index $z-marginals
 
 .toolbar
@@ -145,6 +134,11 @@ body.desktop
     > div
       text-align right
 
+body.cordova .layout-header > .toolbar:first-child
+  padding-top 20px
+  .toolbar-title
+    padding-top 20px
+
 .layout-padding
   @media only screen and (max-width $layout-small-max)
     padding 1.5rem .5rem

diff --git a/src/vue-components/layout/layout.mat.styl b/src/vue-components/layout/layout.mat.styl
@@ -1,4 +1,3 @@
-$layout-navbar-order       ?= -9
 $layout-toolbar-min-height ?= 56px
 $layout-header-shadow      ?= $shadow-2
 $layout-footer-shadow      ?= $shadow-up-2
@@ -16,16 +15,12 @@ $toolbar-title-font-size   ?= 1.25rem
   flex-direction column
 
   > .q-tabs
-    z-index $z-marginals
-    order $layout-navbar-order
     border-radius 0 !important
 
 .layout-header
-  order -10
   box-shadow $layout-header-shadow
 
 .layout-footer
-  order 10
   box-shadow $layout-footer-shadow
 
 body.desktop
@@ -48,8 +43,6 @@ body.desktop
 .layout-header, .layout-footer
   color $toolbar-color
   background $toolbar-background
-
-.layout-header, .layout-footer
   z-index $z-marginals
 
 .toolbar