Merge pull request 'Made datetime/reply visible when date range is long, also fixes opacity to 1 for the last message's time display' (#39) from BordedDev/snek:bugfix/opacity-for-last-message into main

Browse Source 
Reviewed-on: #39
Reviewed-by: retoor <retoor@noreply@molodetz.nl>
This commit is contained in:
retoor 2025-05-24 01:48:07 +02:00
commit 7fe4289f42
2 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/snek/static/base.css
View File

@ -306,9 +306,10 @@ input[type="text"], .chat-input textarea {
} }
} }
.message:has(+ .message.switch-user), .message:last-child { .message:has(+ .message.switch-user), .message:has(+ .message.long-time), .message:last-child {
.time { .time {
display: block; display: block;
opacity: 1;
} }
} }

15
src/snek/templates/web.html
View File

@ -189,12 +189,27 @@
const messagesContainer = document.querySelector(".chat-messages"); const messagesContainer = document.querySelector(".chat-messages");
updateTimes(); updateTimes();
let previousUser = null; let previousUser = null;
let previousDate = null;
document.querySelectorAll(".message").forEach((message) => { document.querySelectorAll(".message").forEach((message) => {
if (previousUser !== message.dataset.user_uid) { if (previousUser !== message.dataset.user_uid) {
message.classList.add("switch-user"); message.classList.add("switch-user");
previousUser = message.dataset.user_uid; previousUser = message.dataset.user_uid;
previousDate = new Date(message.dataset.created_at);
} else { } else {
message.classList.remove("switch-user"); message.classList.remove("switch-user");
if (!previousDate) {
previousDate = new Date(message.dataset.created_at);
} else {
const currentDate = new Date(message.dataset.created_at);
if (currentDate.getTime() - previousDate.getTime() > 1000 * 60 * 20) {
message.classList.add("long-time");
} else {
message.classList.remove("long-time");
}
previousDate = currentDate;
}
} }
}); });
lastMessage = messagesContainer.querySelector(".message:last-child"); lastMessage = messagesContainer.querySelector(".message:last-child");