supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Hide scroll down button entirely with css to fix some issues

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/components/Chat.vue
View File

@ -57,14 +57,11 @@
<div <div
v-else v-else
class="chat-content"> class="chat-content">
<transition name="fade">
<div <div
v-if="!channel.scrolledToBottom" :class="['scroll-down', {'scroll-down-shown': !channel.scrolledToBottom}]"
class="scroll-down"
@click="$refs.messageList.jumpToBottom()"> @click="$refs.messageList.jumpToBottom()">
<div class="scroll-down-arrow" /> <div class="scroll-down-arrow" />
</div> </div>
</transition>
<MessageList <MessageList
ref="messageList" ref="messageList"
:network="network" :network="network"

27
client/css/style.css
View File

@ -1083,27 +1083,24 @@ background on hover (unless active) */
margin: 0; 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 { .scroll-down {
position: absolute; position: absolute;
bottom: 16px; bottom: 16px;
right: 16px; right: 16px;
z-index: 2; 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; cursor: pointer;
} }
.scroll-down-shown {
opacity: 1;
transform: none;
pointer-events: auto;
}
.scroll-down-arrow { .scroll-down-arrow {
width: 48px; width: 48px;
height: 48px; height: 48px;
@ -2381,7 +2378,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
height: 100%; height: 100%;
position: absolute; position: absolute;
left: -220px; left: -220px;
z-index: 2; z-index: 10;
transition: transform 160ms; transition: transform 160ms;
transform: translateZ(0); transform: translateZ(0);
} }
@ -2396,7 +2393,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: opacity 160ms, visibility 160ms; transition: opacity 160ms, visibility 160ms;
z-index: 1; z-index: 9;
} }
#viewport.menu-open #sidebar-overlay { #viewport.menu-open #sidebar-overlay {