hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Compare commits

base: hippoz:8b14ff2c96e288003ae6a87f5e5c490334c940c7
Branches Tags
hippoz:master
...
compare: hippoz:f8af8a78fcb72bb882dd30e28e80d38ab8ec3709
Branches Tags
hippoz:master

2 commits
8b14ff2c96 ... f8af8a78fc

Author SHA1 Message Date
hippoz
f8af8a78fc
don't automatically focus message input on mobile 2022-09-02 14:55:15 +03:00
hippoz
ae7875955a
use visualviewport instead of innerheight 2022-09-02 14:47:53 +03:00
2 changed files with 24 additions and 9 deletions
Show stats Expand all files Collapse all files

12
frontend/src/components/MessageInput.svelte
View file

@ -97,14 +97,20 @@
// Focus the text area when the component first loads, or when the user selects another channel // Focus the text area when the component first loads, or when the user selects another channel
const focusTextarea = () => messageTextarea && messageTextarea.focus(); const focusTextarea = () => {
if (messageTextarea && getItem("ui:useragent:formFactor") !== "touch") {
messageTextarea.focus();
}
};
onMount(focusTextarea); onMount(focusTextarea);
unsubscribers.push(selectedChannel.subscribe(focusTextarea)); unsubscribers.push(selectedChannel.watch(focusTextarea));
// Handle the setMessageInput event // Handle the setMessageInput event
unsubscribers.push(setMessageInputEvent.watch((value) => { unsubscribers.push(setMessageInputEvent.watch((value) => {
messageInput = value; messageInput = value;
focusTextarea(); if (messageTextarea) {
messageTextarea.focus();
}
})); }));

21
frontend/src/responsive.js
View file

@ -9,12 +9,21 @@ function initViewportSizeHandler() {
root.style.setProperty("--viewportWidth", "100dvw"); root.style.setProperty("--viewportWidth", "100dvw");
root.style.setProperty("--viewportHeight", "100dvh"); root.style.setProperty("--viewportHeight", "100dvh");
} else if (method === "javascriptResponsive") { } else if (method === "javascriptResponsive") {
const updateUnits = () => { if (window.visualViewport) {
root.style.setProperty("--viewportWidth", `${window.innerWidth}px`); const updateUnits = () => {
root.style.setProperty("--viewportHeight", `${window.innerHeight}px`); root.style.setProperty("--viewportWidth", `${window.visualViewport.width}px`);
}; root.style.setProperty("--viewportHeight", `${window.visualViewport.height}px`);
window.addEventListener("resize", updateUnits); };
updateUnits(); window.visualViewport.addEventListener("resize", updateUnits);
updateUnits();
} else {
const updateUnits = () => {
root.style.setProperty("--viewportWidth", `${window.innerWidth}px`);
root.style.setProperty("--viewportHeight", `${window.innerHeight}px`);
};
window.addEventListener("resize", updateUnits);
updateUnits();
}
} else if (method === "normalUnits") { } else if (method === "normalUnits") {
root.style.setProperty("--viewportWidth", "100vw"); root.style.setProperty("--viewportWidth", "100vw");
root.style.setProperty("--viewportHeight", "100vh"); root.style.setProperty("--viewportHeight", "100vh");