jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-19 10:57:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update developer-tools-template.ts: add independent scrollbars for left & right panels for large screens (#17765)

Browse Source 
* Update developer-tools-template.ts

* Update developer-tools-template.ts

* fix overflow

* Update src/panels/developer-tools/template/developer-tools-template.ts

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

* Update src/panels/developer-tools/template/developer-tools-template.ts

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

* Update developer-tools-template.ts

* Update src/panels/developer-tools/template/developer-tools-template.ts

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

* Update developer-tools-template.ts

* prettier

* Update developer-tools-template.ts

* Update developer-tools-template.ts

* prettier

* Update developer-tools-template.ts

* prettier

* prettier

* Update developer-tools-template.ts

* prettier

* prettier

* prettier

* Update developer-tools-template.ts

---------

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>
This commit is contained in:
ildar170975 2024-12-10 12:11:48 +03:00 committed by GitHub
parent 1b0e53d3d9
commit d1c981bc19
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -181,17 +181,21 @@ class HaPanelDevTemplate extends LitElement {
>`
: nothing}
${this._templateResult
? html`${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.result_type"
)}:
${resultType}
<!-- prettier-ignore -->
<pre class="rendered ${classMap({
[resultType]: resultType,
})}"
>${type === "object"
? JSON.stringify(this._templateResult.result, null, 2)
: this._templateResult.result}</pre>
? html`<pre
class="rendered ${classMap({
[resultType]: resultType,
})}"
>
${type === "object"
? JSON.stringify(this._templateResult.result, null, 2)
: this._templateResult.result}</pre
>
<p>
${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.result_type"
)}:
${resultType}
</p>
${this._templateResult.listeners.time
? html`
<p>
@ -249,11 +253,11 @@ class HaPanelDevTemplate extends LitElement {
</ul>
`
: !this._templateResult.listeners.time
? html`<span class="all_listeners">
? html`<p class="all_listeners">
${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.no_listeners"
)}
</span>`
</p>`
: nothing}`
: nothing}
</div>
@ -281,6 +285,10 @@ class HaPanelDevTemplate extends LitElement {
max(16px, env(safe-area-inset-left));
}
.content.horizontal {
--code-mirror-max-height: calc(100vh - 389px);
}
ha-card {
margin-bottom: 16px;
}
@ -293,8 +301,9 @@ class HaPanelDevTemplate extends LitElement {
color: var(--primary-color);
}
.horizontal .edit-pane {
max-width: 50%;
.content.horizontal > * {
width: 50%;
margin-bottom: 0px;
}
.render-spinner {
@ -316,7 +325,21 @@ class HaPanelDevTemplate extends LitElement {
white-space: pre-wrap;
background-color: var(--secondary-background-color);
padding: 8px;
margin-top: 0;
margin-bottom: 0;
direction: ltr;
overflow: auto;
}
p,
ul {
margin-block-end: 0;
}
.content.horizontal .render-pane .card-content {
display: flex;
flex-direction: column;
max-height: calc(var(--code-mirror-max-height) + 47px);
}
.all_listeners {
@ -324,7 +347,7 @@ class HaPanelDevTemplate extends LitElement {
}
@media all and (max-width: 870px) {
.render-pane {
.content ha-card {
max-width: 100%;
}
}