Fix view height in edit mode (#7646)

This commit is contained in:
Bram Kragten 2020-11-11 14:08:53 +01:00 committed by GitHub
parent 6ace8307d8
commit 051218e29b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -102,16 +102,13 @@ class HUIRoot extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<ha-app-layout id="layout"> <ha-app-layout
<app-header class=${classMap({
slot="header" "edit-mode": this._editMode,
effects="waterfall" })}
class=${classMap({ id="layout"
"edit-mode": this._editMode, >
})} <app-header slot="header" effects="waterfall" fixed condenses>
fixed
condenses
>
${this._editMode ${this._editMode
? html` ? html`
<app-toolbar class="edit-mode"> <app-toolbar class="edit-mode">
@ -819,7 +816,8 @@ class HUIRoot extends LitElement {
text-transform: uppercase; text-transform: uppercase;
} }
.edit-mode { .edit-mode app-header,
.edit-mode app-toolbar {
background-color: var(--dark-color, #455a64); background-color: var(--dark-color, #455a64);
color: var(--text-dark-color); color: var(--text-dark-color);
} }
@ -864,6 +862,12 @@ class HUIRoot extends LitElement {
position: relative; position: relative;
display: flex; display: flex;
} }
/**
* In edit mode we have the tab bar on a new line *
*/
.edit-mode #view {
min-height: calc(100vh - var(--header-height) - 48px);
}
#view > * { #view > * {
/** /**
* The view could get larger than the window in Firefox * The view could get larger than the window in Firefox