tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Releases 2 Packages Activity Actions

fix: horizontal scroll issue on mobile

Browse source 
#1854
This commit is contained in:
Timothy J. Baek 2024-04-30 15:08:34 -07:00
parent 35437fb3a3
commit 27ff386115
2 changed files with 18 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/lib/components/chat/MessageInput/Suggestions.svelte
View file

@ -4,10 +4,10 @@
let prompts = []; let prompts = [];
$: prompts = $: prompts = suggestionPrompts;
suggestionPrompts.length <= 4 // suggestionPrompts.length <= 4
? suggestionPrompts // ? suggestionPrompts
: suggestionPrompts.sort(() => Math.random() - 0.5).slice(0, 4); // : suggestionPrompts.sort(() => Math.random() - 0.5).slice(0, 4);
</script> </script>
<div class="w-full"> <div class="w-full">

27
src/lib/components/layout/Sidebar.svelte
View file

@ -53,28 +53,29 @@
show = window.innerWidth > BREAKPOINT; show = window.innerWidth > BREAKPOINT;
await chats.set(await getChatList(localStorage.token)); await chats.set(await getChatList(localStorage.token));
let touchstartX = 0; let touchstart;
let touchendX = 0; let touchend;
function checkDirection() { function checkDirection() {
const screenWidth = window.innerWidth; const screenWidth = window.innerWidth;
const swipeDistance = Math.abs(touchendX - touchstartX); const swipeDistance = Math.abs(touchend.screenX - touchstart.screenX);
if (swipeDistance >= screenWidth / 4) { if (touchstart.clientX < 40 && swipeDistance >= screenWidth / 4) {
if (touchendX < touchstartX) { if (touchend.screenX < touchstart.screenX) {
show = false; show = false;
} }
if (touchendX > touchstartX) { if (touchend.screenX > touchstart.screenX) {
show = true; show = true;
} }
} }
} }
const onTouchStart = (e) => { const onTouchStart = (e) => {
touchstartX = e.changedTouches[0].screenX; touchstart = e.changedTouches[0];
console.log(touchstart.clientX);
}; };
const onTouchEnd = (e) => { const onTouchEnd = (e) => {
touchendX = e.changedTouches[0].screenX; touchend = e.changedTouches[0];
checkDirection(); checkDirection();
}; };
@ -84,14 +85,14 @@
} }
}; };
document.addEventListener('touchstart', onTouchStart); window.addEventListener('touchstart', onTouchStart);
document.addEventListener('touchend', onTouchEnd); window.addEventListener('touchend', onTouchEnd);
window.addEventListener('resize', onResize); window.addEventListener('resize', onResize);
return () => { return () => {
document.removeEventListener('touchstart', onTouchStart); window.removeEventListener('touchstart', onTouchStart);
document.removeEventListener('touchend', onTouchEnd); window.removeEventListener('touchend', onTouchEnd);
document.removeEventListener('resize', onResize); window.removeEventListener('resize', onResize);
}; };
}); });