From 1e043d5a24f757399b168da10174b58c989273a5 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Wed, 12 Aug 2020 08:10:58 +0200
Subject: [PATCH] Move customize button to the bottom
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 apps/dashboard/src/App.vue | 44 +++++++++++++++++++++-----------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index 32179f66313..9831f761e1a 100644
--- a/apps/dashboard/src/App.vue
+++ b/apps/dashboard/src/App.vue
@@ -24,10 +24,12 @@
 			</div>
 		</Draggable>
 
-		<a v-tooltip="tooltip"
-			class="edit-panels icon-add"
-			:class="{ firstrun: firstRun }"
-			@click="showModal">{{ t('dashboard', 'Customize') }}</a>
+		<div class="footer"
+			:class="{ firstrun: firstRun }">
+			<a v-tooltip="tooltip"
+				class="edit-panels icon-add"
+				@click="showModal">{{ t('dashboard', 'Customize') }}</a>
+		</div>
 
 		<Modal v-if="modal" @close="closeModal">
 			<div class="modal__content">
@@ -377,31 +379,33 @@ export default {
 		}
 	}
 
+	.footer {
+		text-align: center;
+		transition: bottom var(--animation-slow) ease-in-out;
+		bottom: 0;
+
+		&.firstrun {
+			position: sticky;
+			bottom: 10px;
+		}
+	}
 	.edit-panels {
-		z-index: 99;
-		position: fixed;
-		bottom: 20px;
-		right: 20px;
-		padding: 10px 15px 10px 35px;
+
+		display: inline-block;
+		margin:auto;
 		background-position: 10px center;
-		opacity: .7;
+		padding: 12px;
+		padding-left: 30px;
 		background-color: var(--color-main-background);
 		border-radius: var(--border-radius-pill);
-		transition: right var(--animation-slow) ease-in-out;
+		max-width: 200px;
+		opacity: 1;
+		text-align: center;
 
 		&:hover {
 			opacity: 1;
 			background-color: var(--color-background-hover);
 		}
-
-		&.firstrun {
-			right: 50%;
-			transform: translateX(50%);
-			max-width: 200px;
-			box-shadow: 0px 0px 3px var(--color-box-shadow);
-			opacity: 1;
-			text-align: center;
-		}
 	}
 
 	.modal__content {
-- 
2.39.5