Add glow when not at bottom
This commit is contained in:
parent
3069c012a1
commit
d6b0e5acda
3 changed files with 34 additions and 4 deletions
|
@ -138,11 +138,29 @@ ul#server_selection_list {
|
|||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.channel-contents-wrapper {
|
||||
#channel_contents_wrapper {
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
margin-left: 12px;
|
||||
padding-left: 12px;
|
||||
height: 100%;
|
||||
|
||||
transition-property: background-position, border;
|
||||
transition-duration: 0.1s;
|
||||
|
||||
background-position-y: calc(100% + 50px);
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
|
||||
background-size: 1px 50px;
|
||||
background-repeat: repeat-x;
|
||||
|
||||
border-bottom: 1px solid rgba(170, 170, 170, 0);
|
||||
}
|
||||
#channel_contents_wrapper.new-messages {
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 255, 0), rgba(0, 0, 255, 0.1));
|
||||
}
|
||||
#channel_contents_wrapper.not-at-bottom {
|
||||
transition-duration: 1s;
|
||||
background-position-y: 100%;
|
||||
border-bottom-color: rgba(170, 170, 170, 0.5);
|
||||
}
|
||||
#channel_contents {
|
||||
text-rendering: optimizeLegibility;
|
||||
|
@ -151,7 +169,7 @@ ul#server_selection_list {
|
|||
padding: 0 10px;
|
||||
}
|
||||
.compose-wrapper {
|
||||
padding: 0 5px 8px;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
#compose {
|
||||
width: 100%;
|
||||
|
|
|
@ -52,7 +52,7 @@
|
|||
<div class="main-area">
|
||||
<div id="channel_header"></div>
|
||||
|
||||
<div class="channel-contents-wrapper">
|
||||
<div id="channel_contents_wrapper">
|
||||
<div class="centered" id="channel_contents">
|
||||
|
||||
<div style="text-align: center; width: 100%; height: 100%; display: flex;
|
||||
|
|
12
main.js
12
main.js
|
@ -280,6 +280,7 @@ function populateChannelContents(contents) {
|
|||
}
|
||||
|
||||
byId("channel_contents").append(...nodes);
|
||||
checkScrolledToBottom();
|
||||
}
|
||||
|
||||
function logIn() {
|
||||
|
@ -412,4 +413,15 @@ function updateComposeHeight() {
|
|||
byId("compose").addEventListener("input", updateComposeHeight);
|
||||
updateComposeHeight();
|
||||
|
||||
function checkScrolledToBottom() {
|
||||
const el = byId("channel_contents_wrapper");
|
||||
|
||||
const scrolledTo = el.clientHeight + el.scrollTop;
|
||||
const scrollHeight = el.scrollHeight
|
||||
const atBottom = scrolledTo >= scrollHeight;
|
||||
el.className = atBottom ? "" : "not-at-bottom";
|
||||
}
|
||||
byId("channel_contents_wrapper").addEventListener("scroll", checkScrolledToBottom);
|
||||
checkScrolledToBottom();
|
||||
|
||||
byId("login_button").addEventListener("click", logIn);
|
||||
|
|
Loading…
Reference in a new issue