Kelder/feathermost
32
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

Add glow when not at bottom

Browse source
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; margin: 0 3px;
} }
.channel-contents-wrapper { #channel_contents_wrapper {
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
margin-left: 12px; padding-left: 12px;
height: 100%; 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 { #channel_contents {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@ -151,7 +169,7 @@ ul#server_selection_list {
padding: 0 10px; padding: 0 10px;
} }
.compose-wrapper { .compose-wrapper {
padding: 0 5px 8px; padding: 5px 8px;
} }
#compose { #compose {
width: 100%; width: 100%;

2
index.html
View file

@ -52,7 +52,7 @@
<div class="main-area"> <div class="main-area">
<div id="channel_header"></div> <div id="channel_header"></div>
<div class="channel-contents-wrapper"> <div id="channel_contents_wrapper">
<div class="centered" id="channel_contents"> <div class="centered" id="channel_contents">
<div style="text-align: center; width: 100%; height: 100%; display: flex; <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); byId("channel_contents").append(...nodes);
checkScrolledToBottom();
} }
function logIn() { function logIn() {
@ -412,4 +413,15 @@ function updateComposeHeight() {
byId("compose").addEventListener("input", updateComposeHeight); byId("compose").addEventListener("input", updateComposeHeight);
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); byId("login_button").addEventListener("click", logIn);