Make edit-dialog look ok on mobile (#2501)

* Make edit-dialog look ok on mobile

* Wide on wide screen

* Remove apply

* Remove variable, as it only used in one place...
This commit is contained in:
Bram Kragten 2019-01-20 19:01:49 +01:00 committed by Paulus Schoutsen
parent 6098b433be
commit 480b92c960
3 changed files with 95 additions and 76 deletions

View File

@ -52,7 +52,10 @@ class HaMoreInfoDialog extends DialogMixin(PolymerElement) {
--more-info-header-color: var(--text-primary-color); --more-info-header-color: var(--text-primary-color);
} }
:host { :host {
@apply --ha-dialog-fullscreen; width: 100% !important;
border-radius: 0px;
position: fixed !important;
margin: 0;
} }
:host::before { :host::before {
content: ""; content: "";

View File

@ -1,13 +1,17 @@
import { import {
html, html,
css,
LitElement, LitElement,
PropertyDeclarations, PropertyDeclarations,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
CSSResult,
} from "lit-element"; } from "lit-element";
import { classMap } from "lit-html/directives/class-map"; import { classMap } from "lit-html/directives/class-map";
import yaml from "js-yaml"; import yaml from "js-yaml";
import { haStyleDialog } from "../../../../resources/ha-style";
import "@polymer/paper-spinner/paper-spinner"; import "@polymer/paper-spinner/paper-spinner";
import "@polymer/paper-dialog/paper-dialog"; import "@polymer/paper-dialog/paper-dialog";
// This is not a duplicate import, one is for types, one is for element. // This is not a duplicate import, one is for types, one is for element.
@ -77,6 +81,82 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
}; };
} }
static get styles(): CSSResult[] {
return [
haStyleDialog,
css`
@media all and (max-width: 450px), all and (max-height: 500px) {
:host::before {
content: "";
position: fixed;
z-index: -1;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: inherit;
}
/* overrule the ha-style-dialog max-height on small screens */
paper-dialog {
max-height: 100%;
height: 100%;
}
}
@media all and (min-width: 660px) {
paper-dialog {
width: 650px;
}
}
paper-dialog {
max-width: 650px;
}
.center {
margin-left: auto;
margin-right: auto;
}
.margin-bot {
margin-bottom: 24px;
}
paper-button paper-spinner {
width: 14px;
height: 14px;
margin-right: 20px;
}
paper-spinner {
display: none;
}
paper-spinner[active] {
display: block;
}
.hidden {
display: none;
}
.element-editor {
margin-bottom: 8px;
}
.error {
color: #ef5350;
border-bottom: 1px solid #ef5350;
}
hr {
color: #000;
opacity: 0.12;
}
hui-card-preview {
padding-top: 8px;
margin-bottom: 4px;
display: block;
}
.toggle-button {
margin-right: auto;
}
`,
];
}
private get _dialog(): PaperDialogElement { private get _dialog(): PaperDialogElement {
return this.shadowRoot!.querySelector("paper-dialog")!; return this.shadowRoot!.querySelector("paper-dialog")!;
} }
@ -131,7 +211,6 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
} }
return html` return html`
${this.renderStyle()}
<paper-dialog <paper-dialog
with-backdrop with-backdrop
opened opened
@ -194,56 +273,6 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
`; `;
} }
private renderStyle(): TemplateResult {
return html`
<style>
paper-dialog {
width: 650px;
}
.center {
margin-left: auto;
margin-right: auto;
}
.margin-bot {
margin-bottom: 24px;
}
paper-button paper-spinner {
width: 14px;
height: 14px;
margin-right: 20px;
}
paper-spinner {
display: none;
}
paper-spinner[active] {
display: block;
}
.hidden {
display: none;
}
.element-editor {
margin-bottom: 8px;
}
.error {
color: #ef5350;
border-bottom: 1px solid #ef5350;
}
hr {
color: #000;
opacity: 0.12;
}
hui-card-preview {
padding-top: 8px;
margin-bottom: 4px;
display: block;
}
.toggle-button {
margin-right: auto;
}
</style>
`;
}
private async _loadedDialog(): Promise<void> { private async _loadedDialog(): Promise<void> {
await this.updateComplete; await this.updateComplete;
this._loading = false; this._loading = false;

View File

@ -64,29 +64,6 @@ export const haStyle = css`
`; `;
export const haStyleDialog = css` export const haStyleDialog = css`
:host {
--ha-dialog-narrow: {
margin: 0;
width: 100% !important;
max-height: calc(100% - 64px);
position: fixed !important;
bottom: 0px;
left: 0px;
right: 0px;
overflow: scroll;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
--ha-dialog-fullscreen: {
width: 100% !important;
border-radius: 0px;
position: fixed !important;
margin: 0;
}
}
/* prevent clipping of positioned elements */ /* prevent clipping of positioned elements */
paper-dialog-scrollable { paper-dialog-scrollable {
--paper-dialog-scrollable: { --paper-dialog-scrollable: {
@ -103,7 +80,17 @@ export const haStyleDialog = css`
@media all and (max-width: 450px), all and (max-height: 500px) { @media all and (max-width: 450px), all and (max-height: 500px) {
paper-dialog { paper-dialog {
@apply (--ha-dialog-narrow); margin: 0;
width: 100% !important;
max-height: calc(100% - 64px);
position: fixed !important;
bottom: 0px;
left: 0px;
right: 0px;
overflow: scroll;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
} }
} }
`; `;