Dev tools events layout (#18389)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Josh McCarty 2023-11-29 02:51:33 -07:00 committed by GitHub
parent 4a53de4466
commit eda0d12867
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 65 additions and 65 deletions

View File

@ -25,7 +25,11 @@ class HaPanelDevEvent extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<div class=${this.narrow ? "content" : "content layout horizontal"}> <div
class=${this.narrow
? "content layout vertical"
: "content layout horizontal"}
>
<div class="flex"> <div class="flex">
<p> <p>
${this.hass.localize( ${this.hass.localize(
@ -128,6 +132,7 @@ class HaPanelDevEvent extends LitElement {
haStyle, haStyle,
css` css`
.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))
@ -145,6 +150,10 @@ class HaPanelDevEvent extends LitElement {
display: block; display: block;
} }
.flex {
min-width: 0;
}
.inputs { .inputs {
max-width: 400px; max-width: 400px;
} }
@ -163,9 +172,7 @@ class HaPanelDevEvent extends LitElement {
event-subscribe-card { event-subscribe-card {
display: block; display: block;
margin: 16px 16px 0 0; margin-top: 16px;
margin-inline-start: initial;
margin-inline-end: 16px;
direction: var(--direction); direction: var(--direction);
} }

View File

@ -39,6 +39,7 @@ class EventSubscribeCard extends LitElement {
"ui.panel.developer-tools.tabs.events.listen_to_events" "ui.panel.developer-tools.tabs.events.listen_to_events"
)} )}
> >
<div class="card-content">
<form> <form>
<ha-textfield <ha-textfield
.label=${this._subscribed .label=${this._subscribed
@ -89,6 +90,7 @@ class EventSubscribeCard extends LitElement {
` `
)} )}
</div> </div>
</div>
</ha-card> </ha-card>
`; `;
} }
@ -121,19 +123,9 @@ class EventSubscribeCard extends LitElement {
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
form {
display: block;
padding: 0 0 16px 16px;
}
ha-textfield { ha-textfield {
width: 300px; display: block;
} margin-bottom: 16px;
mwc-button {
vertical-align: middle;
}
.events {
margin: -16px 0;
padding: 0 16px;
} }
.event { .event {
border-top: 1px solid var(--divider-color); border-top: 1px solid var(--divider-color);
@ -143,6 +135,7 @@ class EventSubscribeCard extends LitElement {
} }
.event:last-child { .event:last-child {
border-bottom: 0; border-bottom: 0;
margin-bottom: 0;
} }
pre { pre {
font-family: var(--code-font-family, monospace); font-family: var(--code-font-family, monospace);