From 1d5ed11a8cdf06f3b98d0e1c823a9c7e66dcb903 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Fri, 8 Dec 2017 15:57:05 +0100
Subject: [PATCH] Make the whole stack a drop target
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fixes #307

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 css/style.scss                    | 18 ++++++++++++++++--
 templates/part.board.mainView.php |  2 +-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/css/style.scss b/css/style.scss
index aa57a963d..eb4961204 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -157,8 +157,16 @@ input.input-inline {
 .as-sortable-un-selectable {
 	.card-list {
 		min-height: 96px;
+		flex-grow: 1;
+	}
+
+	// empty stack placeholders and last placeholders should fill the space
+	.emptyStack .as-sortable-placeholder,
+	li:last-child.as-sortable-placeholder {
+		height: 100% !important;
 	}
 }
+
 #innerBoard {
 	padding: 10px;
 
@@ -295,6 +303,8 @@ input.input-inline {
 .stack {
 	width: 100%;
 	vertical-align: top;
+	display: flex;
+	flex-direction: column;
 
 	h3 {
 		padding: 10px 10px 8px;
@@ -347,6 +357,12 @@ input.input-inline {
 		}
 	}
 
+
+	ul {
+		display: flex;
+		flex-direction: column;
+	}
+
 }
 
 
@@ -1183,13 +1199,11 @@ input.input-inline {
 
 	#innerBoard {
 		display: flex;
-		align-items: flex-start;
 	}
 
 	.stack {
 		width: 320px;
 		min-width: 320px;
-		display: inline-block;
 		border-right: 1px solid $color-lightgrey;
 		margin-right: 10px;
 		padding-right: 10px;
diff --git a/templates/part.board.mainView.php b/templates/part.board.mainView.php
index 62fc18716..577112dd1 100644
--- a/templates/part.board.mainView.php
+++ b/templates/part.board.mainView.php
@@ -55,7 +55,7 @@
 						ng-if="!s.status.editStack"
                         ng-click="stackservice.delete(s.id)"></button>
 			</h3>
-			<ul data-as-sortable="sortOptions" is-disabled="!boardservice.canEdit() || params.filter==='archive'" data-ng-model="s.cards" class="card-list">
+			<ul data-as-sortable="sortOptions" is-disabled="!boardservice.canEdit() || filter==='archive'" data-ng-model="s.cards" class="card-list" ng-class="{emptyStack: !s.cards.length}">
 				<li class="card as-sortable-item"
 					ng-repeat="c in s.cards"
 					data-as-sortable-item