From 4c6d158560e6d0629aa0aa66ce944a231f47855f Mon Sep 17 00:00:00 2001 From: Michael Schramm Date: Mon, 3 Jan 2022 20:18:41 +0100 Subject: [PATCH] fix android screen size fix https://github.com/ohmyform/ohmyform/issues/114 --- CHANGELOG.md | 1 + assets/global.scss | 6 ++++++ components/form/layouts/card/index.tsx | 1 + components/form/layouts/slider/index.tsx | 3 +-- pages/_app.tsx | 15 +++++++++++++++ 5 files changed, 24 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1381b50..2f222a9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,6 +34,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/). - fix problem with node-prune on production build - translation for prev / continue during form submission - reload form list after adding new one (https://github.com/ohmyform/ohmyform/issues/139) +- android screen size fix (https://github.com/ohmyform/ohmyform/issues/114) ### Security diff --git a/assets/global.scss b/assets/global.scss index bc41a8e..46af7f5 100644 --- a/assets/global.scss +++ b/assets/global.scss @@ -25,12 +25,18 @@ } } +.full-height { + height: 100vh; + height: calc(var(--vh, 1vh) * 100); +} + .ant-spin-nested-loading > div > .ant-spin { max-height: unset; } .swiper-container { height: 100vh; + height: calc(var(--vh, 1vh) * 100); .swiper-wrapper { position: fixed diff --git a/components/form/layouts/card/index.tsx b/components/form/layouts/card/index.tsx index 16a73ae..178e031 100644 --- a/components/form/layouts/card/index.tsx +++ b/components/form/layouts/card/index.tsx @@ -17,6 +17,7 @@ const MyCard = styled.div<{ background: string }>` background: ${(props) => darken(0.1, props.background)}; height: 100%; min-height: 100vh; + min-height: calc(var(--vh, 1vh) * 100); padding: 32px; diff --git a/components/form/layouts/slider/index.tsx b/components/form/layouts/slider/index.tsx index 6ed056b..3c731cc 100644 --- a/components/form/layouts/slider/index.tsx +++ b/components/form/layouts/slider/index.tsx @@ -46,10 +46,9 @@ export const SliderLayout: React.FC = (props) => { return (
diff --git a/pages/_app.tsx b/pages/_app.tsx index 89a2e66..59ca673 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -22,6 +22,21 @@ const App: AppType = ({ Component, pageProps }) => { } }) + useEffect(() => { + if (!/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) { + return + } + + const resize = () => { + const vh = window.innerHeight * 0.01; + document.documentElement.style.setProperty('--vh', `${vh}px`); + } + + window.addEventListener('resize', resize) + + return () => window.removeEventListener('resize', resize) + }) + return (