trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web/admin: fix alignment in tables with multiple elements in cell

Browse source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-12-21 20:06:27 +01:00
parent 3b61c6f9b9
commit 1564b898db
9 changed files with 23 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/src/admin/applications/ApplicationListPage.ts
View file

@ -60,6 +60,10 @@ export class ApplicationListPage extends TablePage<Application> {
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;

4
web/src/admin/crypto/CertificateKeyPairListPage.ts
View file

@ -70,7 +70,7 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
.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<CertificateKeyPair> {
html`<ak-label color=${item.privateKeyAvailable ? PFColor.Green : PFColor.Grey}>
${item.privateKeyAvailable ? t`Yes (${item.privateKeyType?.toUpperCase()})` : t`No`}
</ak-label>`,
html`<ak-label color=${item.certExpiry > new Date() ? PFColor.Green : PFColor.Orange}>
html`<ak-label color=${item.certExpiry || new Date() > new Date() ? PFColor.Green : PFColor.Orange}>
${item.certExpiry?.toLocaleString()}
</ak-label>`,
html`<ak-forms-modal>

4
web/src/admin/flows/FlowListPage.ts
View file

@ -92,13 +92,11 @@ export class FlowListPage extends TablePage<Flow> {
row(item: Flow): TemplateResult[] {
return [
html`<div>
<div>
<a href="#/flow/flows/${item.slug}">
<code>${item.slug}</code>
</a>
</div>
<small>${item.title}</small>
</div>`,
<small>${item.title}</small>`,
html`${item.name}`,
html`${Array.from(item.stages || []).length}`,
html`${Array.from(item.policies || []).length}`,

6
web/src/admin/groups/MemberSelectModal.ts
View file

@ -47,10 +47,8 @@ export class MemberSelectTable extends TableModal<User> {
row(item: User): TemplateResult[] {
return [
html`<div>
<div>${item.username}</div>
<small>${item.name}</small>
</div>`,
html`<div>${item.username}</div>
<small>${item.name}</small>`,
html` <ak-label color=${item.isActive ? PFColor.Green : PFColor.Orange}>
${item.isActive ? t`Yes` : t`No`}
</ak-label>`,

6
web/src/admin/outposts/OutpostListPage.ts
View file

@ -81,16 +81,14 @@ export class OutpostListPage extends TablePage<Outpost> {
row(item: Outpost): TemplateResult[] {
return [
html`<div>
<div>${item.name}</div>
html`<div>${item.name}</div>
${item.config.authentik_host === ""
? html`<i class="pf-icon pf-icon-warning-triangle"></i>
<small
>${t`Warning: authentik Domain is not configured, authentication will not work.`}</small
>`
: html`<i class="pf-icon pf-icon-ok"></i>
<small> ${t`Logging in via ${item.config.authentik_host}.`} </small>`}
</div>`,
<small> ${t`Logging in via ${item.config.authentik_host}.`} </small>`}`,
html`${TypeToLabel(item.type)}`,
html`<ul>
${item.providersObj?.map((p) => {

15
web/src/admin/policies/PolicyListPage.ts
View file

@ -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<Policy> {
row(item: Policy): TemplateResult[] {
return [
html`<div>
<div>${item.name}</div>
html`<div>${item.name}</div>
${(item.boundTo || 0) > 0
? html`<i class="pf-icon pf-icon-ok"></i>
<small>${t`Assigned to ${item.boundTo} object(s).`}</small>`
: html`<i class="pf-icon pf-icon-warning-triangle"></i>
<small>${t`Warning: Policy is not assigned.`}</small>`}
</div>`,
? html`<ak-label color=${PFColor.Green}>
${t`Assigned to ${item.boundTo} object(s).`}
</ak-label>`
: html`<ak-label color=${PFColor.Orange}>
${t`Warning: Policy is not assigned.`}
</ak-label>`}`,
html`${item.verboseName}`,
html` <ak-forms-modal>
<span slot="submit"> ${t`Update`} </span>

6
web/src/admin/stages/StageListPage.ts
View file

@ -118,10 +118,8 @@ export class StageListPage extends TablePage<Stage> {
row(item: Stage): TemplateResult[] {
return [
html`<div>
<div>${item.name}</div>
<small>${item.verboseName}</small>
</div>`,
html`<div>${item.name}</div>
<small>${item.verboseName}</small>`,
html`<ul class="pf-c-list">
${item.flowSet?.map((flow) => {
return html`<li>

6
web/src/admin/tokens/TokenListPage.ts
View file

@ -105,10 +105,8 @@ export class TokenListPage extends TablePage<Token> {
row(item: Token): TemplateResult[] {
return [
html`<div>
<div>${item.identifier}</div>
${item.managed ? html`<small>${t`Token is managed by authentik.`}</small>` : html``}
</div>`,
html`<div>${item.identifier}</div>
${item.managed ? html`<small>${t`Token is managed by authentik.`}</small>` : html``}`,
html`<a href="#/identity/users/${item.userObj?.pk}">${item.userObj?.username}</a>`,
html` <ak-label color=${item.expiring ? PFColor.Green : PFColor.Orange}>
${item.expiring ? t`Yes` : t`No`}

5
web/src/common/styles/authentik.css
View file

@ -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;