From 4d400b6ace4a5161a7f1ae562467cc84202f3e54 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Mon, 24 Sep 2018 15:47:39 +0300
Subject: [PATCH] Hide scroll down button entirely with css to fix some issues

---
 client/components/Chat.vue | 13 +++++--------
 client/css/style.css       | 27 ++++++++++++---------------
 2 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/client/components/Chat.vue b/client/components/Chat.vue
index 6717b7f6..4556228b 100644
--- a/client/components/Chat.vue
+++ b/client/components/Chat.vue
@@ -57,14 +57,11 @@
 				<div
 					v-else
 					class="chat-content">
-					<transition name="fade">
-						<div
-							v-if="!channel.scrolledToBottom"
-							class="scroll-down"
-							@click="$refs.messageList.jumpToBottom()">
-							<div class="scroll-down-arrow" />
-						</div>
-					</transition>
+					<div
+						:class="['scroll-down', {'scroll-down-shown': !channel.scrolledToBottom}]"
+						@click="$refs.messageList.jumpToBottom()">
+						<div class="scroll-down-arrow" />
+					</div>
 					<MessageList
 						ref="messageList"
 						:network="network"
diff --git a/client/css/style.css b/client/css/style.css
index bddce168..9cf9f1f3 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1083,27 +1083,24 @@ background on hover (unless active) */
 	margin: 0;
 }
 
-.scroll-down.fade-leave-active,
-.scroll-down.fade-enter-active {
-	opacity: 0;
-	transform: translateY(16px);
-	transition: opacity 0.3s, transform 0.3s;
-}
-
-.scroll-down.fade-enter-to {
-	opacity: 1;
-	transform: none;
-}
-
 .scroll-down {
 	position: absolute;
 	bottom: 16px;
 	right: 16px;
 	z-index: 2;
-	transition: right 0.2s ease-in-out;
+	pointer-events: none;
+	opacity: 0;
+	transform: translateY(16px);
+	transition: all 0.2s ease-in-out;
 	cursor: pointer;
 }
 
+.scroll-down-shown {
+	opacity: 1;
+	transform: none;
+	pointer-events: auto;
+}
+
 .scroll-down-arrow {
 	width: 48px;
 	height: 48px;
@@ -2381,7 +2378,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 		height: 100%;
 		position: absolute;
 		left: -220px;
-		z-index: 2;
+		z-index: 10;
 		transition: transform 160ms;
 		transform: translateZ(0);
 	}
@@ -2396,7 +2393,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 		opacity: 0;
 		visibility: hidden;
 		transition: opacity 160ms, visibility 160ms;
-		z-index: 1;
+		z-index: 9;
 	}
 
 	#viewport.menu-open #sidebar-overlay {