web: migrate gallery to grid

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/pages/applications/ApplicationViewPage.ts

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

web/src/pages/flows/FlowViewPage.ts

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

web/src/pages/users/UserViewPage.ts

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