From debc63514c02314fac1a1df78edffe79fe89f866 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Tue, 28 Nov 2023 01:04:42 +0100
Subject: [PATCH] fix: Make sure empty content is aligned on the center

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 src/Forms.vue         |  11 +--
 src/views/Results.vue | 210 +++++++++++++++++++++---------------------
 src/views/Submit.vue  |  11 +--
 3 files changed, 116 insertions(+), 116 deletions(-)

diff --git a/src/Forms.vue b/src/Forms.vue
index 4c776fd6a..b8eedcce6 100644
--- a/src/Forms.vue
+++ b/src/Forms.vue
@@ -57,7 +57,7 @@
 		<!-- No forms & loading emptycontents -->
 		<NcAppContent v-if="loading || !hasForms || !routeHash || !routeAllowed">
 			<NcEmptyContent v-if="loading"
-				class="emptycontent"
+				class="forms-emptycontent"
 				:name="t('forms', 'Loading forms …')">
 				<template #icon>
 					<NcLoadingIcon :size="64" />
@@ -65,7 +65,7 @@
 			</NcEmptyContent>
 
 			<NcEmptyContent v-else-if="!hasForms"
-				class="emptycontent"
+				class="forms-emptycontent"
 				:name="t('forms', 'No forms created yet')">
 				<template #icon>
 					<FormsIcon :size="64" />
@@ -78,7 +78,7 @@
 			</NcEmptyContent>
 
 			<NcEmptyContent v-else
-				class="emptycontent"
+				class="forms-emptycontent"
 				:name="canCreateForms ? t('forms', 'Select a form or create a new one') : t('forms', 'Please select a form')">
 				<template #icon>
 					<FormsIcon :size="64" />
@@ -382,9 +382,8 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.emptycontent {
-	display: flex;
+<style scoped lang="scss">
+.forms-emptycontent {
 	height: 100%;
 }
 </style>
diff --git a/src/views/Results.vue b/src/views/Results.vue
index 9d8922e8a..de7df5dd7 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -23,113 +23,116 @@
   -->
 
 <template>
-	<NcAppContent v-if="loadingResults">
-		<NcEmptyContent class="emptycontent"
-			:name="t('forms', 'Loading responses …')">
-			<template #icon>
-				<NcLoadingIcon :size="64" />
-			</template>
-		</NcEmptyContent>
-	</NcAppContent>
-
-	<NcAppContent v-else>
+	<NcAppContent>
 		<TopBar :permissions="form?.permissions"
 			:sidebar-opened="sidebarOpened"
 			@update:sidebarOpened="onSidebarChange"
 			@share-form="onShareForm" />
-		<header v-if="!noSubmissions">
-			<h2 dir="auto">
-				{{ formTitle }}
-			</h2>
-			<p>{{ t('forms', '{amount} responses', { amount: form.submissions.length }) }}</p>
-
-			<!-- View switcher between Summary and Responses -->
-			<div class="response-actions">
-				<div class="response-actions__radio">
-					<input id="show-summary--true"
-						v-model="showSummary"
-						type="radio"
-						:value="true"
-						class="hidden">
-					<label for="show-summary--true"
-						class="response-actions__radio__item"
-						:class="{ 'response-actions__radio__item--active': showSummary }">
-						{{ t('forms', 'Summary') }}
-					</label>
-					<input id="show-summary--false"
-						v-model="showSummary"
-						type="radio"
-						:value="false"
-						class="hidden">
-					<label for="show-summary--false"
-						class="response-actions__radio__item"
-						:class="{ 'response-actions__radio__item--active': !showSummary }">
-						{{ t('forms', 'Responses') }}
-					</label>
-				</div>
 
-				<!-- Action menu for CSV export and deletion -->
-				<NcActions class="results-menu"
-					:aria-label="t('forms', 'Options')"
-					:force-menu="true">
-					<NcActionButton :close-after-click="true" @click="onStoreToFiles">
-						<template #icon>
-							<IconFolder :size="20" />
-						</template>
-						{{ t('forms', 'Save CSV to Files') }}
-					</NcActionButton>
-					<NcActionButton @click="onDownloadCsv">
-						<template #icon>
-							<IconDownload :size="20" />
-						</template>
-						{{ t('forms', 'Download CSV') }}
-					</NcActionButton>
-					<NcActionButton v-if="canDeleteSubmissions" @click="deleteAllSubmissions">
-						<template #icon>
-							<IconDelete :size="20" />
-						</template>
-						{{ t('forms', 'Delete all responses') }}
-					</NcActionButton>
-				</NcActions>
-			</div>
-		</header>
+		<!-- Loading submissions -->
+		<NcEmptyContent v-if="loadingResults"
+			class="forms-emptycontent"
+			:name="t('forms', 'Loading responses …')">
+			<template #icon>
+				<NcLoadingIcon :size="64" />
+			</template>
+		</NcEmptyContent>
 
 		<!-- No submissions -->
-		<section v-if="noSubmissions">
-			<NcEmptyContent :name="t('forms', 'No responses yet')"
-				class="emptycontent"
-				:description="t('forms', 'Results of submitted forms will show up here')">
-				<template #icon>
-					<IconPoll :size="64" />
-				</template>
-				<template #action>
-					<NcButton type="primary" @click="onShareForm">
-						<template #icon>
-							<IconShareVariant :size="20" decorative />
-						</template>
-						{{ t('forms', 'Share form') }}
-					</NcButton>
-				</template>
-			</NcEmptyContent>
-		</section>
-
-		<!-- Summary view for visualization -->
-		<section v-if="!noSubmissions && showSummary">
-			<ResultsSummary v-for="question in form.questions"
-				:key="question.id"
-				:question="question"
-				:submissions="form.submissions" />
-		</section>
-
-		<!-- Responses view for individual responses -->
-		<section v-if="!noSubmissions && !showSummary">
-			<Submission v-for="submission in form.submissions"
-				:key="submission.id"
-				:submission="submission"
-				:questions="form.questions"
-				:can-delete-submission="canDeleteSubmissions"
-				@delete="deleteSubmission(submission.id)" />
-		</section>
+		<NcEmptyContent v-else-if="noSubmissions"
+			:name="t('forms', 'No responses yet')"
+			class="forms-emptycontent"
+			:description="t('forms', 'Results of submitted forms will show up here')">
+			<template #icon>
+				<IconPoll :size="64" />
+			</template>
+			<template #action>
+				<NcButton type="primary" @click="onShareForm">
+					<template #icon>
+						<IconShareVariant :size="20" decorative />
+					</template>
+					{{ t('forms', 'Share form') }}
+				</NcButton>
+			</template>
+		</NcEmptyContent>
+
+		<!-- Showing submissions -->
+		<template v-else>
+			<header>
+				<h2 dir="auto">
+					{{ formTitle }}
+				</h2>
+				<p>{{ t('forms', '{amount} responses', { amount: form.submissions.length }) }}</p>
+
+				<!-- View switcher between Summary and Responses -->
+				<div class="response-actions">
+					<div class="response-actions__radio">
+						<input id="show-summary--true"
+							v-model="showSummary"
+							type="radio"
+							:value="true"
+							class="hidden">
+						<label for="show-summary--true"
+							class="response-actions__radio__item"
+							:class="{ 'response-actions__radio__item--active': showSummary }">
+							{{ t('forms', 'Summary') }}
+						</label>
+						<input id="show-summary--false"
+							v-model="showSummary"
+							type="radio"
+							:value="false"
+							class="hidden">
+						<label for="show-summary--false"
+							class="response-actions__radio__item"
+							:class="{ 'response-actions__radio__item--active': !showSummary }">
+							{{ t('forms', 'Responses') }}
+						</label>
+					</div>
+
+					<!-- Action menu for CSV export and deletion -->
+					<NcActions class="results-menu"
+						:aria-label="t('forms', 'Options')"
+						:force-menu="true">
+						<NcActionButton :close-after-click="true" @click="onStoreToFiles">
+							<template #icon>
+								<IconFolder :size="20" />
+							</template>
+							{{ t('forms', 'Save CSV to Files') }}
+						</NcActionButton>
+						<NcActionButton @click="onDownloadCsv">
+							<template #icon>
+								<IconDownload :size="20" />
+							</template>
+							{{ t('forms', 'Download CSV') }}
+						</NcActionButton>
+						<NcActionButton v-if="canDeleteSubmissions" @click="deleteAllSubmissions">
+							<template #icon>
+								<IconDelete :size="20" />
+							</template>
+							{{ t('forms', 'Delete all responses') }}
+						</NcActionButton>
+					</NcActions>
+				</div>
+			</header>
+
+			<!-- Summary view for visualization -->
+			<section v-if="showSummary">
+				<ResultsSummary v-for="question in form.questions"
+					:key="question.id"
+					:question="question"
+					:submissions="form.submissions" />
+			</section>
+
+			<!-- Responses view for individual responses -->
+			<section v-else>
+				<Submission v-for="submission in form.submissions"
+					:key="submission.id"
+					:submission="submission"
+					:questions="form.questions"
+					:can-delete-submission="canDeleteSubmissions"
+					@delete="deleteSubmission(submission.id)" />
+			</section>
+		</template>
 	</NcAppContent>
 </template>
 
@@ -138,14 +141,14 @@ import { generateOcsUrl } from '@nextcloud/router'
 import { getRequestToken } from '@nextcloud/auth'
 import { getFilePickerBuilder, showError, showSuccess } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
+import axios from '@nextcloud/axios'
+import moment from '@nextcloud/moment'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import axios from '@nextcloud/axios'
-import moment from '@nextcloud/moment'
 
 import IconDelete from 'vue-material-design-icons/Delete.vue'
 import IconDownload from 'vue-material-design-icons/Download.vue'
@@ -328,8 +331,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.emptycontent {
-	display: flex;
+.forms-emptycontent {
 	height: 100%;
 }
 
diff --git a/src/views/Submit.vue b/src/views/Submit.vue
index 34419f6a4..ddd8e178f 100644
--- a/src/views/Submit.vue
+++ b/src/views/Submit.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<NcAppContent v-if="isLoadingForm">
-		<NcEmptyContent class="emptycontent"
+		<NcEmptyContent class="forms-emptycontent"
 			:name="t('forms', 'Loading {title} …', { title: form.title })">
 			<template #icon>
 				<NcLoadingIcon :size="64" />
@@ -59,14 +59,14 @@
 		</header>
 
 		<NcEmptyContent v-if="loading"
-			class="emptycontent"
+			class="forms-emptycontent"
 			:name="t('forms', 'Submitting form …')">
 			<template #icon>
 				<NcLoadingIcon :size="64" />
 			</template>
 		</NcEmptyContent>
 		<NcEmptyContent v-else-if="success || !form.canSubmit"
-			class="emptycontent"
+			class="forms-emptycontent"
 			:name="t('forms', 'Thank you for completing the form!')"
 			:description="form.submissionMessage">
 			<template #icon>
@@ -78,7 +78,7 @@
 			</template>
 		</NcEmptyContent>
 		<NcEmptyContent v-else-if="isExpired"
-			class="emptycontent"
+			class="forms-emptycontent"
 			:name="t('forms', 'Form expired')"
 			:description="t('forms', 'This form has expired and is no longer taking answers')">
 			<template #icon>
@@ -459,8 +459,7 @@ export default {
 <style lang="scss" scoped>
 @import '../scssmixins/markdownOutput';
 
-.emptycontent {
-	display: flex;
+.forms-emptycontent {
 	height: 100%;
 }
 .app-content {