Fix issues with circular progress (#18920)

This commit is contained in:
Bram Kragten 2023-12-06 14:21:28 +01:00 committed by GitHub
parent 1330558819
commit 86726102fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 9 deletions

View File

@ -103,8 +103,10 @@ class MoreInfoUpdate extends LitElement {
: ""}
${supportsFeature(this.stateObj!, UPDATE_SUPPORT_RELEASE_NOTES) &&
!this._error
? this._releaseNotes === undefined
? html`<ha-circular-progress indeterminate></ha-circular-progress>`
? !this._releaseNotes
? html`<div class="flex center">
<ha-circular-progress indeterminate></ha-circular-progress>
</div>`
: html`<hr />
<ha-faded>
<ha-markdown .content=${this._releaseNotes}></ha-markdown>
@ -254,9 +256,10 @@ class MoreInfoUpdate extends LitElement {
a {
color: var(--primary-color);
}
ha-circular-progress {
width: 100%;
.flex.center {
display: flex;
justify-content: center;
align-items: center;
}
mwc-linear-progress {
margin-bottom: -8px;

View File

@ -449,7 +449,9 @@ class AddIntegrationDialog extends LitElement {
>
</lit-virtualizer>
</mwc-list>`
: html`<ha-circular-progress indeterminate></ha-circular-progress>`} `;
: html`<div class="flex center">
<ha-circular-progress indeterminate></ha-circular-progress>
</div>`} `;
}
private _keyFunction = (integration: IntegrationListItem) =>
@ -682,10 +684,12 @@ class AddIntegrationDialog extends LitElement {
p > a {
color: var(--primary-color);
}
ha-circular-progress {
width: 100%;
.flex.center {
display: flex;
justify-content: center;
align-items: center;
}
ha-circular-progress {
margin: 24px 0;
}
mwc-list {

View File

@ -236,7 +236,7 @@ class ZHAAddDevicesPage extends LitElement {
color: var(--error-color);
}
ha-circular-progress {
padding: 20px;
margin: 20px;
}
.searching {
margin-top: 20px;

View File

@ -59,7 +59,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard {
height: calc(100vh - var(--header-height));
}
ha-circular-progress {
padding-bottom: 20px;
margin-bottom: 20px;
}
.content {
height: 100%;