From 28208f168dee85072c1fadb530a33baf911bee99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Fri, 8 Dec 2017 15:00:40 +0100
Subject: [PATCH] Improve card positioning when dragging
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fixes #307
fixes #236

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 css/style.scss                   |  7 +++++++
 js/controller/BoardController.js | 15 +++++++--------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/css/style.scss b/css/style.scss
index 8b0d5fb91..aa57a963d 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -150,8 +150,15 @@ input.input-inline {
 			}
 		}
 	}
+
 }
 
+// styles to provide a drop zone in empty stacks
+.as-sortable-un-selectable {
+	.card-list {
+		min-height: 96px;
+	}
+}
 #innerBoard {
 	padding: 10px;
 
diff --git a/js/controller/BoardController.js b/js/controller/BoardController.js
index 7931945e6..b13ee3b80 100644
--- a/js/controller/BoardController.js
+++ b/js/controller/BoardController.js
@@ -250,9 +250,9 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St
 				$scope.refreshData();
 			});
 		},
-		scrollableContainer: '#board',
+		scrollableContainer: '#innerBoard',
 		containerPositioning: 'relative',
-		containment: '#board',
+		containment: '#innerBoard',
 		longTouch: true,
 		// auto scroll on drag
 		dragMove: function (itemPosition, containment, eventObj) {
@@ -262,14 +262,14 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St
 				var targetX = eventObj.pageX - (offset.left || container.scrollLeft());
 				var targetY = eventObj.pageY - (offset.top || container.scrollTop());
 				if (targetX < offset.left) {
-					container.scrollLeft(container.scrollLeft() - 50);
+					container.scrollLeft(container.scrollLeft() - 25);
 				} else if (targetX > container.width()) {
-					container.scrollLeft(container.scrollLeft() + 50);
+					container.scrollLeft(container.scrollLeft() + 25);
 				}
 				if (targetY < offset.top) {
-					container.scrollTop(container.scrollTop() - 50);
+					container.scrollTop(container.scrollTop() - 25);
 				} else if (targetY > container.height()) {
-					container.scrollTop(container.scrollTop() + 50);
+					container.scrollTop(container.scrollTop() + 25);
 				}
 			}
 		},
@@ -289,8 +289,7 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St
 		},
 		scrollableContainer: '#board',
 		containerPositioning: 'relative',
-		containment: '#board',
-		longTouch: true,
+		containment: '#innerBoard',
 		dragMove: function (itemPosition, containment, eventObj) {
 			if (eventObj) {
 				var container = $("#board");