Merge pull request #380 from nextcloud/fix/mobile_nav

Close navigation on mobile on new form

src/Forms.vue

@@ -28,6 +28,7 @@
 			<AppNavigationForm v-for="form in forms"
 				:key="form.id"
 				:form="form"
+				@mobile-close-navigation="mobileCloseNavigation"
 				@delete="onDeleteForm" />
 		</AppNavigation>
 
@@ -66,6 +67,7 @@
 </template>
 
 <script>
+import { emit } from '@nextcloud/event-bus'
 import { showError } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
@@ -74,6 +76,7 @@ import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
 import AppNavigationNew from '@nextcloud/vue/dist/Components/AppNavigationNew'
 import Content from '@nextcloud/vue/dist/Components/Content'
+import isMobile from '@nextcloud/vue/src/mixins/isMobile'
 
 import AppNavigationForm from './components/AppNavigationForm'
 import EmptyContent from './components/EmptyContent'
@@ -90,6 +93,8 @@ export default {
 		EmptyContent,
 	},
 
+	mixins: [isMobile],
+
 	data() {
 		return {
 			loading: true,
@@ -124,6 +129,15 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Closes the App-Navigation on mobile-devices
+		 */
+		mobileCloseNavigation() {
+			if (this.isMobile) {
+				emit('toggle-navigation', { open: false })
+			}
+		},
+
 		/**
 		 * Initial forms load
 		 */
@@ -150,6 +164,7 @@ export default {
 				const newForm = response.data
 				this.forms.unshift(newForm)
 				this.$router.push({ name: 'edit', params: { hash: newForm.hash } })
+				this.mobileCloseNavigation()
 			} catch (error) {
 				showError(t('forms', 'Unable to create a new form'))
 				console.error(error)

src/components/AppNavigationForm.vue

@@ -26,7 +26,8 @@
 		:exact="true"
 		:icon="icon"
 		:title="formTitle"
-		:to="{ name: 'edit', params: { hash: form.hash } }">
+		:to="{ name: 'edit', params: { hash: form.hash } }"
+		@click="mobileCloseNavigation">
 		<template v-if="!loading" #actions>
 			<ActionLink
 				:href="formLink"
@@ -38,7 +39,8 @@
 			<ActionRouter :close-after-click="true"
 				:exact="true"
 				icon="icon-comment"
-				:to="{ name: 'results', params: { hash: form.hash } }">
+				:to="{ name: 'results', params: { hash: form.hash } }"
+				@click="mobileCloseNavigation">
 				{{ t('forms', 'Responses') }}
 			</ActionRouter>
 			<!-- <ActionRouter :close-after-click="true"
@@ -158,6 +160,13 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Closes the App-Navigation on mobile-devices
+		 */
+		mobileCloseNavigation() {
+			this.$emit('mobile-close-navigation')
+		},
+
 		async onDeleteForm() {
 			if (!confirm(t('forms', 'Are you sure you want to delete {title}?', { title: this.formTitle }))) {
 				return

src/components/EmptyContent.vue

@@ -54,6 +54,7 @@ export default {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+	text-align: center;
 
 	&__icon {
 		width: 64px;