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 { DEFAULT_CONFIG } from "../../api/Config";
import PFPage from "@patternfly/patternfly/components/Page/page.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.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 PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
@ -45,7 +45,7 @@ export class ApplicationViewPage extends LitElement {
PFContent, PFContent,
PFButton, PFButton,
PFDescriptionList, PFDescriptionList,
PFGallery, PFGrid,
PFCard, PFCard,
AKGlobal, AKGlobal,
]; ];
@ -72,8 +72,8 @@ export class ApplicationViewPage extends LitElement {
data-tab-title="${t`Overview`}" data-tab-title="${t`Overview`}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-l-gallery pf-m-gutter"> <div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-gallery__item"> <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__title">${t`Related`}</div>
<div class="pf-c-card__body"> <div class="pf-c-card__body">
<dl class="pf-c-description-list"> <dl class="pf-c-description-list">
@ -187,8 +187,7 @@ export class ApplicationViewPage extends LitElement {
</div> </div>
</div> </div>
<div <div
class="pf-c-card pf-l-gallery__item" class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-10-col-on-xl pf-m-11-col-on-2xl"
style="grid-column-end: span 4;grid-row-end: span 2;"
> >
<div class="pf-c-card__title">${t`Logins over the last 24 hours`}</div> <div class="pf-c-card__title">${t`Logins over the last 24 hours`}</div>
<div class="pf-c-card__body"> <div class="pf-c-card__body">
@ -200,8 +199,7 @@ export class ApplicationViewPage extends LitElement {
</div> </div>
</div> </div>
<div <div
class="pf-c-card pf-l-gallery__item" class="pf-c-card pf-l-grid__item pf-m-12-col"
style="grid-column-end: span 5;grid-row-end: span 3;"
> >
<div class="pf-c-card__title">${t`Changelog`}</div> <div class="pf-c-card__title">${t`Changelog`}</div>
<div class="pf-c-card__body"> <div class="pf-c-card__body">
@ -215,7 +213,7 @@ export class ApplicationViewPage extends LitElement {
</div> </div>
</div> </div>
</section> </section>
<div <section
slot="page-policy-bindings" slot="page-policy-bindings"
data-tab-title="${t`Policy / Group / User Bindings`}" data-tab-title="${t`Policy / Group / User Bindings`}"
class="pf-c-page__main-section pf-m-no-padding-mobile" 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 .target=${this.application.pk}>
</ak-bound-policies-list> </ak-bound-policies-list>
</div> </div>
</div> </section>
</ak-tabs>`; </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 PFContent from "@patternfly/patternfly/components/Content/content.css";
import AKGlobal from "../../authentik.css"; import AKGlobal from "../../authentik.css";
import PFBase from "@patternfly/patternfly/patternfly-base.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") @customElement("ak-flow-view")
export class FlowViewPage extends LitElement { export class FlowViewPage extends LitElement {
@property() @property()
set flowSlug(value: string) { set flowSlug(value: string) {
new FlowsApi(DEFAULT_CONFIG) new FlowsApi(DEFAULT_CONFIG)
@ -44,7 +46,7 @@ export class FlowViewPage extends LitElement {
flow!: Flow; flow!: Flow;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFBase, PFPage, PFButton, PFCard, PFContent, PFGallery, AKGlobal].concat( return [PFBase, PFPage, PFDescriptionList, PFButton, PFCard, PFContent, PFGrid, AKGlobal].concat(
css` css`
img.pf-icon { img.pf-icon {
max-height: 24px; max-height: 24px;
@ -72,8 +74,8 @@ export class FlowViewPage extends LitElement {
data-tab-title="${t`Flow Overview`}" data-tab-title="${t`Flow Overview`}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-l-gallery pf-m-gutter"> <div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-gallery__item"> <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__title">${t`Related`}</div>
<div class="pf-c-card__body"> <div class="pf-c-card__body">
<dl class="pf-c-description-list"> <dl class="pf-c-description-list">
@ -122,8 +124,7 @@ export class FlowViewPage extends LitElement {
</div> </div>
</div> </div>
<div <div
class="pf-c-card pf-l-gallery__item" class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-10-col-on-xl pf-m-11-col-on-2xl"
style="grid-column-end: span 4;grid-row-end: span 2;"
> >
<div class="pf-c-card"> <div class="pf-c-card">
<div class="pf-c-card__body"> <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 PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.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 PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css"; import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css"; import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
@ -57,7 +57,7 @@ export class UserViewPage extends LitElement {
PFFlex, PFFlex,
PFButton, PFButton,
PFDisplay, PFDisplay,
PFGallery, PFGrid,
PFContent, PFContent,
PFCard, PFCard,
PFDescriptionList, PFDescriptionList,
@ -94,8 +94,8 @@ export class UserViewPage extends LitElement {
data-tab-title="${t`Overview`}" data-tab-title="${t`Overview`}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-l-gallery pf-m-gutter"> <div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-gallery__item"> <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__title">${t`User Info`}</div>
<div class="pf-c-card__body"> <div class="pf-c-card__body">
<dl class="pf-c-description-list"> <dl class="pf-c-description-list">
@ -211,9 +211,9 @@ export class UserViewPage extends LitElement {
</div> </div>
</div> </div>
<div <div
class="pf-c-card pf-l-gallery__item" class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-10-col-on-xl pf-m-11-col-on-2xl"
style="grid-column-end: span 4;grid-row-end: span 2;"
> >
<div class="pf-c-card__title">${t`Actions over the last 24 hours`}</div>
<div class="pf-c-card__body"> <div class="pf-c-card__body">
<ak-charts-user userId=${this.user.pk || 0}> </ak-charts-user> <ak-charts-user userId=${this.user.pk || 0}> </ak-charts-user>
</div> </div>