jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 11:16:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Handle safe areas (#16032)

Browse Source
This commit is contained in:
Bram Kragten 2023-04-03 15:52:02 +02:00 committed by GitHub
parent f61f0e4e52
commit 19ab29d130
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ha-drawer.ts
View File

@ -29,6 +29,9 @@ export class HaDrawer extends DrawerBase {
.mdc-drawer { .mdc-drawer {
top: 0; top: 0;
} }
.mdc-drawer.mdc-drawer--modal.mdc-drawer--open {
z-index: 200;
}
`, `,
]; ];
} }

20
src/panels/lovelace/hui-root.ts
View File

@ -963,6 +963,7 @@ class HUIRoot extends LitElement {
width: var(--mdc-top-app-bar-width, 100%); width: var(--mdc-top-app-bar-width, 100%);
z-index: 2; z-index: 2;
transition: box-shadow 0.3s ease-out; transition: box-shadow 0.3s ease-out;
padding-top: env(safe-area-inset-top);
} }
:host([scrolled]) .header { :host([scrolled]) .header {
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
@ -1044,16 +1045,14 @@ class HUIRoot extends LitElement {
color: var(--error-color); color: var(--error-color);
} }
#view { #view {
margin-top: var(--header-height); margin-top: calc(var(--header-height) + env(safe-area-inset-top));
height: calc( height: calc(100vh - var(--header-height) - env(safe-area-inset-top));
100vh - var(--header-height) - env(safe-area-inset-top) - padding-left: env(safe-area-inset-left);
env(safe-area-inset-bottom) padding-right: env(safe-area-inset-right);
);
background: var( background: var(
--lovelace-background, --lovelace-background,
var(--primary-background-color) var(--primary-background-color)
); );
display: flex;
overflow: auto; overflow: auto;
} }
/** /**
@ -1061,10 +1060,11 @@ class HUIRoot extends LitElement {
*/ */
.edit-mode #view { .edit-mode #view {
height: calc( height: calc(
100vh - var(--header-height) - 48px - env(safe-area-inset-top) - 100vh - var(--header-height) - 48px - env(safe-area-inset-top)
env(safe-area-inset-bottom) );
margin-top: calc(
var(--header-height) + 48px + env(safe-area-inset-top)
); );
margin-top: calc(var(--header-height) + 48px);
} }
#view > * { #view > * {
/** /**
@ -1077,6 +1077,8 @@ class HUIRoot extends LitElement {
*/ */
flex: 1 1 100%; flex: 1 1 100%;
max-width: 100%; max-width: 100%;
padding-bottom: env(safe-area-inset-bottom);
display: block;
} }
.hide-tab { .hide-tab {
display: none; display: none;