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 

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, PFCard,
AKGlobal, AKGlobal,
css` css`
/* Fix alignment issues with images in tables */
.pf-c-table tbody > tr > * {
vertical-align: middle;
}
tr td:first-child { tr td:first-child {
width: auto; width: auto;
min-width: 0px; 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) => { .metadata=${(item: CertificateKeyPair) => {
return [ return [
{ key: t`Name`, value: item.name }, { key: t`Name`, value: item.name },
{ key: t`Expiry`, value: item.certExpiry.toLocaleString() }, { key: t`Expiry`, value: item.certExpiry?.toLocaleString() },
]; ];
}} }}
.usedBy=${(item: CertificateKeyPair) => { .usedBy=${(item: CertificateKeyPair) => {
@ -101,7 +101,7 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
html`<ak-label color=${item.privateKeyAvailable ? PFColor.Green : PFColor.Grey}> html`<ak-label color=${item.privateKeyAvailable ? PFColor.Green : PFColor.Grey}>
${item.privateKeyAvailable ? t`Yes (${item.privateKeyType?.toUpperCase()})` : t`No`} ${item.privateKeyAvailable ? t`Yes (${item.privateKeyType?.toUpperCase()})` : t`No`}
</ak-label>`, </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()} ${item.certExpiry?.toLocaleString()}
</ak-label>`, </ak-label>`,
html`<ak-forms-modal> 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[] { row(item: Flow): TemplateResult[] {
return [ return [
html`<div> html`<div>
<div>
<a href="#/flow/flows/${item.slug}"> <a href="#/flow/flows/${item.slug}">
<code>${item.slug}</code> <code>${item.slug}</code>
</a> </a>
</div> </div>
<small>${item.title}</small> <small>${item.title}</small>`,
</div>`,
html`${item.name}`, html`${item.name}`,
html`${Array.from(item.stages || []).length}`, html`${Array.from(item.stages || []).length}`,
html`${Array.from(item.policies || []).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[] { row(item: User): TemplateResult[] {
return [ return [
html`<div> html`<div>${item.username}</div>
<div>${item.username}</div> <small>${item.name}</small>`,
<small>${item.name}</small>
</div>`,
html` <ak-label color=${item.isActive ? PFColor.Green : PFColor.Orange}> html` <ak-label color=${item.isActive ? PFColor.Green : PFColor.Orange}>
${item.isActive ? t`Yes` : t`No`} ${item.isActive ? t`Yes` : t`No`}
</ak-label>`, </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[] { row(item: Outpost): TemplateResult[] {
return [ return [
html`<div> html`<div>${item.name}</div>
<div>${item.name}</div>
${item.config.authentik_host === "" ${item.config.authentik_host === ""
? html`<i class="pf-icon pf-icon-warning-triangle"></i> ? html`<i class="pf-icon pf-icon-warning-triangle"></i>
<small <small
>${t`Warning: authentik Domain is not configured, authentication will not work.`}</small >${t`Warning: authentik Domain is not configured, authentication will not work.`}</small
>` >`
: html`<i class="pf-icon pf-icon-ok"></i> : html`<i class="pf-icon pf-icon-ok"></i>
<small> ${t`Logging in via ${item.config.authentik_host}.`} </small>`} <small> ${t`Logging in via ${item.config.authentik_host}.`} </small>`}`,
</div>`,
html`${TypeToLabel(item.type)}`, html`${TypeToLabel(item.type)}`,
html`<ul> html`<ul>
${item.providersObj?.map((p) => { ${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 { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { uiConfig } from "@goauthentik/common/ui/config"; import { uiConfig } from "@goauthentik/common/ui/config";
import { groupBy } from "@goauthentik/common/utils"; import { groupBy } from "@goauthentik/common/utils";
import { PFColor } from "@goauthentik/elements/Label";
import "@goauthentik/elements/forms/ConfirmationForm"; import "@goauthentik/elements/forms/ConfirmationForm";
import "@goauthentik/elements/forms/DeleteBulkForm"; import "@goauthentik/elements/forms/DeleteBulkForm";
import "@goauthentik/elements/forms/ModalForm"; import "@goauthentik/elements/forms/ModalForm";
@ -69,14 +70,14 @@ export class PolicyListPage extends TablePage<Policy> {
row(item: Policy): TemplateResult[] { row(item: Policy): TemplateResult[] {
return [ return [
html`<div> html`<div>${item.name}</div>
<div>${item.name}</div>
${(item.boundTo || 0) > 0 ${(item.boundTo || 0) > 0
? html`<i class="pf-icon pf-icon-ok"></i> ? html`<ak-label color=${PFColor.Green}>
<small>${t`Assigned to ${item.boundTo} object(s).`}</small>` ${t`Assigned to ${item.boundTo} object(s).`}
: html`<i class="pf-icon pf-icon-warning-triangle"></i> </ak-label>`
<small>${t`Warning: Policy is not assigned.`}</small>`} : html`<ak-label color=${PFColor.Orange}>
</div>`, ${t`Warning: Policy is not assigned.`}
</ak-label>`}`,
html`${item.verboseName}`, html`${item.verboseName}`,
html` <ak-forms-modal> html` <ak-forms-modal>
<span slot="submit"> ${t`Update`} </span> <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[] { row(item: Stage): TemplateResult[] {
return [ return [
html`<div> html`<div>${item.name}</div>
<div>${item.name}</div> <small>${item.verboseName}</small>`,
<small>${item.verboseName}</small>
</div>`,
html`<ul class="pf-c-list"> html`<ul class="pf-c-list">
${item.flowSet?.map((flow) => { ${item.flowSet?.map((flow) => {
return html`<li> 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[] { row(item: Token): TemplateResult[] {
return [ return [
html`<div> html`<div>${item.identifier}</div>
<div>${item.identifier}</div> ${item.managed ? html`<small>${t`Token is managed by authentik.`}</small>` : html``}`,
${item.managed ? html`<small>${t`Token is managed by authentik.`}</small>` : html``}
</div>`,
html`<a href="#/identity/users/${item.userObj?.pk}">${item.userObj?.username}</a>`, html`<a href="#/identity/users/${item.userObj?.pk}">${item.userObj?.username}</a>`,
html` <ak-label color=${item.expiring ? PFColor.Green : PFColor.Orange}> html` <ak-label color=${item.expiring ? PFColor.Green : PFColor.Orange}>
${item.expiring ? t`Yes` : t`No`} ${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); 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 { .pf-c-description-list__description .pf-c-button {
margin-right: 6px; margin-right: 6px;
margin-bottom: 6px; margin-bottom: 6px;