Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-10-27 21:18:30 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Bottom nav hiding on keyboard show, use the existing solution

Browse Source
This commit is contained in:
Kalle
2026-10-11 19:44:26 +03:00
parent 97fcebbea6
commit e4baaa5d8c
3 changed files with 16 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/hooks/useVisualViewport.ts
View File

@@ -1,9 +1,12 @@
import * as React from "react";
import { keyboardIsOpen } from "~/utils/visual-viewport";
const HEIGHT_PROPERTY = "--visual-viewport-height";
const OFFSET_TOP_PROPERTY = "--visual-viewport-offset-top";
const KEYBOARD_OPEN_ATTRIBUTE = "data-keyboard-open";
// Syncs the ACTUAL visual viewport to two CSS variables so elements can respect the space taken by the mobile keyboard
// Syncs the ACTUAL visual viewport to two CSS variables (and whether the mobile keyboard is open to an attribute on <html>)
// so elements can respect the space taken by the mobile keyboard
// (not written on mount: until the viewport changes the CSS fallbacks match, and every write restyles the whole document)
export function useVisualViewport() {
React.useEffect(() => {
@@ -23,6 +26,10 @@ export function useVisualViewport() {
const style = document.documentElement.style;
style.setProperty(HEIGHT_PROPERTY, `${height}px`);
style.setProperty(OFFSET_TOP_PROPERTY, `${offsetTop}px`);
document.documentElement.toggleAttribute(
KEYBOARD_OPEN_ATTRIBUTE,
keyboardIsOpen(),
);
};
viewport.addEventListener("resize", update);
@@ -33,6 +40,7 @@ export function useVisualViewport() {
viewport.removeEventListener("scroll", update);
document.documentElement.style.removeProperty(HEIGHT_PROPERTY);
document.documentElement.style.removeProperty(OFFSET_TOP_PROPERTY);
document.documentElement.removeAttribute(KEYBOARD_OPEN_ATTRIBUTE);
};
}, []);
}

25
app/styles/common.css
View File

@@ -670,27 +670,10 @@
place-items: center;
}
/* iOS can't pin the tab bar on top of the virtual keyboard, so it gets out of the way while typing */
@media (pointer: coarse) {
body:has(
:is(
input:is(
:not([type]),
[type="text"],
[type="search"],
[type="email"],
[type="url"],
[type="tel"],
[type="password"],
[type="number"]
),
textarea,
[contenteditable]:not([contenteditable="false"])
):not([readonly], [inputmode="none"]):focus
) {
--mobile-nav-height: 0px;
--mobile-tab-bar-display: none;
}
/* iOS can't pin the tab bar on top of the virtual keyboard, so it gets out of the way while the keyboard is open */
html[data-keyboard-open] body {
--mobile-nav-height: 0px;
--mobile-tab-bar-display: none;
}
@media screen and (max-width: 599px) {

4
app/utils/visual-viewport.ts
View File

@@ -44,5 +44,7 @@ export function keyboardIsOpen() {
const viewport = window.visualViewport;
if (!viewport) return false;
return window.innerHeight - viewport.height > KEYBOARD_MIN_HEIGHT;
return (
window.innerHeight - viewport.height * viewport.scale > KEYBOARD_MIN_HEIGHT
);
}