Merge pull request #198 from cosmos/jordan/181-toolbar-mobile

moved mobile hamburger menu to right side, got rid of fixed toolbar
luniehq · Dec 8, 2017 · ccfa11c · ccfa11c
2 parents 7132186 + 4c3647d
commit ccfa11c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/app/src/renderer/components/common/AppHeader.vue b/app/src/renderer/components/common/AppHeader.vue
@@ -1,17 +1,17 @@
 <template lang='pug'>
 nav#app-header: .container
   template(v-if="!config.desktop")
-    .header-item(v-if="config.activeMenu === 'app'" @click="close")
-      i.material-icons close
-    .header-item(v-else @click="enableMenu('app')"): i.material-icons menu
+    .header-item
 
   router-link.header-item.header-item-logo(to="/")
     img(src="~@/assets/images/cosmos.png")
   app-menu(v-if="config.activeMenu === 'app' || config.desktop")
   // app-menu-user(v-if="config.activeMenu === 'user' || config.desktop")
 
   template(v-if="!config.desktop")
-    .header-item
+    .header-item(v-if="config.activeMenu === 'app'" @click="close")
+      i.material-icons close
+    .header-item(v-else @click="enableMenu('app')"): i.material-icons menu
 </template>
 
 <script>

diff --git a/app/src/renderer/components/common/NiToolBar.vue b/app/src/renderer/components/common/NiToolBar.vue
@@ -97,23 +97,26 @@ export default {
       i
         color dim
 
-@media screen and (max-width: 1023px)
+@media screen and (max-width: 567px)
   .ni-tool-bar
+    z-index 90
     position fixed
     bottom 0
     left 0
     right 0
-    z-index 90
 
   .ni-tool-bar-container
     background app-bg-alpha
     height 3rem + px
     border-top px solid bc
 
-@media screen and (min-width: 1024px)
+@media screen and (min-width: 568px)
   .ni-tool-bar-container
     .main
       justify-content flex-end
+
+@media screen and (min-width: 1024px)
+  .ni-tool-bar-container
     a
       margin-top 0.7rem
 </style>