soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

bessere sichtbarkeit für die kamera-buttons

Browse Source
This commit is contained in:
Codex Agent
2025-12-20 19:19:07 +01:00
parent d4c7d3f93a
commit 1e6027f438
1 changed files with 30 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
resources/js/guest/pages/UploadPage.tsx
View File

@@ -200,6 +200,29 @@ const [canUpload, setCanUpload] = useState(true);
};
}, []);
useEffect(() => {
if (typeof window === 'undefined') {
return;
}
const root = document.documentElement;
const updateViewportVar = () => {
const viewport = window.visualViewport?.height ?? window.innerHeight;
root.style.setProperty('--guest-viewport-height', `${viewport}px`);
};
updateViewportVar();
window.visualViewport?.addEventListener('resize', updateViewportVar);
window.visualViewport?.addEventListener('scroll', updateViewportVar);
window.addEventListener('resize', updateViewportVar);
return () => {
window.visualViewport?.removeEventListener('resize', updateViewportVar);
window.visualViewport?.removeEventListener('scroll', updateViewportVar);
window.removeEventListener('resize', updateViewportVar);
};
}, []);
const updateNavVisibility = useCallback(() => {
if (typeof document === 'undefined') {
return;
@@ -1194,6 +1217,7 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
const countdownDegrees = Math.round(countdownProgress * 360);
const controlIconButtonBase =
'flex h-10 w-10 items-center justify-center rounded-full border border-white/25 bg-white/10 text-white shadow-sm backdrop-blur transition hover:border-white/40 hover:bg-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60';
const cameraControlsInset = 'calc(env(safe-area-inset-bottom, 0px) + 72px)';
return renderWithDialog(
<>
@@ -1218,7 +1242,7 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
ref={cameraViewportRef}
className="relative w-full"
style={{
height: 'clamp(60vh, calc(100vh - 220px), 82vh)',
height: `clamp(60vh, calc(var(--guest-viewport-height, 100dvh) - 220px - ${cameraControlsInset}), 82vh)`,
minHeight: '60vh',
maxHeight: '88vh',
}}
@@ -1277,8 +1301,11 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
</div>
)}
<div className="pointer-events-none absolute inset-x-0 bottom-4 z-30 flex justify-center">
<div className="pointer-events-auto flex items-center gap-2 rounded-full border border-white/20 bg-black/40 px-3 py-2 backdrop-blur">
<div className="pointer-events-none absolute inset-x-0 bottom-2 z-30 flex justify-center">
<div
className="pointer-events-auto flex items-center gap-2 rounded-full border border-white/20 bg-black/40 px-3 py-2 backdrop-blur"
style={{ marginBottom: 'env(safe-area-inset-bottom, 0px)' }}
>
<Button
size="icon"
variant="ghost"