From 1564b898db100c9e9de4f54b78f553ba81b3af57 Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Wed, 21 Dec 2022 20:06:27 +0100 Subject: [PATCH] web/admin: fix alignment in tables with multiple elements in cell Signed-off-by: Jens Langhammer --- web/src/admin/applications/ApplicationListPage.ts | 4 ++++ .../admin/crypto/CertificateKeyPairListPage.ts | 4 ++-- web/src/admin/flows/FlowListPage.ts | 4 +--- web/src/admin/groups/MemberSelectModal.ts | 6 ++---- web/src/admin/outposts/OutpostListPage.ts | 6 ++---- web/src/admin/policies/PolicyListPage.ts | 15 ++++++++------- web/src/admin/stages/StageListPage.ts | 6 ++---- web/src/admin/tokens/TokenListPage.ts | 6 ++---- web/src/common/styles/authentik.css | 5 ----- 9 files changed, 23 insertions(+), 33 deletions(-) diff --git a/web/src/admin/applications/ApplicationListPage.ts b/web/src/admin/applications/ApplicationListPage.ts index bc859326d..203b91720 100644 --- a/web/src/admin/applications/ApplicationListPage.ts +++ b/web/src/admin/applications/ApplicationListPage.ts @@ -60,6 +60,10 @@ export class ApplicationListPage extends TablePage { PFCard, AKGlobal, css` + /* Fix alignment issues with images in tables */ + .pf-c-table tbody > tr > * { + vertical-align: middle; + } tr td:first-child { width: auto; min-width: 0px; diff --git a/web/src/admin/crypto/CertificateKeyPairListPage.ts b/web/src/admin/crypto/CertificateKeyPairListPage.ts index 9bd678a2e..86dbf0237 100644 --- a/web/src/admin/crypto/CertificateKeyPairListPage.ts +++ b/web/src/admin/crypto/CertificateKeyPairListPage.ts @@ -70,7 +70,7 @@ export class CertificateKeyPairListPage extends TablePage { .metadata=${(item: CertificateKeyPair) => { return [ { key: t`Name`, value: item.name }, - { key: t`Expiry`, value: item.certExpiry.toLocaleString() }, + { key: t`Expiry`, value: item.certExpiry?.toLocaleString() }, ]; }} .usedBy=${(item: CertificateKeyPair) => { @@ -101,7 +101,7 @@ export class CertificateKeyPairListPage extends TablePage { html` ${item.privateKeyAvailable ? t`Yes (${item.privateKeyType?.toUpperCase()})` : t`No`} `, - html` new Date() ? PFColor.Green : PFColor.Orange}> + html` new Date() ? PFColor.Green : PFColor.Orange}> ${item.certExpiry?.toLocaleString()} `, html` diff --git a/web/src/admin/flows/FlowListPage.ts b/web/src/admin/flows/FlowListPage.ts index 9a63024d1..6a2022ed5 100644 --- a/web/src/admin/flows/FlowListPage.ts +++ b/web/src/admin/flows/FlowListPage.ts @@ -92,13 +92,11 @@ export class FlowListPage extends TablePage { row(item: Flow): TemplateResult[] { return [ html`
- - ${item.title} -
`, + ${item.title}`, html`${item.name}`, html`${Array.from(item.stages || []).length}`, html`${Array.from(item.policies || []).length}`, diff --git a/web/src/admin/groups/MemberSelectModal.ts b/web/src/admin/groups/MemberSelectModal.ts index 0368e2241..f5f84de8b 100644 --- a/web/src/admin/groups/MemberSelectModal.ts +++ b/web/src/admin/groups/MemberSelectModal.ts @@ -47,10 +47,8 @@ export class MemberSelectTable extends TableModal { row(item: User): TemplateResult[] { return [ - html`
-
${item.username}
- ${item.name} -
`, + html`
${item.username}
+ ${item.name}`, html` ${item.isActive ? t`Yes` : t`No`} `, diff --git a/web/src/admin/outposts/OutpostListPage.ts b/web/src/admin/outposts/OutpostListPage.ts index aaaf9f060..1df8225db 100644 --- a/web/src/admin/outposts/OutpostListPage.ts +++ b/web/src/admin/outposts/OutpostListPage.ts @@ -81,16 +81,14 @@ export class OutpostListPage extends TablePage { row(item: Outpost): TemplateResult[] { return [ - html`
-
${item.name}
+ html`
${item.name}
${item.config.authentik_host === "" ? html` ${t`Warning: authentik Domain is not configured, authentication will not work.`}` : html` - ${t`Logging in via ${item.config.authentik_host}.`} `} -
`, + ${t`Logging in via ${item.config.authentik_host}.`} `}`, html`${TypeToLabel(item.type)}`, html`
    ${item.providersObj?.map((p) => { diff --git a/web/src/admin/policies/PolicyListPage.ts b/web/src/admin/policies/PolicyListPage.ts index 8629f690f..5c7c772c8 100644 --- a/web/src/admin/policies/PolicyListPage.ts +++ b/web/src/admin/policies/PolicyListPage.ts @@ -10,6 +10,7 @@ import "@goauthentik/admin/policies/reputation/ReputationPolicyForm"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { uiConfig } from "@goauthentik/common/ui/config"; import { groupBy } from "@goauthentik/common/utils"; +import { PFColor } from "@goauthentik/elements/Label"; import "@goauthentik/elements/forms/ConfirmationForm"; import "@goauthentik/elements/forms/DeleteBulkForm"; import "@goauthentik/elements/forms/ModalForm"; @@ -69,14 +70,14 @@ export class PolicyListPage extends TablePage { row(item: Policy): TemplateResult[] { return [ - html`
    -
    ${item.name}
    + html`
    ${item.name}
    ${(item.boundTo || 0) > 0 - ? html` - ${t`Assigned to ${item.boundTo} object(s).`}` - : html` - ${t`Warning: Policy is not assigned.`}`} -
    `, + ? html` + ${t`Assigned to ${item.boundTo} object(s).`} + ` + : html` + ${t`Warning: Policy is not assigned.`} + `}`, html`${item.verboseName}`, html` ${t`Update`} diff --git a/web/src/admin/stages/StageListPage.ts b/web/src/admin/stages/StageListPage.ts index b85cff250..bc8e08f60 100644 --- a/web/src/admin/stages/StageListPage.ts +++ b/web/src/admin/stages/StageListPage.ts @@ -118,10 +118,8 @@ export class StageListPage extends TablePage { row(item: Stage): TemplateResult[] { return [ - html`
    -
    ${item.name}
    - ${item.verboseName} -
    `, + html`
    ${item.name}
    + ${item.verboseName}`, html`
      ${item.flowSet?.map((flow) => { return html`
    • diff --git a/web/src/admin/tokens/TokenListPage.ts b/web/src/admin/tokens/TokenListPage.ts index d8b18adf7..f5252d27d 100644 --- a/web/src/admin/tokens/TokenListPage.ts +++ b/web/src/admin/tokens/TokenListPage.ts @@ -105,10 +105,8 @@ export class TokenListPage extends TablePage { row(item: Token): TemplateResult[] { return [ - html`
      -
      ${item.identifier}
      - ${item.managed ? html`${t`Token is managed by authentik.`}` : html``} -
      `, + html`
      ${item.identifier}
      + ${item.managed ? html`${t`Token is managed by authentik.`}` : html``}`, html`${item.userObj?.username}`, html` ${item.expiring ? t`Yes` : t`No`} diff --git a/web/src/common/styles/authentik.css b/web/src/common/styles/authentik.css index 881e2f5ed..161d03932 100644 --- a/web/src/common/styles/authentik.css +++ b/web/src/common/styles/authentik.css @@ -96,11 +96,6 @@ html > form > input { color: var(--pf-global--Color--100); } -/* Fix alignment issues with images in tables */ -.pf-c-table tbody > tr > * { - vertical-align: middle; -} - .pf-c-description-list__description .pf-c-button { margin-right: 6px; margin-bottom: 6px;