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

Update styling on Template dev-tools (#21661)

Browse Source 
* Update styling on Template dev-tools

* Remove unnecessary divs
This commit is contained in:
Charles Garwood 2024-08-15 03:14:27 -04:00 committed by GitHub
parent 3f0f3affb6
commit 336b5fb547
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 133 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/panels/developer-tools/template/developer-tools-template.ts
View File

@ -88,13 +88,8 @@ class HaPanelDevTemplate extends LitElement {
: "dict" : "dict"
: type; : type;
return html` return html`
<div <div class="content">
class="content ${classMap({ <div class="description">
layout: !this.narrow,
horizontal: !this.narrow,
})}"
>
<div class="edit-pane">
<p> <p>
${this.hass.localize( ${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.description" "ui.panel.developer-tools.tabs.templates.description"
@ -126,11 +121,21 @@ class HaPanelDevTemplate extends LitElement {
> >
</li> </li>
</ul> </ul>
<p> </div>
${this.hass.localize( </div>
<div
class="content ${classMap({
layout: !this.narrow,
horizontal: !this.narrow,
})}"
>
<ha-card
class="edit-pane"
header=${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.editor" "ui.panel.developer-tools.tabs.templates.editor"
)} )}
</p> >
<div class="card-content">
<ha-code-editor <ha-code-editor
mode="jinja2" mode="jinja2"
.hass=${this.hass} .hass=${this.hass}
@ -142,6 +147,8 @@ class HaPanelDevTemplate extends LitElement {
@value-changed=${this._templateChanged} @value-changed=${this._templateChanged}
dir="ltr" dir="ltr"
></ha-code-editor> ></ha-code-editor>
</div>
<div class="card-actions">
<mwc-button @click=${this._restoreDemo}> <mwc-button @click=${this._restoreDemo}>
${this.hass.localize( ${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.reset" "ui.panel.developer-tools.tabs.templates.reset"
@ -151,8 +158,15 @@ class HaPanelDevTemplate extends LitElement {
${this.hass.localize("ui.common.clear")} ${this.hass.localize("ui.common.clear")}
</mwc-button> </mwc-button>
</div> </div>
</ha-card>
<div class="render-pane"> <ha-card
class="render-pane"
header=${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.result"
)}
>
<div class="card-content">
${this._rendering ${this._rendering
? html`<ha-circular-progress ? html`<ha-circular-progress
class="render-spinner" class="render-spinner"
@ -243,6 +257,7 @@ class HaPanelDevTemplate extends LitElement {
: nothing}` : nothing}`
: nothing} : nothing}
</div> </div>
</ha-card>
</div> </div>
`; `;
} }
@ -258,6 +273,7 @@ class HaPanelDevTemplate extends LitElement {
} }
.content { .content {
gap: 16px;
padding: 16px; padding: 16px;
padding: max(16px, env(safe-area-inset-top)) padding: max(16px, env(safe-area-inset-top))
max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-right))
@ -265,10 +281,11 @@ class HaPanelDevTemplate extends LitElement {
max(16px, env(safe-area-inset-left)); max(16px, env(safe-area-inset-left));
} }
ha-card {
margin-bottom: 16px;
}
.edit-pane { .edit-pane {
margin-right: 16px;
margin-inline-start: initial;
margin-inline-end: 16px;
direction: var(--direction); direction: var(--direction);
} }
@ -280,12 +297,6 @@ class HaPanelDevTemplate extends LitElement {
max-width: 50%; max-width: 50%;
} }
.render-pane {
position: relative;
max-width: 50%;
flex: 1;
}
.render-spinner { .render-spinner {
position: absolute; position: absolute;
top: 8px; top: 8px;

1
src/translations/en.json
View File

@ -6850,6 +6850,7 @@
"title": "Template", "title": "Template",
"description": "Templates are rendered using the Jinja2 template engine with some Home Assistant specific extensions.", "description": "Templates are rendered using the Jinja2 template engine with some Home Assistant specific extensions.",
"editor": "Template editor", "editor": "Template editor",
"result": "Result",
"reset": "Reset to demo template", "reset": "Reset to demo template",
"confirm_reset": "Do you want to reset your current template back to the demo template?", "confirm_reset": "Do you want to reset your current template back to the demo template?",
"confirm_clear": "Do you want to clear your current template?", "confirm_clear": "Do you want to clear your current template?",