Hide scroll down button entirely with css to fix some issues

This commit is contained in:
Pavel Djundik 2018-09-24 15:47:39 +03:00
parent e5b3c518e2
commit 4d400b6ace
2 changed files with 17 additions and 23 deletions

View file

@ -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"

View file

@ -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 {