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

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

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/dialogs/ha-more-info-dialog.js
View File

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

131
src/panels/lovelace/editor/card-editor/hui-edit-card.ts
View File

@ -1,13 +1,17 @@
import {
html,
css,
LitElement,
PropertyDeclarations,
PropertyValues,
TemplateResult,
CSSResult,
} from "lit-element";
import { classMap } from "lit-html/directives/class-map";
import yaml from "js-yaml";
import { haStyleDialog } from "../../../../resources/ha-style";
import "@polymer/paper-spinner/paper-spinner";
import "@polymer/paper-dialog/paper-dialog";
// 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 {
return this.shadowRoot!.querySelector("paper-dialog")!;
}
@ -131,7 +211,6 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
}
return html`
${this.renderStyle()}
<paper-dialog
with-backdrop
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> {
await this.updateComplete;
this._loading = false;

35
src/resources/ha-style.ts
View File

@ -64,29 +64,6 @@ export const haStyle = 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 */
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) {
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;
}
}
`;