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

Update layout of hardware info (#18034)

Browse Source
This commit is contained in:
Bram Kragten 2023-09-26 23:09:14 +02:00 committed by GitHub
parent 6b31c07459
commit 98bd08c9dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ha-clickable-list-item.ts
View File

@ -41,8 +41,6 @@ export class HaClickableListItem extends HaListItem {
height: 100%;
display: flex;
align-items: center;
padding-left: var(--mdc-list-side-padding, 20px);
padding-right: var(--mdc-list-side-padding, 20px);
overflow: hidden;
}
`,

94
src/panels/config/hardware/ha-config-hardware.ts
View File

@ -5,7 +5,6 @@ import type { ChartOptions } from "chart.js";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, html, LitElement, nothing, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { numberFormatToLocale } from "../../../common/number/format_number";
import { round } from "../../../common/number/round";
@ -283,53 +282,43 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
? html`
<ha-card outlined>
<div class="card-content">
<mwc-list>
<ha-list-item
noninteractive
graphic=${ifDefined(imageURL ? "medium" : undefined)}
.twoline=${Boolean(boardId)}
>
${imageURL
? html`<img alt="" slot="graphic" src=${imageURL} />`
: ""}
<span class="primary-text">
${boardName ||
this.hass.localize(
"ui.panel.config.hardware.generic_hardware"
)}
</span>
${boardId
? html`
<span class="secondary-text" slot="secondary"
>${boardId}</span
>
`
: ""}
</ha-list-item>
${documentationURL
? html`
<ha-clickable-list-item
.href=${documentationURL}
openNewTab
twoline
hasMeta
>
<span
>${this.hass.localize(
"ui.panel.config.hardware.documentation"
)}</span
>
<span slot="secondary"
>${this.hass.localize(
"ui.panel.config.hardware.documentation_description"
)}</span
>
<ha-icon-next slot="meta"></ha-icon-next>
</ha-clickable-list-item>
`
${imageURL ? html`<img alt="" src=${imageURL} />` : ""}
<div class="board-info">
<p class="primary-text">
${boardName ||
this.hass.localize(
"ui.panel.config.hardware.generic_hardware"
)}
</p>
${boardId
? html`<p class="secondary-text">${boardId}</p>`
: ""}
</mwc-list>
</div>
</div>
${documentationURL
? html`
<mwc-list>
<ha-clickable-list-item
.href=${documentationURL}
openNewTab
twoline
hasMeta
>
<span
>${this.hass.localize(
"ui.panel.config.hardware.documentation"
)}</span
>
<span slot="secondary"
>${this.hass.localize(
"ui.panel.config.hardware.documentation_description"
)}</span
>
<ha-icon-next slot="meta"></ha-icon-next>
</ha-clickable-list-item>
</mwc-list>
`
: ""}
${boardConfigEntries.length ||
isComponentLoaded(this.hass, "hassio")
? html`<div class="card-actions">
@ -500,6 +489,8 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
padding: 28px 20px 0;
max-width: 1040px;
margin: 0 auto;
--mdc-list-side-padding: 24px;
--mdc-list-vertical-padding: 0;
}
ha-card {
max-width: 600px;
@ -516,12 +507,21 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
flex-direction: column;
padding: 16px;
}
.card-content img {
max-width: 300px;
margin: auto;
}
.board-info {
text-align: center;
}
.primary-text {
font-size: 16px;
margin: 0;
}
.secondary-text {
font-size: 14px;
margin-bottom: 0;
color: var(--secondary-text-color);
}
.header {