Fix card styling

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

src/components/board/Board.vue

@@ -23,7 +23,7 @@
 <template>
 	<div>
 		<Controls :board="board" />
-		<div v-if="board">
+		<div v-if="board" class="board">
 			<container lock-axix="y" orientation="horizontal" @drop="onDropStack">
 				<draggable v-for="stack in stacksByBoard" :key="stack.id" class="stack">
 					<h3>{{ stack.title }}</h3>
@@ -128,7 +128,21 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
+	$board-spacing: 15px;
+	$stack-spacing: 10px;
+	$stack-width: 300px;
+
+	.board {
+		margin-left: $board-spacing;
+	}
+
+	.stack {
+		width: $stack-width;
+		padding: $stack-spacing;
+		padding-top: 0;
+	}
 
 	.smooth-dnd-container.vertical {
 		display: flex;

src/components/cards/CardBadges.vue

@@ -22,19 +22,14 @@
 
 <template>
 	<div class="badges">
-		<div v-if="true" class="icon icon-description" title="" />
-		<div v-if="true" class="due icon icon-calendar-dark">
+		<div v-if="true" class="card-files icon icon-files-dark" />
+		<div v-if="true" class="card-comments icon icon-comment" />
+		<div v-if="true" :class="{'icon-calendar': true, 'icon-calendar-dark': false}" class="due icon now">
 			<span>Now</span>
 		</div>
 		<div v-if="true" class="card-tasks icon icon-checkmark">
 			<span>0/0</span>
 		</div>
-		<div v-if="true" class="card-files icon icon-files-dark">
-			<span>1</span>
-		</div>
-		<div v-if="true" class="card-comments icon icon-comment">
-			<span>1</span>
-		</div>
 		<div v-if="true" class="card-assigned-users">
 			<avatar user="admin" />
 		</div>
@@ -74,11 +69,42 @@ export default {
 		}
 		.card-assigned-users {
 			flex-grow: 1;
-			padding: 6px 0px;
+			padding: 6px 0;
 			margin-right: -5px;
 			.avatardiv {
 				float: right;
 			}
 		}
 	}
+
+	.badges .icon.due {
+		background-position: 4px center;
+		border-radius: 3px;
+		margin: 10px 0;
+		margin-right: 3px;
+		padding: 4px;
+		font-size: 90%;
+		display: flex;
+		align-items: center;
+		opacity: .7;
+
+		.icon {
+			background-size: contain;
+		}
+
+		&.overdue {
+			background-color: var(--color-error);
+			color: var(--color-primary-text);
+		}
+		&.now {
+			background-color: var(--color-warning);
+		}
+		&.next {
+			background-color: var(--color-warning-light);
+		}
+
+		span {
+			margin-left: 20px;
+		}
+	}
 </style>

src/components/cards/CardItem.vue

@@ -24,8 +24,14 @@
 	<div :class="{'compact': compactMode}" tag="div" class="card"
 		@click="openCard">
 		<div class="card-upper">
-			<h3>{{ card.title }}</h3>
-			<action :actions="visibilityPopover" />
+			<h3 @click.stop="startEditing">{{ card.title }}</h3>
+			<transition name="fade" mode="out-in">
+				<form v-if="editing">
+					<input :value="card.title" type="text" autofocus>
+					<input type="button" class="icon-confirm" @click.stop="editing=false">
+				</form>
+				<action v-if="!editing" :actions="visibilityPopover" @click.stop="" />
+			</transition>
 		</div>
 		<ul class="labels">
 			<li v-for="label in labels" :key="label.id" :style="labelStyle(label)"><span>{{ label.title }}</span></li>
@@ -60,7 +66,8 @@ export default {
 	},
 	data() {
 		return {
-			menuOpened: false
+			menuOpened: false,
+			editing: false
 		}
 	},
 	computed: {
@@ -111,32 +118,57 @@ export default {
 		},
 		hidePopoverMenu() {
 			this.menuOpened = false
+		},
+		startEditing() {
+			this.editing = true
 		}
 	}
 }
 </script>
 
 <style lang="scss" scoped>
+	$card-spacing: 20px;
+	$card-padding: 15px;
+
+	.fade-enter-active, .fade-leave-active {
+		transition: opacity .125s;
+	}
+	.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+		opacity: 0;
+	}
+
 	.card {
-		box-shadow: 0 0 5px #aaa;
+		box-shadow: 0 0 3px 0 var(--color-box-shadow);
 		border-radius: 3px;
-		margin: 10px;
-		width: 260px; // TODO: TMP
 		font-size: 100%;
 		background-color: var(--color-main-background);
+		margin-bottom: $card-spacing;
+		&.current {
+			box-shadow: 0 0 3px 1px var(--color-box-shadow);
+		}
 
 		.card-upper {
 			display: flex;
+			form {
+				display: flex;
+				padding: 5px 7px;
+				position: absolute;
+				input[type=text] {
+					width: 100%;
+				}
+
+			}
 			h3 {
-				margin: 12px;
+				margin: $card-padding;
 				flex-grow: 1;
 				font-size: 100%;
+				cursor: text;
 			}
 		}
 
 		.labels {
 			display: flex;
-			margin-left: 12px;
+			margin-left: $card-padding;
 			margin-top: -5px;
 			margin-bottom: -5px;
 
@@ -150,8 +182,8 @@ export default {
 
 		.card-controls {
 			display: flex;
-			margin-left: 12px;
-			margin-right: 12px;
+			margin-left: $card-padding;
+			margin-right: $card-padding;
 			& > div {
 				display: flex;
 				height: 44px;
@@ -160,7 +192,7 @@ export default {
 	}
 
 	.compact {
-		padding-bottom: 12px;
+		padding-bottom: $card-padding;
 		.labels {
 			height: 6px;
 			margin-top: -10px;

src/components/navigation/AppNavigationAddBoard.vue

@@ -63,6 +63,7 @@ export default {
 			this.editing = true
 		},
 		createBoard(e) {
+			console.log(this.color)
 			const title = e.currentTarget.childNodes[0].value
 			this.$store.dispatch('createBoard', {
 				title: title,