jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +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 {
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%);
z-index: 2;
transition: box-shadow 0.3s ease-out;
padding-top: env(safe-area-inset-top);
}
:host([scrolled]) .header {
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
@ -1044,16 +1045,14 @@ class HUIRoot extends LitElement {
color: var(--error-color);
}
#view {
margin-top: var(--header-height);
height: calc(
100vh - var(--header-height) - env(safe-area-inset-top) -
env(safe-area-inset-bottom)
);
margin-top: calc(var(--header-height) + env(safe-area-inset-top));
height: calc(100vh - var(--header-height) - env(safe-area-inset-top));
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
background: var(
--lovelace-background,
var(--primary-background-color)
);
display: flex;
overflow: auto;
}
/**
@ -1061,10 +1060,11 @@ class HUIRoot extends LitElement {
*/
.edit-mode #view {
height: calc(
100vh - var(--header-height) - 48px - env(safe-area-inset-top) -
env(safe-area-inset-bottom)
100vh - var(--header-height) - 48px - env(safe-area-inset-top)
);
margin-top: calc(
var(--header-height) + 48px + env(safe-area-inset-top)
);
margin-top: calc(var(--header-height) + 48px);
}
#view > * {
/**
@ -1077,6 +1077,8 @@ class HUIRoot extends LitElement {
*/
flex: 1 1 100%;
max-width: 100%;
padding-bottom: env(safe-area-inset-bottom);
display: block;
}
.hide-tab {
display: none;