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

Fix update more info margin (#22691)

Browse Source
This commit is contained in:
Paul Bottein 2024-11-06 11:17:14 +01:00 committed by GitHub
parent 4bd70167ad
commit 5430040b96
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 60 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/dialogs/more-info/controls/more-info-update.ts
View File

@ -52,59 +52,61 @@ class MoreInfoUpdate extends LitElement {
return html` return html`
<div class="content"> <div class="content">
${this.stateObj.attributes.in_progress <div class="summary">
? supportsFeature(this.stateObj, UpdateEntityFeature.PROGRESS) && ${this.stateObj.attributes.in_progress
this.stateObj.attributes.update_percentage !== null ? supportsFeature(this.stateObj, UpdateEntityFeature.PROGRESS) &&
? html`<mwc-linear-progress this.stateObj.attributes.update_percentage !== null
.progress=${this.stateObj.attributes.update_percentage / 100} ? html`<mwc-linear-progress
buffer="" .progress=${this.stateObj.attributes.update_percentage / 100}
></mwc-linear-progress>` buffer=""
: html`<mwc-linear-progress indeterminate></mwc-linear-progress>` ></mwc-linear-progress>`
: nothing} : html`<mwc-linear-progress indeterminate></mwc-linear-progress>`
<h3>${this.stateObj.attributes.title}</h3> : nothing}
${this._error <h3>${this.stateObj.attributes.title}</h3>
? html`<ha-alert alert-type="error">${this._error}</ha-alert>` ${this._error
: nothing} ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
<div class="row"> : nothing}
<div class="key"> <div class="row">
${this.hass.formatEntityAttributeName( <div class="key">
this.stateObj, ${this.hass.formatEntityAttributeName(
"installed_version" this.stateObj,
)} "installed_version"
)}
</div>
<div class="value">
${this.stateObj.attributes.installed_version ??
this.hass.localize("state.default.unavailable")}
</div>
</div> </div>
<div class="value"> <div class="row">
${this.stateObj.attributes.installed_version ?? <div class="key">
this.hass.localize("state.default.unavailable")} ${this.hass.formatEntityAttributeName(
this.stateObj,
"latest_version"
)}
</div>
<div class="value">
${this.stateObj.attributes.latest_version ??
this.hass.localize("state.default.unavailable")}
</div>
</div> </div>
</div>
<div class="row">
<div class="key">
${this.hass.formatEntityAttributeName(
this.stateObj,
"latest_version"
)}
</div>
<div class="value">
${this.stateObj.attributes.latest_version ??
this.hass.localize("state.default.unavailable")}
</div>
</div>
${this.stateObj.attributes.release_url ${this.stateObj.attributes.release_url
? html`<div class="row"> ? html`<div class="row">
<div class="key"> <div class="key">
<a <a
href=${this.stateObj.attributes.release_url} href=${this.stateObj.attributes.release_url}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
${this.hass.localize( ${this.hass.localize(
"ui.dialogs.more_info_control.update.release_announcement" "ui.dialogs.more_info_control.update.release_announcement"
)} )}
</a> </a>
</div> </div>
</div>` </div>`
: nothing} : nothing}
</div>
${supportsFeature(this.stateObj!, UpdateEntityFeature.RELEASE_NOTES) && ${supportsFeature(this.stateObj!, UpdateEntityFeature.RELEASE_NOTES) &&
!this._error !this._error
? this._releaseNotes === undefined ? this._releaseNotes === undefined
@ -293,6 +295,11 @@ class MoreInfoUpdate extends LitElement {
ha-expansion-panel { ha-expansion-panel {
margin: 16px 0; margin: 16px 0;
} }
.summary {
margin-bottom: 16px;
}
.row { .row {
margin: 0; margin: 0;
display: flex; display: flex;
@ -308,7 +315,9 @@ class MoreInfoUpdate extends LitElement {
); );
position: sticky; position: sticky;
bottom: 0; bottom: 0;
margin: 0 -24px -24px -24px; margin: 0 -24px 0 -24px;
margin-bottom: calc(-1 * max(env(safe-area-inset-bottom), 24px));
padding-bottom: env(safe-area-inset-bottom);
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;