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

web: migrate gallery to grid 

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-08-05 23:13:55 +02:00
parent f28bfdaeb9
commit 9703e32c1b
3 changed files with 21 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/pages/applications/ApplicationViewPage.ts
View File

@ -14,7 +14,7 @@ import { Application, CoreApi } from "authentik-api";
import { DEFAULT_CONFIG } from "../../api/Config";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
@ -45,7 +45,7 @@ export class ApplicationViewPage extends LitElement {
PFContent,
PFButton,
PFDescriptionList,
PFGallery,
PFGrid,
PFCard,
AKGlobal,
];
@ -72,8 +72,8 @@ export class ApplicationViewPage extends LitElement {
data-tab-title="${t`Overview`}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-l-gallery pf-m-gutter">
<div class="pf-c-card pf-l-gallery__item">
<div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-2-col-on-xl pf-m-1-col-on-2xl">
<div class="pf-c-card__title">${t`Related`}</div>
<div class="pf-c-card__body">
<dl class="pf-c-description-list">
@ -187,8 +187,7 @@ export class ApplicationViewPage extends LitElement {
</div>
</div>
<div
class="pf-c-card pf-l-gallery__item"
style="grid-column-end: span 4;grid-row-end: span 2;"
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-10-col-on-xl pf-m-11-col-on-2xl"
>
<div class="pf-c-card__title">${t`Logins over the last 24 hours`}</div>
<div class="pf-c-card__body">
@ -200,8 +199,7 @@ export class ApplicationViewPage extends LitElement {
</div>
</div>
<div
class="pf-c-card pf-l-gallery__item"
style="grid-column-end: span 5;grid-row-end: span 3;"
class="pf-c-card pf-l-grid__item pf-m-12-col"
>
<div class="pf-c-card__title">${t`Changelog`}</div>
<div class="pf-c-card__body">
@ -215,7 +213,7 @@ export class ApplicationViewPage extends LitElement {
</div>
</div>
</section>
<div
<section
slot="page-policy-bindings"
data-tab-title="${t`Policy / Group / User Bindings`}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
@ -227,7 +225,7 @@ export class ApplicationViewPage extends LitElement {
<ak-bound-policies-list .target=${this.application.pk}>
</ak-bound-policies-list>
</div>
</div>
</section>
</ak-tabs>`;
}
}

13
web/src/pages/flows/FlowViewPage.ts
View File

@ -25,10 +25,12 @@ import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import AKGlobal from "../../authentik.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
@customElement("ak-flow-view")
export class FlowViewPage extends LitElement {
@property()
set flowSlug(value: string) {
new FlowsApi(DEFAULT_CONFIG)
@ -44,7 +46,7 @@ export class FlowViewPage extends LitElement {
flow!: Flow;
static get styles(): CSSResult[] {
return [PFBase, PFPage, PFButton, PFCard, PFContent, PFGallery, AKGlobal].concat(
return [PFBase, PFPage, PFDescriptionList, PFButton, PFCard, PFContent, PFGrid, AKGlobal].concat(
css`
img.pf-icon {
max-height: 24px;
@ -72,8 +74,8 @@ export class FlowViewPage extends LitElement {
data-tab-title="${t`Flow Overview`}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-l-gallery pf-m-gutter">
<div class="pf-c-card pf-l-gallery__item">
<div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-2-col-on-xl pf-m-1-col-on-2xl">
<div class="pf-c-card__title">${t`Related`}</div>
<div class="pf-c-card__body">
<dl class="pf-c-description-list">
@ -122,8 +124,7 @@ export class FlowViewPage extends LitElement {
</div>
</div>
<div
class="pf-c-card pf-l-gallery__item"
style="grid-column-end: span 4;grid-row-end: span 2;"
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-10-col-on-xl pf-m-11-col-on-2xl"
>
<div class="pf-c-card">
<div class="pf-c-card__body">

12
web/src/pages/users/UserViewPage.ts
View File

@ -3,7 +3,7 @@ import { CSSResult, customElement, html, LitElement, property, TemplateResult }
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
@ -57,7 +57,7 @@ export class UserViewPage extends LitElement {
PFFlex,
PFButton,
PFDisplay,
PFGallery,
PFGrid,
PFContent,
PFCard,
PFDescriptionList,
@ -94,8 +94,8 @@ export class UserViewPage extends LitElement {
data-tab-title="${t`Overview`}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-l-gallery pf-m-gutter">
<div class="pf-c-card pf-l-gallery__item">
<div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-2-col-on-xl pf-m-1-col-on-2xl">
<div class="pf-c-card__title">${t`User Info`}</div>
<div class="pf-c-card__body">
<dl class="pf-c-description-list">
@ -211,9 +211,9 @@ export class UserViewPage extends LitElement {
</div>
</div>
<div
class="pf-c-card pf-l-gallery__item"
style="grid-column-end: span 4;grid-row-end: span 2;"
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-10-col-on-xl pf-m-11-col-on-2xl"
>
<div class="pf-c-card__title">${t`Actions over the last 24 hours`}</div>
<div class="pf-c-card__body">
<ak-charts-user userId=${this.user.pk || 0}> </ak-charts-user>
</div>