Center align empty content

Signed-off-by: Kiran Parajuli <kiranparajuli589@gmail.com>
nextcloud · Jan 31, 2022 · e051650 · e051650
1 parent 21b32e7
commit e051650
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 24 deletions.
diff --git a/css/icon.css → css/tab.css b/css/icon.css → css/tab.css
@@ -8,3 +8,13 @@ span.icon-open-project {
 body.theme--dark span.icon-open-project {
 	background: url('../img/tab-logo-white.svg') no-repeat center;
 }
+
+#tab-open-project, .fill-height {
+	height: 100%;
+}
+
+.center-content {
+	display: flex;
+	align-content: center;
+	justify-content: center;
+}
diff --git a/lib/Listener/LoadSidebarScript.php b/lib/Listener/LoadSidebarScript.php
@@ -38,6 +38,6 @@ public function handle(Event $event): void {
 			return;
 		}
 		Util::addScript(Application::APP_ID, 'integration_openproject-projectTab', 'files');
-		Util::addStyle(Application::APP_ID, 'icon');
+		Util::addStyle(Application::APP_ID, 'tab');
 	}
 }
diff --git a/src/components/tab/EmptyContent.vue b/src/components/tab/EmptyContent.vue
@@ -1,16 +1,18 @@
 <template>
-	<div class="empty-projects">
-		<div class="empty-icon">
-			<img :src="flowSvg" alt="flow">
-		</div>
-		<div class="title text-center">
-			{{ emptyContentMessage }}
-		</div>
-		<br>
-		<div v-if="showConnectButton" class="connect-button">
-			<a class="button" :href="settingsUrl">
-				{{ t('integration_openproject', 'Connect to OpenProject') }}
-			</a>
+	<div class="fill-height center-content">
+		<div class="empty-projects">
+			<div class="empty-icon center-content">
+				<img :src="flowSvg" alt="flow">
+			</div>
+			<div class="title text-center">
+				{{ emptyContentMessage }}
+			</div>
+			<br>
+			<div v-if="showConnectButton" class="connect-button">
+				<a class="button" :href="settingsUrl">
+					{{ t('integration_openproject', 'Connect to OpenProject') }}
+				</a>
+			</div>
 		</div>
 	</div>
 </template>
@@ -60,11 +62,7 @@ export default {
 		text-align: center;
 	}
 	.empty-icon {
-		padding-top: 10vh;
-		padding-bottom: 1vh;
-		display: flex;
-		align-content: center;
-		justify-content: center;
+		padding: 1vh 0;
 		.icon img {
 			height: 50px;
 			width: 50px;

diff --git a/src/views/ProjectsTab.vue b/src/views/ProjectsTab.vue
@@ -22,9 +22,8 @@
 
 <template>
 	<div class="projects">
-		<div :class="{ 'icon-loading': state === 'loading' }">
-			<EmptyContent v-if="state !== 'loading'" id="openproject-empty-content" :state="state" />
-		</div>
+		<div v-if="isLoading" class="icon-loading" />
+		<EmptyContent v-else id="openproject-empty-content" :state="state" />
 	</div>
 </template>
 
@@ -43,8 +42,13 @@ export default {
 		fileInfo: null,
 		state: 'loading',
 	}),
-	computed: {},
-	created() {},
+	computed: {
+		isLoading() {
+			return this.state === 'loading'
+		},
+	},
+	created() {
+	},
 	methods: {
 		/**
 		 * updates current resource
@@ -89,11 +93,19 @@ export default {
 .projects {
 	height: 100% !important;
 	text-align: center;
+
+	.center-content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
 	.title {
-		font-size:  2rem;
+		font-size: 2rem;
 		font-weight: 600;
 		padding-bottom: 0;
 	}
+
 	.subtitle {
 		padding-top: 0;
 		font-size: 1.2rem;