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

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

Browse Source 
* Update developer-tools-template.ts

* whitespace in pre

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

* prettier

* Update developer-tools-template.ts

* Update developer-tools-template.ts

* prettier

* prettier!!!!

* prettier again

* prettier fight

* prettier

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

* prettier

* prettier

---------

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

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

@ -181,17 +181,21 @@ class HaPanelDevTemplate extends LitElement {
>` >`
: nothing} : nothing}
${this._templateResult ${this._templateResult
? html`${this.hass.localize( ? html`<pre
"ui.panel.developer-tools.tabs.templates.result_type" class="rendered ${classMap({
)}: [resultType]: resultType,
${resultType} })}"
<!-- prettier-ignore --> >
<pre class="rendered ${classMap({ ${type === "object"
[resultType]: resultType, ? JSON.stringify(this._templateResult.result, null, 2)
})}" : this._templateResult.result}</pre
>${type === "object" >
? JSON.stringify(this._templateResult.result, null, 2) <p>
: this._templateResult.result}</pre> ${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.result_type"
)}:
${resultType}
</p>
${this._templateResult.listeners.time ${this._templateResult.listeners.time
? html` ? html`
<p> <p>
@ -281,6 +285,16 @@ class HaPanelDevTemplate extends LitElement {
max(16px, env(safe-area-inset-left)); max(16px, env(safe-area-inset-left));
} }
.content.horizontal {
--code-mirror-max-height: calc(
100vh - var(--header-height) -
(var(--paper-font-body1_-_line-height) * 3) - (1em * 2) -
(max(16px, env(safe-area-inset-top)) * 2) -
(max(16px, env(safe-area-inset-bottom)) * 2) -
(var(--ha-card-border-width, 1px) * 2) - 179px
);
}
ha-card { ha-card {
margin-bottom: 16px; margin-bottom: 16px;
} }
@ -293,8 +307,9 @@ class HaPanelDevTemplate extends LitElement {
color: var(--primary-color); color: var(--primary-color);
} }
.horizontal .edit-pane { .content.horizontal > * {
max-width: 50%; width: 50%;
margin-bottom: 0px;
} }
.render-spinner { .render-spinner {
@ -316,15 +331,35 @@ class HaPanelDevTemplate extends LitElement {
white-space: pre-wrap; white-space: pre-wrap;
background-color: var(--secondary-background-color); background-color: var(--secondary-background-color);
padding: 8px; padding: 8px;
margin-top: 0;
margin-bottom: 0;
direction: ltr; direction: ltr;
} }
p,
ul {
margin-block-end: 0;
}
.content.horizontal .render-pane .card-content {
overflow: auto;
max-height: calc(
var(--code-mirror-max-height) +
47px - var(--ha-card-border-radius, 12px)
);
}
.content.horizontal .render-pane {
overflow: hidden;
padding-bottom: var(--ha-card-border-radius, 12px);
}
.all_listeners { .all_listeners {
color: var(--warning-color); color: var(--warning-color);
} }
@media all and (max-width: 870px) { @media all and (max-width: 870px) {
.render-pane { .content ha-card {
max-width: 100%; max-width: 100%;
} }
} }