Vue 3: fix unwanted scrollbars on narrow viewports

Author: MetRonnie

src/components/cylc/Toolbar.vue

@@ -23,38 +23,39 @@ component. Note: this is not used for the workflow view, see
 <template>
   <v-toolbar
     id="core-app-bar"
-    density="compact"
+    absolute
+    :height="toolbarHeight"
     flat
     class="c-toolbar"
-    v-if="showNavBtn"
   >
-    <v-toolbar-title
-      class="tertiary--text"
+    <!-- TODO: duplicated in workflow/Toolbar.vue and cylc/Toolbar.vue -->
+    <!-- burger button for mobile -->
+    <v-btn
+      icon
+      @click.stop="toggleDrawer"
+      id="toggle-drawer"
     >
-      <!-- TODO: duplicated in workflow/Toolbar.vue and cylc/Toolbar.vue -->
-      <!-- burger button for mobile -->
-      <v-btn
-        icon
-        @click.stop="onClickBtn"
-        class="default v-btn--simple"
-        id="toggle-drawer"
-      >
-        <v-icon>{{ svgPaths.list }}</v-icon>
-      </v-btn>
-      <!-- title -->
-      <span class="c-toolbar-title">{{ title }}</span>
+      <v-icon>{{ svgPaths.list }}</v-icon>
+    </v-btn>
+    <v-toolbar-title>
+      {{ title }}
     </v-toolbar-title>
   </v-toolbar>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import toolbar from '@/mixins/toolbar'
+import { useToolbar, toolbarHeight } from '@/utils/toolbar'
 import {
   mdiViewList
 } from '@mdi/js'
 
 export default {
+  setup () {
+    const { toggleDrawer } = useToolbar()
+    return { toggleDrawer, toolbarHeight }
+  },
+
   mixins: [
     toolbar
   ],

src/components/cylc/workflow/Toolbar.vue

@@ -15,12 +15,12 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<!-- Toolbar for the workflow view -->
+<!-- Toolbar for the workspace view -->
 
 <template>
   <v-toolbar
     id="core-app-bar"
-    density="compact"
+    :height="toolbarHeight"
     flat
     class="c-toolbar"
     color="grey-lighten-4"
@@ -30,8 +30,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <v-btn
       v-if="showNavBtn"
       icon
-      @click.stop="onClickBtn"
-      class="default v-btn--simple"
+      @click.stop="toggleDrawer"
       id="toggle-drawer"
     >
       <v-icon>{{ svgPaths.list }}</v-icon>
@@ -148,19 +147,22 @@ import {
   mdiViewList
 } from '@mdi/js'
 import { startCase } from 'lodash'
-import toolbar from '@/mixins/toolbar'
+import { useToolbar, toolbarHeight } from '@/utils/toolbar'
 import WorkflowState from '@/model/WorkflowState.model'
 import graphql from '@/mixins/graphql'
-
 import {
   mutationStatus
 } from '@/utils/aotf'
 
 export default {
   name: 'Toolbar',
 
+  setup () {
+    const { showNavBtn, toggleDrawer } = useToolbar()
+    return { showNavBtn, toggleDrawer, toolbarHeight }
+  },
+
   mixins: [
-    toolbar,
     graphql
   ],
 

src/layouts/Default.vue

@@ -18,13 +18,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div>
     <ConnectionStatus :is-offline="offline" />
-    <toolbar v-if="!workflowViews.includes($route.name)" />
-    <drawer v-if="showSidebar" />
+    <Toolbar v-if="showToolbar" />
+    <Drawer v-if="showSidebar" />
     <CylcObjectMenu/>
 
     <v-main>
       <alert />
-      <div id="core-view" class="h-screen overflow-auto">
+      <div
+        id="core-view"
+        class="overflow-auto"
+        :style="coreViewStyle"
+      >
         <v-fade-transition mode="out-in">
           <slot/>
         </v-fade-transition>
@@ -34,18 +38,54 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 import { mapState } from 'vuex'
 import { store } from '@/store/index'
 import AlertModel from '@/model/Alert.model'
 import Alert from '@/components/core/Alert.vue'
 import Drawer from '@/components/cylc/Drawer.vue'
 import Toolbar from '@/components/cylc/Toolbar.vue'
+import { useNavBtn, toolbarHeight } from '@/utils/toolbar'
 import ConnectionStatus from '@/components/cylc/ConnectionStatus.vue'
 import CylcObjectMenu from '@/components/cylc/cylcObject/Menu.vue'
 
 export default {
   name: 'Default',
 
+  setup () {
+    const route = useRoute()
+    /**
+     * Views that display workflows. For these views, we do not
+     * want to display the default Toolbar—the Workflow view
+     * has its own Toolbar that communicates with the Workflow
+     * component (e.g. the Workflow Toolbar owns a button that
+     * triggers the action to add a new Tree or Table View, so the events
+     * are passed down from the parent Workflow View).
+     */
+    const workflowViews = [
+      'workspace',
+      'tree',
+      'table',
+      'graph',
+    ]
+    const { showNavBtn } = useNavBtn()
+
+    /** Whether to show app toolbar (not the workspace view toolbar). */
+    const showToolbar = computed(
+      () => showNavBtn.value && !workflowViews.includes(route.name)
+    )
+    const coreViewStyle = computed(() => ({
+      marginTop: showToolbar.value ? `${toolbarHeight}px` : 0,
+      height: showToolbar.value ? `calc(100vh - ${toolbarHeight}px)` : '100vh',
+    }))
+
+    return {
+      showToolbar,
+      coreViewStyle,
+    }
+  },
+
   components: {
     ConnectionStatus,
     CylcObjectMenu,
@@ -62,25 +102,6 @@ export default {
     }
   },
 
-  data () {
-    return {
-      /**
-       * Views that display workflows. For these views, we do not
-       * want to display the default Toolbar—the Workflow view
-       * has its own Toolbar that communicates with the Workflow
-       * component (e.g. the Workflow Toolbar owns a button that
-       * triggers the action to add a new Tree or Table View, so the events
-       * are passed down from the parent Workflow View).
-       */
-      workflowViews: [
-        'workspace',
-        'tree',
-        'table',
-        'graph'
-      ]
-    }
-  },
-
   computed: {
     ...mapState(['offline'])
   },

src/mixins/toolbar.js

@@ -21,7 +21,6 @@
 .workflow-panel {
   .main {
     display: flex;
-    min-height: calc(100vh - 48px);
     .content {
       min-width: 300px;
       min-height: 300px;

src/styles/cylc/_workflow.scss

@@ -51,12 +51,8 @@ html {
   }
 }
 
-// The following two entries are used to set the height of the content view (core-view), under the
-// toolbar, to the maximum. And the skeleton needs to maintain the height 100% otherwise its children
+// The skeleton loader needs to maintain the height 100% otherwise its children
 // nodes with height: 100% or auto won't be displayed at all.
-#core-view {
-  height: calc(100vh - 48px);
-}
 .v-skeleton-loader {
   height: 100%;
 }

src/styles/index.scss

@@ -0,0 +1,60 @@
+/**
+ * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { computed, onMounted } from 'vue'
+import { useDisplay } from 'vuetify'
+import { useStore } from 'vuex'
+
+/** Height in px */
+export const toolbarHeight = 48
+
+/**
+ * Composable that returns a computed property for whether we should show
+ * the hamburger nav drawer button.
+ */
+export function useNavBtn () {
+  const { mobile } = useDisplay()
+  const store = useStore()
+  return {
+    showNavBtn: computed(() => mobile.value || !store.state.app.drawer),
+  }
+}
+
+/**
+ * Composable that replaces the old toolbar mixin.
+ *
+ * Main responsibility is to add responsive toggle
+ * to a Toolbar component. Shared between (at least) the Cylc
+ * UI default Toolbar, and the Workflow view Toolbar.
+ */
+export function useToolbar () {
+  const store = useStore()
+  const { showNavBtn } = useNavBtn()
+
+  onMounted(() => {
+    store.commit('app/setDrawer', !showNavBtn.value)
+  })
+
+  const toggleDrawer = () => {
+    store.commit('app/setDrawer', !store.state.app.drawer)
+  }
+
+  return {
+    showNavBtn,
+    toggleDrawer,
+  }
+}

src/utils/toolbar.js

@@ -20,10 +20,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <Toolbar
       :views="$options.allViews"
       :workflow-name="workflowName"
-      @add="this.addView"
-      :initialOptions="{}"
+      @add="addView"
     />
-    <div class="workflow-panel">
+    <div
+      class="workflow-panel"
+      :style="$options.panelStyle"
+    >
       <Lumino
         ref="lumino"
         @lumino:deleted="onWidgetDeletedEvent"
@@ -52,6 +54,7 @@ import subscriptionMixin from '@/mixins/subscription'
 import ViewState from '@/model/ViewState.model'
 import Lumino from '@/components/cylc/workflow/Lumino.vue'
 import Toolbar from '@/components/cylc/workflow/Toolbar.vue'
+import { toolbarHeight } from '@/utils/toolbar'
 
 // Use dynamic async components for lazy loading:
 const TreeView = defineAsyncComponent(() => import('@/views/Tree.vue'))
@@ -195,5 +198,9 @@ export default {
    * @type {Object[]}
    */
   allViews,
+
+  panelStyle: {
+    height: `calc(100vh - ${toolbarHeight}px)`,
+  },
 }
 </script>