src/whiskr
1
0
Fork 0
mirror of https://github.com/coalaura/whiskr.git synced 2025-09-09 01:09:54 +00:00
Code Activity

scroll bottom and top

Browse Source
This commit is contained in:
Laura
2025-08-23 17:43:37 +02:00
parent 3b2fbad877
commit dea725e17c
4 changed files with 29 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
static/css/chat.css
View File

@@ -724,6 +724,7 @@ body.loading #version,
.modal.loading .content::after, .modal.loading .content::after,
.reasoning .toggle::before, .reasoning .toggle::before,
.reasoning .toggle::after, .reasoning .toggle::after,
#top,
#bottom, #bottom,
.files .file::before, .files .file::before,
.files .file .remove, .files .file .remove,
@@ -853,15 +854,24 @@ label[for="reasoning-tokens"] {
background-image: url(icons/amount.svg); background-image: url(icons/amount.svg);
} }
#top,
#bottom { #bottom {
top: -38px; top: -38px;
right: 20px; right: 20px;
width: 28px; width: 20px;
height: 28px; height: 20px;
background-image: url(icons/down.svg); background-image: url(icons/up.svg);
transition: 150ms; transition: 150ms;
} }
#bottom {
transform: rotate(180deg);
}
#top:not(.hidden)+#bottom {
right: 40px;
}
#upload, #upload,
#add, #add,
#send { #send {

2
static/css/icons/down.svg → static/css/icons/up.svg
View File

@@ -3,5 +3,5 @@
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/> <g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path d="M12 17L12 7M12 17L8 13M12 17L16 13" stroke="#cad3f5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </g> <g id="SVGRepo_iconCarrier"> <path d="M12 4V20M12 4L18 10M12 4L6 10" stroke="#cad3f5" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 586 B

After

Width:  |  Height:  |  Size: 581 B

1
static/index.html
View File

@@ -27,6 +27,7 @@
<div id="page"> <div id="page">
<div id="messages"></div> <div id="messages"></div>
<div id="chat"> <div id="chat">
<button id="top" class="hidden" title="Scroll to top"></button>
<button id="bottom" class="hidden" title="Scroll to bottom"></button> <button id="bottom" class="hidden" title="Scroll to bottom"></button>
<div id="resize-bar"></div> <div id="resize-bar"></div>

20
static/js/chat.js
View File

@@ -3,6 +3,7 @@
$messages = document.getElementById("messages"), $messages = document.getElementById("messages"),
$chat = document.getElementById("chat"), $chat = document.getElementById("chat"),
$message = document.getElementById("message"), $message = document.getElementById("message"),
$top = document.getElementById("top"),
$bottom = document.getElementById("bottom"), $bottom = document.getElementById("bottom"),
$resizeBar = document.getElementById("resize-bar"), $resizeBar = document.getElementById("resize-bar"),
$attachments = document.getElementById("attachments"), $attachments = document.getElementById("attachments"),
@@ -45,11 +46,8 @@
function updateScrollButton() { function updateScrollButton() {
const bottom = $messages.scrollHeight - ($messages.scrollTop + $messages.offsetHeight); const bottom = $messages.scrollHeight - ($messages.scrollTop + $messages.offsetHeight);
if (bottom >= 80) { $top.classList.toggle("hidden", $messages.scrollTop < 80);
$bottom.classList.remove("hidden"); $bottom.classList.toggle("hidden", bottom < 80);
} else {
$bottom.classList.add("hidden");
}
} }
function scroll(force = false, instant = false) { function scroll(force = false, instant = false) {
@@ -1230,7 +1228,17 @@
}); });
$bottom.addEventListener("click", () => { $bottom.addEventListener("click", () => {
scroll(true); $messages.scroll({
top: $messages.scrollHeight,
behavior: "smooth",
});
});
$top.addEventListener("click", () => {
$messages.scroll({
top: 0,
behavior: "smooth",
});
}); });
$resizeBar.addEventListener("mousedown", event => { $resizeBar.addEventListener("mousedown", event => {