web/admin: fix border for outpost health status

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-12-20 21:40:26 +01:00
parent 4658018a90
commit dcbc3d788a
1 changed files with 12 additions and 4 deletions

View File

@ -1,6 +1,6 @@
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { CSSResult, LitElement, TemplateResult, html } from "lit"; import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
import { customElement, property } from "lit/decorators.js"; import { customElement, property } from "lit/decorators.js";
import AKGlobal from "../../authentik.css"; import AKGlobal from "../../authentik.css";
@ -17,7 +17,15 @@ export class OutpostHealthElement extends LitElement {
outpostHealth?: OutpostHealth; outpostHealth?: OutpostHealth;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFBase, AKGlobal]; return [
PFBase,
AKGlobal,
css`
li {
margin: 5px 0;
}
`,
];
} }
render(): TemplateResult { render(): TemplateResult {
@ -25,12 +33,12 @@ export class OutpostHealthElement extends LitElement {
return html`<ak-spinner></ak-spinner>`; return html`<ak-spinner></ak-spinner>`;
} }
return html` <ul> return html` <ul>
<li role="cell"> <li>
<ak-label color=${PFColor.Green}> <ak-label color=${PFColor.Green}>
${t`Last seen: ${this.outpostHealth.lastSeen?.toLocaleTimeString()}`} ${t`Last seen: ${this.outpostHealth.lastSeen?.toLocaleTimeString()}`}
</ak-label> </ak-label>
</li> </li>
<li role="cell"> <li>
${this.outpostHealth.versionOutdated ${this.outpostHealth.versionOutdated
? html`<ak-label color=${PFColor.Red} ? html`<ak-label color=${PFColor.Red}
>${t`${this.outpostHealth.version}, should be ${this.outpostHealth.versionShould}`} >${t`${this.outpostHealth.version}, should be ${this.outpostHealth.versionShould}`}