diff --git a/web/src/common/config.ts b/web/src/common/config.ts index 619fc6be7..23da2fbaa 100644 --- a/web/src/common/config.ts +++ b/web/src/common/config.ts @@ -3,9 +3,15 @@ import { UserSelf } from "@goauthentik/api"; import { me } from "../api/Users"; export enum UserDisplay { - "username", - "name", - "email", + username = "username", + name = "name", + email = "email", +} + +export enum LayoutType { + row = "row", + column_2 = "2-column", + column_3 = "3-column", } export interface UIConfig { @@ -31,6 +37,9 @@ export interface UIConfig { pagination: { perPage: number; }; + layout: { + type: LayoutType; + }; locale: string; } @@ -42,6 +51,9 @@ export class DefaultUIConfig implements UIConfig { applicationEdit: true, search: true, }; + layout = { + type: LayoutType.row, + }; navbar = { userDisplay: UserDisplay.username, }; diff --git a/web/src/user/LibraryPage.ts b/web/src/user/LibraryPage.ts index 8ea108013..f24399fc3 100644 --- a/web/src/user/LibraryPage.ts +++ b/web/src/user/LibraryPage.ts @@ -19,7 +19,7 @@ import { Application, CoreApi } from "@goauthentik/api"; import { AKResponse } from "../api/Client"; import { DEFAULT_CONFIG } from "../api/Config"; -import { UIConfig, uiConfig } from "../common/config"; +import { LayoutType, UIConfig, uiConfig } from "../common/config"; import { getURLParam, updateURLParams } from "../elements/router/RouteMatch"; import { groupBy, loading } from "../utils"; import "./LibraryApplication"; @@ -79,6 +79,9 @@ export class LibraryPage extends LitElement { .header input:focus { outline: 0; } + .pf-c-page__main { + overflow: hidden; + } .pf-c-page__main-section { background-color: transparent; } @@ -119,25 +122,44 @@ export class LibraryPage extends LitElement { } renderApps(config: UIConfig): TemplateResult { - return html`${this.getApps().map(([group, apps]) => { - return html` -
-

${group}

-
-
- ${apps.map((app) => { - return html``; - })} -
- `; - })}`; + let groupClass = ""; + let groupGrid = ""; + switch (config.layout.type) { + case LayoutType.row: + groupClass = "pf-m-12-col"; + groupGrid = + "pf-m-all-6-col-on-sm pf-m-all-4-col-on-md pf-m-all-5-col-on-lg pf-m-all-2-col-on-xl"; + break; + case LayoutType.column_2: + groupClass = "pf-m-6-col"; + groupGrid = + "pf-m-all-12-col-on-sm pf-m-all-12-col-on-md pf-m-all-4-col-on-lg pf-m-all-4-col-on-xl"; + break; + case LayoutType.column_3: + groupClass = "pf-m-4-col"; + groupGrid = + "pf-m-all-12-col-on-sm pf-m-all-12-col-on-md pf-m-all-6-col-on-lg pf-m-all-4-col-on-xl"; + break; + } + return html`
+ ${this.getApps().map(([group, apps]) => { + return html`
+
+

${group}

+
+
+ ${apps.map((app) => { + return html``; + })} +
+
`; + })} +
`; } render(): TemplateResult {