I’m using the latest framework7 version 3.5.2 with Vue in a Cordova app.
I’ve set the html meta tag: <meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
When displaying a full size page, although the framework7-root has the proper safe-area-inset-top set for iPhone X, the page inside it does not. Rather, the page will overflow its parent root and take over the entire screen and notch. This issue occurs either with or without a navbar.
Here are some screenshots. Unfortunately, I had to mash them into one screenshot, because this forum won’t let new users upload more than 1 image.
First, here are 3 screenshots without a navbar, highlighting different elements. Perhaps if the page-content had a margin-top: env(safe-area-inset-top), then it might fix the issue.)
Next, here are 3 screenshots with navbar, which is completely obstructed. In the last screenshot, I manually added a margin-top to show the navbar properly.
<template>
<!-- Main Framework7 App component where we pass Framework7 params -->
<f7-app :params="f7params">
<f7-statusbar></f7-statusbar>
<lock-screen v-if="locked" />
<!-- initial page is specified in routes.js -->
<f7-view main url="/" v-show="!locked" />
</f7-app>
</template>
The LockScreen component has an <f7-page> as its root element.
It displays fine, but for iPhone X I had to add some extra styling, as I mentioned in my earlier post.
Based on your guidance, I tried changing it to:
<template>
<!-- Main Framework7 App component where we pass Framework7 params -->
<f7-app :params="f7params">
<f7-statusbar></f7-statusbar>
<f7-view v-show="locked">
<lock-screen />
</f7-view>
<!-- initial page is specified in routes.js -->
<f7-view main url="/" v-show="!locked" />
</f7-app>
</template>
But in this latter approach, the screen is blank when locked is true.
How should I design my app layout to support lock screen? I should not that originally I tried implementing it as a route, but it creates a bunch of problems, because it cuts a bunch of separations of concerns.
So the iPhone X styling of the page looks good now that it’s in a view.
But there is another styling issue with a sheet I’m using. In the screenshot below, the bottom sheet contains a flexbox of rows. In the bottom row (containing backspace, 0, enter), I had to add a bottom padding. And then to make up for the loss of space, I had to make the sheet height greater, as follows: