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

Safe area: sidebar and notification drawer (#26853)

Browse Source 
* sidebar: account for safe-area top inset in menu height/padding; adjust list height calc

* Defaults

* Defaults

* Restore

* Remove test

* Adjust

* Adjust

* Only apply on smaller layouts

* Fix

* Restore

* Restore

* No default in this case

* Restore

* Gain back some space

* Fix

* Adjust

* Tweak

* Calculate when mobile

* Use fallbacks for calculations and others anyway
This commit is contained in:
Aidan Timson
2025-09-09 10:59:24 +01:00
committed by GitHub
parent dec9d304da
commit cc70eb46c9
4 changed files with 44 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/ha-header-bar.ts
View File

@@ -38,6 +38,7 @@ export class HaHeaderBar extends LitElement {
.mdc-top-app-bar {
position: static;
color: var(--mdc-theme-on-primary, #fff);
padding: var(--header-bar-padding);
}
.mdc-top-app-bar__section.mdc-top-app-bar__section--align-start {
flex: 1;

28
src/components/ha-sidebar.ts
View File

@@ -666,7 +666,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
tooltip.style.display = "block";
tooltip.style.position = "fixed";
tooltip.style.top = `${top}px`;
tooltip.style.left = `${item.offsetLeft + item.clientWidth + 8}px`;
tooltip.style.left = `calc(${item.offsetLeft + item.clientWidth + 8}px + var(--safe-area-inset-left, 0px))`;
}
private _hideTooltip() {
@@ -705,9 +705,10 @@ class HaSidebar extends SubscribeMixin(LitElement) {
background-color: var(--sidebar-background-color);
width: 100%;
box-sizing: border-box;
padding-bottom: calc(14px + var(--safe-area-inset-bottom, 0px));
}
.menu {
height: var(--header-height);
height: calc(var(--header-height) + var(--safe-area-inset-top, 0px));
box-sizing: border-box;
display: flex;
padding: 0 4px;
@@ -725,12 +726,16 @@ class HaSidebar extends SubscribeMixin(LitElement) {
);
font-size: var(--ha-font-size-xl);
align-items: center;
padding-left: calc(4px + var(--safe-area-inset-left));
padding-inline-start: calc(4px + var(--safe-area-inset-left));
padding-left: calc(4px + var(--safe-area-inset-left, 0px));
padding-inline-start: calc(4px + var(--safe-area-inset-left, 0px));
padding-inline-end: initial;
padding-top: var(--safe-area-inset-top, 0px);
}
:host([expanded]) .menu {
width: calc(256px + var(--safe-area-inset-left));
width: calc(256px + var(--safe-area-inset-left, 0px));
}
:host([narrow][expanded]) .menu {
width: 100%;
}
.menu ha-icon-button {
color: var(--sidebar-icon-color);
@@ -756,22 +761,23 @@ class HaSidebar extends SubscribeMixin(LitElement) {
ha-fade-in,
ha-md-list {
height: calc(
100% - var(--header-height) - 132px - var(--safe-area-inset-bottom)
100% - var(--header-height) - var(--safe-area-inset-top, 0px) -
132px - var(--safe-area-inset-bottom, 0px)
);
}
ha-fade-in {
padding: 4px 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
ha-md-list {
padding: 4px 0;
box-sizing: border-box;
overflow-x: hidden;
background: none;
margin-left: var(--safe-area-inset-left);
margin-left: var(--safe-area-inset-left, 0px);
}
ha-md-list-item {
@@ -791,7 +797,9 @@ class HaSidebar extends SubscribeMixin(LitElement) {
}
:host([expanded]) ha-md-list-item {
width: 248px;
width: calc(248px - var(--safe-area-inset-left));
}
:host([narrow][expanded]) ha-md-list-item {
width: calc(240px - var(--safe-area-inset-left, 0px));
}
ha-md-list-item.selected {

30
src/dialogs/notifications/notification-drawer.ts
View File

@@ -49,7 +49,7 @@ export class HuiNotificationDrawer extends LitElement {
);
this.style.setProperty(
"--mdc-drawer-width",
narrow ? window.innerWidth + "px" : "500px"
`min(100vw, calc(${narrow ? window.innerWidth + "px" : "500px"} + var(--safe-area-inset-left, 0px)))`
);
this._open = true;
}
@@ -152,24 +152,40 @@ export class HuiNotificationDrawer extends LitElement {
ha-header-bar {
--mdc-theme-on-primary: var(--primary-text-color);
--mdc-theme-primary: var(--primary-background-color);
--header-bar-padding: var(--safe-area-inset-top, 0px) 0 0
var(--safe-area-inset-left, 0px);
border-bottom: 1px solid var(--divider-color);
display: block;
}
@media all and (max-width: 450px), all and (max-height: 500px) {
ha-header-bar {
--header-bar-padding: var(--safe-area-inset-top, 0px)
var(--safe-area-inset-right, 0px) 0 var(--safe-area-inset-left, 0px);
}
}
.notifications {
overflow-y: auto;
padding-top: 16px;
padding-left: var(--safe-area-inset-left);
padding-right: var(--safe-area-inset-right);
padding-inline-start: var(--safe-area-inset-left);
padding-inline-end: var(--safe-area-inset-right);
padding-bottom: var(--safe-area-inset-bottom);
height: calc(100% - 1px - var(--header-height));
padding-left: var(--safe-area-inset-left, 0px);
padding-inline-start: var(--safe-area-inset-left, 0px);
padding-bottom: var(--safe-area-inset-bottom, 0px);
height: calc(
100% - 1px - var(--header-height) - var(--safe-area-inset-top, 0px)
);
box-sizing: border-box;
background-color: var(--primary-background-color);
color: var(--primary-text-color);
}
@media all and (max-width: 450px), all and (max-height: 500px) {
.notifications {
padding-right: var(--safe-area-inset-right, 0px);
padding-inline-end: var(--safe-area-inset-right, 0px);
}
}
.notification {
padding: 0 16px 16px;
}

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

@@ -144,13 +144,13 @@ export class HomeAssistantMain extends LitElement {
color: var(--primary-text-color);
/* remove the grey tap highlights in iOS on the fullscreen touch targets */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
--mdc-drawer-width: 56px;
--mdc-drawer-width: calc(56px + var(--safe-area-inset-left, 0px));
--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]) {
--mdc-drawer-width: calc(256px + var(--safe-area-inset-left));
--mdc-drawer-width: calc(256px + var(--safe-area-inset-left, 0px));
}
:host([modal]) {
--mdc-drawer-width: unset;