Kelder
/
feathermost
26
0
Fork 0
Code Issues 8 Pull Requests Packages Projects Releases Wiki Activity

Add glow when not at bottom

This commit is contained in:
Midgard 2020-03-30 17:12:07 +02:00
parent 3069c012a1
commit d6b0e5acda
Signed by: midgard
GPG Key ID: 511C112F1331BBB4
3 changed files with 34 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
assets/main.css
View File

@ -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%;

2
index.html
View File

@ -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
View File

@ -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);