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

Fix background and padding on dashboard views (#16098)Co-authored-by: Bram Kragten <mail@bramkragten.nl>

Browse Source 
* Fix background and padding on dashboard views

* Clean code

* update fab position clean

---------

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Paul Bottein 2023-04-06 18:25:23 +02:00 committed by GitHub
parent de00842f22
commit cc4e815a58
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1049,15 +1049,6 @@ class HUIRoot extends LitElement {
#view { #view {
margin-top: calc(var(--header-height) + env(safe-area-inset-top)); margin-top: calc(var(--header-height) + env(safe-area-inset-top));
height: calc(100vh - 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)
);
overflow: auto;
transform: translateZ(0);
display: flex;
} }
/** /**
* In edit mode we have the tab bar on a new line * * In edit mode we have the tab bar on a new line *
@ -1070,19 +1061,17 @@ class HUIRoot extends LitElement {
var(--header-height) + 48px + env(safe-area-inset-top) var(--header-height) + 48px + env(safe-area-inset-top)
); );
} }
#view > * { hui-view {
/** padding-left: env(safe-area-inset-left);
* The view could get larger than the window in Firefox padding-right: env(safe-area-inset-right);
* to prevent that we set the max-width to 100% background: var(
* flex-grow: 1 and flex-basis: 100% should make sure the view --lovelace-background,
* stays full width. var(--primary-background-color)
* );
* https://github.com/home-assistant/home-assistant-polymer/pull/3806 overflow: auto;
*/ width: 100%;
flex: 1 1 100%;
height: 100%; height: 100%;
max-width: 100%; transform: translateZ(0);
padding-bottom: env(safe-area-inset-bottom);
display: block; display: block;
} }
.hide-tab { .hide-tab {

7
src/panels/lovelace/views/hui-masonry-view.ts
View File

@ -298,8 +298,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
:host { :host {
display: block; display: block;
padding-top: 4px; padding-top: 4px;
height: 100%; padding-bottom: env(safe-area-inset-bottom);
box-sizing: border-box;
} }
.badges { .badges {
@ -328,15 +327,13 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
} }
ha-fab { ha-fab {
position: sticky; position: absolute;
float: right;
right: calc(16px + env(safe-area-inset-right)); right: calc(16px + env(safe-area-inset-right));
bottom: calc(16px + env(safe-area-inset-bottom)); bottom: calc(16px + env(safe-area-inset-bottom));
z-index: 1; z-index: 1;
} }
ha-fab.rtl { ha-fab.rtl {
float: left;
right: auto; right: auto;
left: calc(16px + env(safe-area-inset-left)); left: calc(16px + env(safe-area-inset-left));
} }

7
src/panels/lovelace/views/hui-sidebar-view.ts
View File

@ -196,8 +196,7 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
:host { :host {
display: block; display: block;
padding-top: 4px; padding-top: 4px;
height: 100%; padding-bottom: env(safe-area-inset-bottom);
box-sizing: border-box;
} }
.container { .container {
@ -236,15 +235,13 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
} }
ha-fab { ha-fab {
position: sticky; position: absolute;
float: right;
right: calc(16px + env(safe-area-inset-right)); right: calc(16px + env(safe-area-inset-right));
bottom: calc(16px + env(safe-area-inset-bottom)); bottom: calc(16px + env(safe-area-inset-bottom));
z-index: 1; z-index: 1;
} }
ha-fab.rtl { ha-fab.rtl {
float: left;
right: auto; right: auto;
left: calc(16px + env(safe-area-inset-left)); left: calc(16px + env(safe-area-inset-left));
} }