Fix styling of the empty content view

Signed-off-by: Julius Härtl <[email protected]>

Author: juliusknorr

src/components/board/Board.vue

@@ -24,33 +24,32 @@
 	<div class="board-wrapper">
 		<Controls :board="board" />
 
-		<EmptyContent v-if="stacksByBoard.length === 0" icon="icon-pause">
-			{{ t('deck', 'No lists available') }}
-			<template #desc>
-				{{ t('deck', 'Create a new list to add cards to this board') }}
-				<form @submit.prevent="addNewStack()">
-					<input id="new-stack-input-main"
-						v-model="newStackTitle"
-						v-focus
-						type="text"
-						class="no-close"
-						:placeholder="t('deck', 'List name')"
-						required>
-					<input v-tooltip="t('deck', 'Add new list')"
-						class="icon-confirm"
-						type="submit"
-						value="">
-				</form>
-			</template>
-		</EmptyContent>
-
 		<transition name="fade" mode="out-in">
 			<div v-if="loading" key="loading" class="emptycontent">
 				<div class="icon icon-loading" />
 				<h2>{{ t('deck', 'Loading board') }}</h2>
 				<p />
 			</div>
-			<div v-else-if="board && !loading" key="board" class="board">
+			<EmptyContent v-else-if="isEmpty" key="empty" icon="icon-deck">
+				{{ t('deck', 'No lists available') }}
+				<template #desc>
+					{{ t('deck', 'Create a new list to add cards to this board') }}
+					<form @submit.prevent="addNewStack()">
+						<input id="new-stack-input-main"
+							v-model="newStackTitle"
+							v-focus
+							type="text"
+							class="no-close"
+							:placeholder="t('deck', 'List name')"
+							required>
+						<input v-tooltip="t('deck', 'Add new list')"
+							class="icon-confirm"
+							type="submit"
+							value="">
+					</form>
+				</template>
+			</EmptyContent>
+			<div v-else-if="!isEmpty && !loading" key="board" class="board">
 				<Container lock-axix="y"
 					orientation="horizontal"
 					:drag-handle-selector="dragHandleSelector"
@@ -115,6 +114,9 @@ export default {
 		dragHandleSelector() {
 			return this.canEdit ? null : '.no-drag'
 		},
+		isEmpty() {
+			return this.stacksByBoard.length === 0
+		},
 	},
 	watch: {
 		id: 'fetchData',
@@ -163,6 +165,15 @@ export default {
 
 	form {
 		text-align: center;
+		display: flex;
+		width: 100%;
+		max-width: 200px;
+		margin: auto;
+		margin-top: 20px;
+
+		input[type=text] {
+			flex-grow: 1;
+		}
 	}
 
 	.board-wrapper {

webpack.js

@@ -32,5 +32,5 @@ const config = {
 	}
 };
 
-module.exports = merge(config, webpackConfig)
+module.exports = merge(webpackConfig, config)