From 44bf52887f26da28ccf2e965081a48db8a7f98f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Mon, 24 Aug 2020 16:05:53 +0200
Subject: [PATCH] Fix styling and scroll behavior
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/overview/Overview.vue | 91 +++++++++++++++++-----------
 src/views/Dashboard.vue              |  1 +
 2 files changed, 56 insertions(+), 36 deletions(-)

diff --git a/src/components/overview/Overview.vue b/src/components/overview/Overview.vue
index b3da4b596..684ad9f75 100644
--- a/src/components/overview/Overview.vue
+++ b/src/components/overview/Overview.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div>
+	<div class="overview-wrapper">
 		<Controls :overview-name="filterDisplayName" />
 
 		<div v-if="loading" key="loading" class="emptycontent">
@@ -30,48 +30,46 @@
 			<p />
 		</div>
 
-		<div v-else>
-			<div v-if="isValidFilter" class="dashboard">
-				<div v-if="cardsByDueDate.overdue.length > 0" class="dashboard-column">
-					<h3>{{ t('deck', 'Overdue') }}</h3>
-					<div v-for="card in cardsByDueDate.overdue" :key="card.id">
-						<CardItem :id="card.id" />
-					</div>
+		<div v-else-if="isValidFilter" class="overview">
+			<div v-if="cardsByDueDate.overdue.length > 0" class="dashboard-column">
+				<h3>{{ t('deck', 'Overdue') }}</h3>
+				<div v-for="card in cardsByDueDate.overdue" :key="card.id">
+					<CardItem :id="card.id" />
 				</div>
+			</div>
 
-				<div class="dashboard-column">
-					<h3>{{ t('deck', 'Today') }}</h3>
-					<div v-for="card in cardsByDueDate.today" :key="card.id">
-						<CardItem :id="card.id" />
-					</div>
+			<div class="dashboard-column">
+				<h3>{{ t('deck', 'Today') }}</h3>
+				<div v-for="card in cardsByDueDate.today" :key="card.id">
+					<CardItem :id="card.id" />
 				</div>
+			</div>
 
-				<div class="dashboard-column">
-					<h3>{{ t('deck', 'Tomorrow') }}</h3>
-					<div v-for="card in cardsByDueDate.tomorrow" :key="card.id">
-						<CardItem :id="card.id" />
-					</div>
+			<div class="dashboard-column">
+				<h3>{{ t('deck', 'Tomorrow') }}</h3>
+				<div v-for="card in cardsByDueDate.tomorrow" :key="card.id">
+					<CardItem :id="card.id" />
 				</div>
+			</div>
 
-				<div class="dashboard-column">
-					<h3>{{ t('deck', 'This week') }}</h3>
-					<div v-for="card in cardsByDueDate.thisWeek" :key="card.id">
-						<CardItem :id="card.id" />
-					</div>
+			<div class="dashboard-column">
+				<h3>{{ t('deck', 'This week') }}</h3>
+				<div v-for="card in cardsByDueDate.thisWeek" :key="card.id">
+					<CardItem :id="card.id" />
 				</div>
+			</div>
 
-				<div class="dashboard-column">
-					<h3>{{ t('deck', 'Later') }}</h3>
-					<div v-for="card in cardsByDueDate.later" :key="card.id">
-						<CardItem :id="card.id" />
-					</div>
+			<div class="dashboard-column">
+				<h3>{{ t('deck', 'Later') }}</h3>
+				<div v-for="card in cardsByDueDate.later" :key="card.id">
+					<CardItem :id="card.id" />
 				</div>
+			</div>
 
-				<div class="dashboard-column">
-					<h3>{{ t('deck', 'No due') }}</h3>
-					<div v-for="card in cardsByDueDate.nodue" :key="card.id">
-						<CardItem :id="card.id" />
-					</div>
+			<div class="dashboard-column">
+				<h3>{{ t('deck', 'No due') }}</h3>
+				<div v-for="card in cardsByDueDate.nodue" :key="card.id">
+					<CardItem :id="card.id" />
 				</div>
 			</div>
 		</div>
@@ -200,11 +198,21 @@ export default {
 <style lang="scss" scoped>
 @import './../../css/variables';
 
-.dashboard {
+.overview-wrapper {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	max-height: calc(100vh - 50px);
+}
+
+.overview {
+	position: relative;
+	height: calc(100% - 44px);
+	overflow-x: scroll;
 	display: flex;
 	align-items: stretch;
-	margin-left: $board-spacing;
-	margin-right: $board-spacing;
+	padding-left: $board-spacing;
+	padding-right: $board-spacing;
 
 	.dashboard-column {
 		display: flex;
@@ -212,6 +220,17 @@ export default {
 		min-width: $stack-width;
 		margin-left: $stack-spacing;
 		margin-right: $stack-spacing;
+
+		h3 {
+			margin: -6px;
+			margin-bottom: 12px;
+			padding: 6px 13px;
+			position: sticky;
+			top: 0;
+			z-index: 100;
+			background-color: var(--color-main-background);
+			border: 1px solid var(--color-main-background);
+		}
 	}
 }
 
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 01c380cd8..3e512b80e 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -22,6 +22,7 @@
 
 <template>
 	<DashboardWidget :items="cards"
+		:show-more-text="t('deck', 'upcoming cards')"
 		:show-more-url="showMoreUrl"
 		:loading="loading"
 		@hide="() => {}"