Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-12-20 02:38:53 +00:00
Code Activity

Safe area: main content and onboarding (#26813)

Browse Source 
* foundation: define --safe-area-content-inset-*; adjust drawer width; apply top inset to pre-login templates

* Set default for var

* Update demo template

* Set default to avoid issues

* Allow for left and right insets or 560px

* Remove
This commit is contained in:
Aidan Timson
2025-09-07 11:25:29 +01:00
committed by GitHub
parent 688b8e5229
commit 5f140c5fc4
6 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo/src/html/index.html.template
View File

@@ -68,7 +68,7 @@
} }
#ha-launch-screen .ha-launch-screen-spacer-top { #ha-launch-screen .ha-launch-screen-spacer-top {
flex: 1; flex: 1;
margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 48px) + 46px ); margin-top: calc( 2 * max(var(--safe-area-inset-top, 0px), 48px) + 46px );
padding-top: 48px; padding-top: 48px;
} }
#ha-launch-screen .ha-launch-screen-spacer-bottom { #ha-launch-screen .ha-launch-screen-spacer-bottom {

3
landing-page/src/html/index.html.template
View File

@@ -19,8 +19,9 @@
height: auto; height: auto;
padding: 32px 0; padding: 32px 0;
} }
.content { .content {
max-width: 560px; max-width: min(560px, calc(100vw - var(--safe-area-inset-right, 0px) - var(--safe-area-inset-left, 0px)));
margin: 0 auto; margin: 0 auto;
padding: 0 16px; padding: 0 16px;
box-sizing: content-box; box-sizing: content-box;

1
src/html/authorize.html.template
View File

@@ -35,6 +35,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 32px; margin-bottom: 32px;
padding-top: var(--safe-area-inset-top);
} }
.header img { .header img {

2
src/html/index.html.template
View File

@@ -44,7 +44,7 @@
} }
#ha-launch-screen .ha-launch-screen-spacer-top { #ha-launch-screen .ha-launch-screen-spacer-top {
flex: 1; flex: 1;
margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 48px) + 46px ); margin-top: calc( 2 * max(var(--safe-area-inset-top, 0px), 48px) + 46px );
padding-top: 48px; padding-top: 48px;
} }
#ha-launch-screen .ha-launch-screen-spacer-bottom { #ha-launch-screen .ha-launch-screen-spacer-bottom {

4
src/html/onboarding.html.template
View File

@@ -19,8 +19,9 @@
height: auto; height: auto;
padding: 32px 0; padding: 32px 0;
} }
.content { .content {
max-width: 560px; max-width: min(560px, calc(100vw - var(--safe-area-inset-right, 0px) - var(--safe-area-inset-left, 0px)));
margin: 0 auto; margin: 0 auto;
padding: 0 16px; padding: 0 16px;
box-sizing: content-box; box-sizing: content-box;
@@ -32,6 +33,7 @@
justify-content: flex-start; justify-content: flex-start;
margin-bottom: 32px; margin-bottom: 32px;
margin-left: 32px; margin-left: 32px;
padding-top: var(--safe-area-inset-top);
} }
.header img { .header img {

3
src/layouts/home-assistant-main.ts
View File

@@ -146,6 +146,8 @@ export class HomeAssistantMain extends LitElement {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
--mdc-drawer-width: 56px; --mdc-drawer-width: 56px;
--mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width)); --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width));
--safe-area-content-inset-left: 0px;
--safe-area-content-inset-right: var(--safe-area-inset-right);
} }
:host([expanded]) { :host([expanded]) {
--mdc-drawer-width: calc(256px + var(--safe-area-inset-left)); --mdc-drawer-width: calc(256px + var(--safe-area-inset-left));
@@ -153,6 +155,7 @@ export class HomeAssistantMain extends LitElement {
:host([modal]) { :host([modal]) {
--mdc-drawer-width: unset; --mdc-drawer-width: unset;
--mdc-top-app-bar-width: unset; --mdc-top-app-bar-width: unset;
--safe-area-content-inset-left: var(--safe-area-inset-left);
} }
partial-panel-resolver, partial-panel-resolver,
ha-sidebar { ha-sidebar {