Hack for iphone 100vh issue: put footer on top and reserve space at the bottom optimistically

This commit is contained in:
ochafik 2023-03-26 09:22:35 +01:00
commit 89190e9c22

View file

@ -476,30 +476,20 @@ export function App({initialState, fs}: {initialState: State, fs: FS}) {
} }
} }
const isIPhone = /iPhone/.test(navigator.userAgent)
return ( return (
<ModelContext.Provider value={model}> <ModelContext.Provider value={model}>
<FSContext.Provider value={fs}> <FSContext.Provider value={fs}>
<div className='flex flex-column' style={{height: '100vh'}}> <div className='flex flex-column' style={{
<div className="" // height: '100vh'
// style={{ // maxHeight: '-webkit-fill-available',
// backgroundImage: 'url("logo192.png")', height: isIPhone ? "calc(100vh - 80px - env(safe-area-inset-bottom) - env(safe-area-inset-top))" : '100vh'
// backgroundPositionX: 'left', }}>
// backgroundPositionY: 'top', {isIPhone && <Footer />}
// backgroundRepeat: 'no-repeat', <div className="">
// }}
>
{/* <h1>
OpenSCAD
</h1> */}
<div className='flex flex-row' style={{ <div className='flex flex-row' style={{
// justifyContent: 'center',
margin: '5px', margin: '5px',
// marginTop: '70px',
}}> }}>
{/* <span style={{flex: 1}} /> */}
{state.view.layout.mode === 'multi' {state.view.layout.mode === 'multi'
? <div className='flex flex-row gap-1' style={{ ? <div className='flex flex-row gap-1' style={{
@ -553,7 +543,7 @@ export function App({initialState, fs}: {initialState: State, fs: FS}) {
{/* <CustomizerPanel className={`${getPanelClasses('customizer')} absolute-fill`} style={getPanelStyle('customizer')} /> */} {/* <CustomizerPanel className={`${getPanelClasses('customizer')} absolute-fill`} style={getPanelStyle('customizer')} /> */}
</div> </div>
<Footer /> {!isIPhone && <Footer />}
</div> </div>
</FSContext.Provider> </FSContext.Provider>
</ModelContext.Provider> </ModelContext.Provider>