IT4Change/ohmyform-ui
3
0
Fork 0
mirror of https://github.com/IT4Change/ohmyform-ui.git synced 2025-12-13 09:45:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix android screen size

Browse Source 
fix https://github.com/ohmyform/ohmyform/issues/114
This commit is contained in:
Michael Schramm 2022-01-03 20:18:41 +01:00
parent 1f0926c904
commit 4c6d158560
5 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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

6
assets/global.scss
View File

@ -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

1
components/form/layouts/card/index.tsx
View File

@ -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;

3
components/form/layouts/slider/index.tsx
View File

@ -46,10 +46,9 @@ export const SliderLayout: React.FC<LayoutProps> = (props) => {
return (
<div
className={'swiper-container'}
style={{
background: design.colors.background,
overflow: 'hidden',
height: '100vh',
}}
>
<Omf />

15
pages/_app.tsx
View File

@ -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 (
<ApolloProvider client={getClient()}>
<Head>