new navigation for mobile view - mosys (#227)

partials/GridDisplay.vue

@@ -7,14 +7,20 @@
         .cell-item(:style="getAnnotationStyle(annotation)")
             cell(:annotation="annotation", display="display")
 
-      q-page-sticky(position="top-right", :offset="[18, 18]", v-if="$store.state.auth.user")
-        q-btn(round, color="primary", small, @click="$router.push(`/mosys/grids/${$route.params.uuid}/annotate`)")
-          q-icon(name="edit")
+      template(v-if="!isMobile")
+        q-page-sticky(position="top-right", :offset="[18, 18]", v-if="$store.state.auth.user")
+          q-btn(round, color="primary", small, @click="$router.push(`/mosys/grids/${$route.params.uuid}/annotate`)")
+            q-icon(name="edit")
+      template(v-if="isMobile")
+        .fixed-top-right.q-mt-sm.q-mr-md(v-if="$store.state.auth.user", style="z-index: 1000000000; padding-top: 3px;")
+          q-btn(round, color="primary", size="sm", @click="$router.push(`/mosys/grids/${$route.params.uuid}/annotate`)")
+            q-icon(name="edit")
     style-tag(v-if="styles || stylesheetUrl", :styles="styles", :url="stylesheetUrl")
 
 </template>
 
 <script>
+  import { mapGetters } from 'vuex'
   import Cell from './Cell'
   import StyleTag from '../../shared/elements/StyleTag'
   import { DateTime } from 'luxon'
@@ -36,6 +42,9 @@
       }
     },
     computed: {
+      ...mapGetters({
+        isMobile: 'globalSettings/getIsMobile'
+      }),
       queryPositionX () {
         if (this.$route.query.x) return parseInt(this.$route.query.x)
         else return null
@@ -57,6 +66,7 @@
     },
     async mounted () {
       await this.loadGrid(this.$route.params.uuid)
+      this.$root.$emit('setBackButton', '/mosys/grids')
     },
     methods: {
       onScroll () {

partials/GridEditor.vue

@@ -63,11 +63,18 @@
             @dragexit="event => {handleGridResizerDragEnd(event)}")
               q-icon(name="network cell")
 
-      div.fixed-top-right(style="right:18px; top:68px", v-if="!$store.state.mosys.showSources")
-        q-btn(round, color="primary", small, @click="handleGridButtonClickEdit", style="margin-right: 0.5em")
-          q-icon(name="add")
-        q-btn(round, color="primary", small, @click="$router.push(`/mosys/grids/${$route.params.uuid}`)")
-          q-icon(name="remove red eye")
+      template(v-if="!isMobile")
+        .fixed-top-right(style="right:18px; top:68px", v-if="!$store.state.mosys.showSources")
+          q-btn(round, color="primary", small, @click="handleGridButtonClickEdit", style="margin-right: 0.5em")
+            q-icon(name="add")
+          q-btn(round, color="primary", small, @click="$router.push(`/mosys/grids/${$route.params.uuid}`)")
+            q-icon(name="remove red eye")
+      template(v-if="isMobile")
+        .fixed-top-right.q-mt-sm(v-if="!$store.state.mosys.showSources", style="z-index: 10000; padding-top: 3px;")
+          q-btn.q-mr-sm(round, color="primary", size="sm", @click="handleGridButtonClickEdit")
+            q-icon(name="add")
+          q-btn.q-mr-md(round, color="primary", size="sm", @click="$router.push(`/mosys/grids/${$route.params.uuid}`)")
+            q-icon(name="remove red eye")
 
 </template>
 
@@ -119,7 +126,8 @@
     },
     computed: {
       ...mapGetters({
-        user: 'auth/getUserState'
+        user: 'auth/getUserState',
+        isMobile: 'globalSettings/getIsMobile'
       }),
       cellContextMenuActions () {
         const actions = {
@@ -163,6 +171,7 @@
     },
     async mounted () {
       await this.fetchData()
+      this.$root.$emit('setBackButton', '/mosys/grids')
     },
     watch: {
       annotations () {