habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/admin: Fix layout on mobile/tablet.

Browse Source
This commit is contained in:
Teffen Ellis
2025-04-24 15:44:44 +02:00
parent 00eff9871f
commit 7b7ad9b63a
2 changed files with 38 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
web/src/admin/admin-overview/AdminOverviewPage.ts
View File

@ -58,9 +58,6 @@ export class AdminOverviewPage extends AdminOverviewBase {
PFContent, PFContent,
PFDivider, PFDivider,
css` css`
.pf-l-grid__item {
height: 100%;
}
.pf-l-grid__item.big-graph-container { .pf-l-grid__item.big-graph-container {
height: 35em; height: 35em;
} }
@ -74,6 +71,10 @@ export class AdminOverviewPage extends AdminOverviewBase {
line-height: normal; line-height: normal;
font-size: var(--pf-global--icon--FontSize--sm); font-size: var(--pf-global--icon--FontSize--sm);
} }
.chart-item {
aspect-ratio: 2 / 1;
}
`, `,
]; ];
} }
@ -104,15 +105,21 @@ export class AdminOverviewPage extends AdminOverviewBase {
</ak-page-header> </ak-page-header>
<section class="pf-c-page__main-section"> <section class="pf-c-page__main-section">
<div class="pf-l-grid pf-m-gutter"> <div class="pf-l-grid pf-m-gutter">
<!-- row 1 --> <div class="pf-l-grid__item pf-m-12-col pf-m-2-row pf-m-9-col-on-xl">
<div <ak-recent-events pageSize="6"></ak-recent-events>
class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-6-col-on-2xl pf-l-grid pf-m-gutter" </div>
> <div class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-sm pf-m-3-col-on-xl">
<div class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-4-col-on-2xl">
<ak-quick-actions-card .actions=${this.quickActions}> <ak-quick-actions-card .actions=${this.quickActions}>
</ak-quick-actions-card> </ak-quick-actions-card>
</div> </div>
<div class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-4-col-on-2xl">
<div class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-sm pf-m-3-col-on-xl">
<ak-admin-status-version> </ak-admin-status-version>
</div>
<div class="pf-l-grid pf-l-grid__item pf-m-12-col pf-m-gutter">
${this.renderSecondaryRow()}
<div class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-md chart-item">
<ak-aggregate-card <ak-aggregate-card
icon="pf-icon pf-icon-zone" icon="pf-icon pf-icon-zone"
header=${msg("Outpost status")} header=${msg("Outpost status")}
@ -121,24 +128,13 @@ export class AdminOverviewPage extends AdminOverviewBase {
<ak-admin-status-chart-outpost></ak-admin-status-chart-outpost> <ak-admin-status-chart-outpost></ak-admin-status-chart-outpost>
</ak-aggregate-card> </ak-aggregate-card>
</div> </div>
<div <div class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-md chart-item">
class="pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-4-col-on-2xl"
>
<ak-aggregate-card icon="fa fa-sync-alt" header=${msg("Sync status")}> <ak-aggregate-card icon="fa fa-sync-alt" header=${msg("Sync status")}>
<ak-admin-status-chart-sync></ak-admin-status-chart-sync> <ak-admin-status-chart-sync></ak-admin-status-chart-sync>
</ak-aggregate-card> </ak-aggregate-card>
</div> </div>
<div class="pf-l-grid__item pf-m-12-col">
<hr class="pf-c-divider" />
</div>
${this.renderCards()}
</div>
<div class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl">
<ak-recent-events pageSize="6"></ak-recent-events>
</div>
<div class="pf-l-grid__item pf-m-12-col">
<hr class="pf-c-divider" />
</div> </div>
<!-- row 3 --> <!-- row 3 -->
<div <div
class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-8-col-on-2xl big-graph-container" class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-8-col-on-2xl big-graph-container"
@ -166,32 +162,34 @@ export class AdminOverviewPage extends AdminOverviewBase {
</section>`; </section>`;
} }
renderCards() { renderSecondaryRow() {
const isEnterprise = this.hasEnterpriseLicense; const isEnterprise = this.hasEnterpriseLicense;
const colSpan = isEnterprise ? 4 : 6;
const classes = { const classes = {
"card-container": true, "card-container": true,
"pf-l-grid__item": true, "pf-l-grid__item": true,
"pf-m-6-col": true, [`pf-m-12-col`]: true,
"pf-m-4-col-on-md": !isEnterprise, [`pf-m-${colSpan}-col-on-md`]: true,
"pf-m-4-col-on-xl": !isEnterprise,
"pf-m-3-col-on-md": isEnterprise,
"pf-m-3-col-on-xl": isEnterprise,
}; };
return html`<div class=${classMap(classes)}> return html`
<div class=${classMap(classes)}>
<ak-admin-status-system> </ak-admin-status-system> <ak-admin-status-system> </ak-admin-status-system>
</div> </div>
<div class=${classMap(classes)}>
<ak-admin-status-version> </ak-admin-status-version>
</div>
<div class=${classMap(classes)}> <div class=${classMap(classes)}>
<ak-admin-status-card-workers> </ak-admin-status-card-workers> <ak-admin-status-card-workers> </ak-admin-status-card-workers>
</div> </div>
${isEnterprise ${isEnterprise
? html` <div class=${classMap(classes)}> ? html`
<div class=${classMap(classes)}>
<ak-admin-fips-status-system> </ak-admin-fips-status-system> <ak-admin-fips-status-system> </ak-admin-fips-status-system>
</div>` </div>
: nothing} `; `
: nothing}
`;
} }
renderActions() { renderActions() {

1
web/src/elements/cards/AggregateCard.ts
View File

@ -80,6 +80,7 @@ export class AggregateCard extends AKElement implements IAggregateCard {
.center-value { .center-value {
font-size: var(--pf-global--icon--FontSize--lg); font-size: var(--pf-global--icon--FontSize--lg);
text-align: center; text-align: center;
place-content: center;
} }
.subtext { .subtext {
margin-top: var(--pf-global--spacer--sm); margin-top: var(--pf-global--spacer--sm);