From f1994352bd5a3813776cc547e572a63e885d1be5 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Tue, 18 Sep 2018 12:20:40 +0300
Subject: [PATCH] Fix scroll button on iOS

---
 client/components/Chat.vue        |  9 +++++++++
 client/components/MessageList.vue | 12 ------------
 client/css/style.css              | 16 +---------------
 3 files changed, 10 insertions(+), 27 deletions(-)

diff --git a/client/components/Chat.vue b/client/components/Chat.vue
index 53851cd7..6717b7f6 100644
--- a/client/components/Chat.vue
+++ b/client/components/Chat.vue
@@ -57,7 +57,16 @@
 				<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>
 					<MessageList
+						ref="messageList"
 						:network="network"
 						:channel="channel" />
 					<ChatUserList
diff --git a/client/components/MessageList.vue b/client/components/MessageList.vue
index 52630a37..d02f4e31 100644
--- a/client/components/MessageList.vue
+++ b/client/components/MessageList.vue
@@ -45,18 +45,6 @@
 					@linkPreviewToggle="onLinkPreviewToggle" />
 			</template>
 		</div>
-
-		<transition name="fade">
-			<div
-				v-if="!channel.scrolledToBottom"
-				class="scroll-down"
-				@click="jumpToBottom()">
-				<div class="scroll-down-arrow" />
-				<div
-					v-if="channel.unread > 0"
-					class="scroll-down-number">{{ channel.unread }}</div>
-			</div>
-		</transition>
 	</div>
 </template>
 
diff --git a/client/css/style.css b/client/css/style.css
index 028c47be..bddce168 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1104,27 +1104,13 @@ background on hover (unless active) */
 	cursor: pointer;
 }
 
-.scroll-down-number {
-	background: #84ce88;
-	border-radius: 50%;
-	text-align: center;
-	width: 30px;
-	height: 30px;
-	line-height: 30px;
-	font-size: 12px;
-	margin-left: 9px;
-	z-index: 23;
-	position: absolute;
-	top: -20px;
-	font-weight: bold;
-}
-
 .scroll-down-arrow {
 	width: 48px;
 	height: 48px;
 	line-height: 48px;
 	border-radius: 50%;
 	background: #fff;
+	color: #333;
 	border: 1px solid #84ce88;
 	text-align: center;
 }