From 27ff3861154c0c95cf8cbc448b99cca105dc2c82 Mon Sep 17 00:00:00 2001 From: "Timothy J. Baek" Date: Tue, 30 Apr 2024 15:08:34 -0700 Subject: [PATCH] fix: horizontal scroll issue on mobile #1854 --- .../chat/MessageInput/Suggestions.svelte | 8 +++--- src/lib/components/layout/Sidebar.svelte | 27 ++++++++++--------- 2 files changed, 18 insertions(+), 17 deletions(-) diff --git a/src/lib/components/chat/MessageInput/Suggestions.svelte b/src/lib/components/chat/MessageInput/Suggestions.svelte index dd37cc636..e68caafa0 100644 --- a/src/lib/components/chat/MessageInput/Suggestions.svelte +++ b/src/lib/components/chat/MessageInput/Suggestions.svelte @@ -4,10 +4,10 @@ let prompts = []; - $: prompts = - suggestionPrompts.length <= 4 - ? suggestionPrompts - : suggestionPrompts.sort(() => Math.random() - 0.5).slice(0, 4); + $: prompts = suggestionPrompts; + // suggestionPrompts.length <= 4 + // ? suggestionPrompts + // : suggestionPrompts.sort(() => Math.random() - 0.5).slice(0, 4);
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte index 6764e1a15..5be325f87 100644 --- a/src/lib/components/layout/Sidebar.svelte +++ b/src/lib/components/layout/Sidebar.svelte @@ -53,28 +53,29 @@ show = window.innerWidth > BREAKPOINT; await chats.set(await getChatList(localStorage.token)); - let touchstartX = 0; - let touchendX = 0; + let touchstart; + let touchend; function checkDirection() { const screenWidth = window.innerWidth; - const swipeDistance = Math.abs(touchendX - touchstartX); - if (swipeDistance >= screenWidth / 4) { - if (touchendX < touchstartX) { + const swipeDistance = Math.abs(touchend.screenX - touchstart.screenX); + if (touchstart.clientX < 40 && swipeDistance >= screenWidth / 4) { + if (touchend.screenX < touchstart.screenX) { show = false; } - if (touchendX > touchstartX) { + if (touchend.screenX > touchstart.screenX) { show = true; } } } const onTouchStart = (e) => { - touchstartX = e.changedTouches[0].screenX; + touchstart = e.changedTouches[0]; + console.log(touchstart.clientX); }; const onTouchEnd = (e) => { - touchendX = e.changedTouches[0].screenX; + touchend = e.changedTouches[0]; checkDirection(); }; @@ -84,14 +85,14 @@ } }; - document.addEventListener('touchstart', onTouchStart); - document.addEventListener('touchend', onTouchEnd); + window.addEventListener('touchstart', onTouchStart); + window.addEventListener('touchend', onTouchEnd); window.addEventListener('resize', onResize); return () => { - document.removeEventListener('touchstart', onTouchStart); - document.removeEventListener('touchend', onTouchEnd); - document.removeEventListener('resize', onResize); + window.removeEventListener('touchstart', onTouchStart); + window.removeEventListener('touchend', onTouchEnd); + window.removeEventListener('resize', onResize); }; });