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

Use columns in edit card on wide screens (#2551)

Browse Source
This commit is contained in:
Paulus Schoutsen 2019-01-24 12:33:09 -08:00 committed by GitHub
parent b1d5517864
commit 2bfd7ff33b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 46 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -115,21 +115,23 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
let content; let content;
let preview; let preview;
if (this._configElement !== undefined) { if (this._configElement !== undefined) {
if (this._uiEditor) { content = html`
content = html` <div class="element-editor">
<div class="element-editor">${this._configElement}</div> ${
`; this._uiEditor
} else { ? this._configElement
content = html` : html`
<hui-yaml-editor <hui-yaml-editor
.hass="${this.hass}" .hass="${this.hass}"
.yaml="${this._configValue!.value}" .yaml="${this._configValue!.value}"
@yaml-changed="${this._handleYamlChanged}" @yaml-changed="${this._handleYamlChanged}"
></hui-yaml-editor> ></hui-yaml-editor>
`; `
} }
</div>
`;
preview = html` preview = html`
<hr />
<hui-card-preview .hass="${this.hass}"> </hui-card-preview> <hui-card-preview .hass="${this.hass}"> </hui-card-preview>
`; `;
} }
@ -156,7 +158,7 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
` `
: "" : ""
} }
${content} ${preview} <div class="content">${content}${preview}</div>
</paper-dialog-scrollable> </paper-dialog-scrollable>
${ ${
!this._loading !this._loading
@ -430,6 +432,35 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.content {
display: flex;
flex-direction: column;
}
.content hui-card-preview {
margin-top: 16px;
}
@media (min-width: 1200px) {
paper-dialog {
max-width: none;
width: 1000px;
}
.content {
flex-direction: row;
}
.content .element-editor {
flex: auto;
}
.content hui-card-preview {
margin-top: 0;
margin-left: 24px;
flex: 490px;
max-width: 490px;
}
}
.margin-bot { .margin-bot {
margin-bottom: 24px; margin-bottom: 24px;
} }
@ -454,10 +485,6 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
color: #ef5350; color: #ef5350;
border-bottom: 1px solid #ef5350; border-bottom: 1px solid #ef5350;
} }
hr {
color: #000;
opacity: 0.12;
}
hui-card-preview { hui-card-preview {
padding-top: 8px; padding-top: 8px;
margin-bottom: 4px; margin-bottom: 4px;