Fix styling of the empty content view

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/board/Board.vue

@@ -24,7 +24,13 @@
 	<div class="board-wrapper">
 		<Controls :board="board" />
 
-		<EmptyContent v-if="stacksByBoard.length === 0" icon="icon-pause">
+		<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>
+			<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') }}
@@ -43,14 +49,7 @@
 					</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">
+			<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)