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

fix(mobile): add safe-area-inset on app layout and specific views (#14032)

Browse Source
This commit is contained in:
Pierre 2022-10-11 15:45:15 +02:00 committed by GitHub
parent 1ecc88291d
commit 8a4b0b081a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 31 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/layouts/ha-app-layout.js
View File

@ -36,6 +36,8 @@ class HaAppLayout extends customElements.get("app-header-layout") {
*/
position: relative;
z-index: 0;
padding: env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#wrapper ::slotted([slot="header"]) {

4
src/panels/developer-tools/event/developer-tools-event.js
View File

@ -26,6 +26,10 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
<style>
.content {
padding: 16px;
padding: max(16px, env(safe-area-inset-top))
max(16px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom))
max(16px, env(safe-area-inset-left));
max-width: 1200px;
margin: auto;
}

8
src/panels/developer-tools/service/developer-tools-service.ts
View File

@ -392,11 +392,19 @@ class HaPanelDevService extends LitElement {
css`
.content {
padding: 16px;
padding: max(16px, env(safe-area-inset-top))
max(16px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom))
max(16px, env(safe-area-inset-left));
max-width: 1200px;
margin: auto;
}
.button-row {
padding: 8px 16px;
padding: max(8px, env(safe-area-inset-top))
max(16px, env(safe-area-inset-right))
max(8px, env(safe-area-inset-bottom))
max(16px, env(safe-area-inset-left));
border-top: 1px solid var(--divider-color);
border-bottom: 1px solid var(--divider-color);
background: var(--card-background-color);

4
src/panels/developer-tools/state/developer-tools-state.js
View File

@ -41,6 +41,10 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
-moz-user-select: initial;
display: block;
padding: 16px;
padding: max(16px, env(safe-area-inset-top))
max(16px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom))
max(16px, env(safe-area-inset-left));
}
ha-textfield {

4
src/panels/developer-tools/statistics/developer-tools-statistics.ts
View File

@ -327,6 +327,10 @@ class HaPanelDevStatistics extends SubscribeMixin(LitElement) {
css`
.content {
padding: 16px;
padding: max(16px, env(safe-area-inset-top))
max(16px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom))
max(16px, env(safe-area-inset-left));
}
th {

4
src/panels/developer-tools/template/developer-tools-template.ts
View File

@ -249,6 +249,10 @@ class HaPanelDevTemplate extends LitElement {
.content {
padding: 16px;
padding: max(16px, env(safe-area-inset-top))
max(16px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom))
max(16px, env(safe-area-inset-left));
}
.edit-pane {

4
src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
View File

@ -220,6 +220,10 @@ export class DeveloperYamlConfig extends LitElement {
.content {
padding: 28px 20px 16px;
padding: max(28px, calc(12px + env(safe-area-inset-top)))
max(20px, calc(4px + env(safe-area-inset-right)))
max(16px, env(safe-area-inset-bottom))
max(20px, calc(4px + env(safe-area-inset-left)));
max-width: 1040px;
margin: 0 auto;
}

1
src/panels/media-browser/ha-bar-media-player.ts
View File

@ -573,6 +573,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
var(--card-background-color, white)
);
border-top: 1px solid var(--divider-color);
padding-bottom: env(safe-area-inset-bottom);
}
mwc-linear-progress {