deblan-mirror/thelounge
deblan-mirror/thelounge
1
0
Fork 0
mirror of https://github.com/thelounge/thelounge.git synced 2024-06-03 14:22:19 +02:00
Code Issues Projects Releases Wiki Activity

Fix scroll button on iOS

Browse source
This commit is contained in:
Pavel Djundik 2018-09-18 12:20:40 +03:00
parent caf728a2a7
commit f1994352bd
3 changed files with 10 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
client/components/Chat.vue
View file

@ -57,7 +57,16 @@
<div <div
v-else v-else
class="chat-content"> 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 <MessageList
ref="messageList"
:network="network" :network="network"
:channel="channel" /> :channel="channel" />
<ChatUserList <ChatUserList

12
client/components/MessageList.vue
View file

@ -45,18 +45,6 @@
@linkPreviewToggle="onLinkPreviewToggle" /> @linkPreviewToggle="onLinkPreviewToggle" />
</template> </template>
</div> </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> </div>
</template> </template>

16
client/css/style.css
View file

@ -1104,27 +1104,13 @@ background on hover (unless active) */
cursor: pointer; 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 { .scroll-down-arrow {
width: 48px; width: 48px;
height: 48px; height: 48px;
line-height: 48px; line-height: 48px;
border-radius: 50%; border-radius: 50%;
background: #fff; background: #fff;
color: #333;
border: 1px solid #84ce88; border: 1px solid #84ce88;
text-align: center; text-align: center;
} }