adjust css for NcEmptyContent

Signed-off-by: Christian Hartmann <[email protected]>

src/Forms.vue

@@ -57,13 +57,15 @@
 		<!-- No forms & loading emptycontents -->
 		<NcAppContent v-if="loading || !hasForms || !routeHash || !routeAllowed">
 			<NcEmptyContent v-if="loading"
+				class="emptycontent"
 				:name="t('forms', 'Loading forms …')">
 				<template #icon>
 					<NcLoadingIcon :size="64" />
 				</template>
 			</NcEmptyContent>
 
 			<NcEmptyContent v-else-if="!hasForms"
+				class="emptycontent"
 				:name="t('forms', 'No forms created yet')">
 				<template #icon>
 					<FormsIcon :size="64" />
@@ -76,6 +78,7 @@
 			</NcEmptyContent>
 
 			<NcEmptyContent v-else
+				class="emptycontent"
 				:name="canCreateForms ? t('forms', 'Select a form or create a new one') : t('forms', 'Please select a form')">
 				<template #icon>
 					<FormsIcon :size="64" />
@@ -378,3 +381,10 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.emptycontent {
+	display: flex;
+	height: 100%;
+}
+</style>

src/FormsEmptyContent.vue

@@ -82,5 +82,7 @@ export default {
 .forms-emptycontent {
 	flex-basis: 100vw;
 	flex-direction: column;
+	height: 100%;
+	display: flex;
 }
 </style>

src/views/Create.vue

@@ -24,7 +24,8 @@
 
 <template>
 	<NcAppContent v-if="isLoadingForm">
-		<NcEmptyContent :name="t('forms', 'Loading {title} …', { title: form.title })">
+		<NcEmptyContent class="emtpycontent"
+			:name="t('forms', 'Loading {title} …', { title: form.title })">
 			<template #icon>
 				<NcLoadingIcon :size="64" />
 			</template>
@@ -425,6 +426,11 @@ export default {
 <style lang="scss" scoped>
 @import '../scssmixins/markdownOutput';
 
+.emptycontent {
+	display: flex;
+	height: 100%;
+}
+
 .app-content {
 	display: flex;
 	align-items: center;

src/views/Results.vue

@@ -24,7 +24,8 @@
 
 <template>
 	<NcAppContent v-if="loadingResults">
-		<NcEmptyContent :name="t('forms', 'Loading responses …')">
+		<NcEmptyContent class="emptycontent"
+			:name="t('forms', 'Loading responses …')">
 			<template #icon>
 				<NcLoadingIcon :size="64" />
 			</template>
@@ -96,6 +97,7 @@
 		<!-- 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" />
@@ -326,6 +328,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.emptycontent {
+	display: flex;
+	height: 100%;
+}
+
 .app-content {
 	display: flex;
 	align-items: center;

src/views/Submit.vue

@@ -22,7 +22,8 @@
 
 <template>
 	<NcAppContent v-if="isLoadingForm">
-		<NcEmptyContent :name="t('forms', 'Loading {title} …', { title: form.title })">
+		<NcEmptyContent class="emptycontent"
+			:name="t('forms', 'Loading {title} …', { title: form.title })">
 			<template #icon>
 				<NcLoadingIcon :size="64" />
 			</template>
@@ -58,12 +59,14 @@
 		</header>
 
 		<NcEmptyContent v-if="loading"
+			class="emptycontent"
 			:name="t('forms', 'Submitting form …')">
 			<template #icon>
 				<NcLoadingIcon :size="64" />
 			</template>
 		</NcEmptyContent>
 		<NcEmptyContent v-else-if="success || !form.canSubmit"
+			class="emptycontent"
 			:name="t('forms', 'Thank you for completing the form!')"
 			:description="form.submissionMessage">
 			<template #icon>
@@ -75,6 +78,7 @@
 			</template>
 		</NcEmptyContent>
 		<NcEmptyContent v-else-if="isExpired"
+			class="emptycontent"
 			:name="t('forms', 'Form expired')"
 			:description="t('forms', 'This form has expired and is no longer taking answers')">
 			<template #icon>
@@ -455,6 +459,10 @@ export default {
 <style lang="scss" scoped>
 @import '../scssmixins/markdownOutput';
 
+.emptycontent {
+	display: flex;
+	height: 100%;
+}
 .app-content {
 	display: flex;
 	align-items: center;