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

unrelated: switch to non-vertical tabs on smaller viewport 

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens Langhammer 2024-01-08 14:29:25 +01:00
parent 23a198ddd8
commit 2b6049eda3
No known key found for this signature in database
2 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/elements/Tabs.ts
View File

@ -18,9 +18,17 @@ export class Tabs extends AKElement {
@property() @property()
currentPage?: string; currentPage?: string;
@property({ type: Boolean }) @property({ type: Boolean, reflect: true })
vertical = false; vertical = false;
@property({ type: Boolean })
autoVertical = false;
@property({ attribute: false })
verticalEnabled = (): boolean => {
return this.vertical;
};
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [ return [
PFGlobal, PFGlobal,
@ -46,12 +54,16 @@ export class Tabs extends AKElement {
} }
observer: MutationObserver; observer: MutationObserver;
resizer: ResizeObserver;
constructor() { constructor() {
super(); super();
this.observer = new MutationObserver(() => { this.observer = new MutationObserver(() => {
this.requestUpdate(); this.requestUpdate();
}); });
this.resizer = new ResizeObserver(() => {
this.vertical = this.verticalEnabled();
});
} }
connectedCallback(): void { connectedCallback(): void {
@ -61,10 +73,12 @@ export class Tabs extends AKElement {
childList: true, childList: true,
subtree: true, subtree: true,
}); });
this.resizer.observe(document.body);
} }
disconnectedCallback(): void { disconnectedCallback(): void {
this.observer.disconnect(); this.observer.disconnect();
this.resizer.disconnect();
super.disconnectedCallback(); super.disconnectedCallback();
} }
@ -106,7 +120,7 @@ export class Tabs extends AKElement {
const wantedPage = pages[0].attributes.getNamedItem("slot")?.value; const wantedPage = pages[0].attributes.getNamedItem("slot")?.value;
this.onClick(wantedPage); this.onClick(wantedPage);
} }
return html`<div class="pf-c-tabs ${this.vertical ? "pf-m-vertical pf-m-box" : ""}"> return html`<div class="pf-c-tabs ${this.vertical ? "pf-m-vertical" : ""}">
<ul class="pf-c-tabs__list"> <ul class="pf-c-tabs__list">
${pages.map((page) => this.renderTab(page))} ${pages.map((page) => this.renderTab(page))}
</ul> </ul>

7
web/src/user/user-settings/UserSettingsPage.ts
View File

@ -90,7 +90,12 @@ export class UserSettingsPage extends AKElement {
[]; [];
return html`<div class="pf-c-page"> return html`<div class="pf-c-page">
<main role="main" class="pf-c-page__main" tabindex="-1"> <main role="main" class="pf-c-page__main" tabindex="-1">
<ak-tabs ?vertical="${true}"> <ak-tabs
?autoVertical="${true}"
.verticalEnabled=${() => {
return document.body.getBoundingClientRect().width >= 780;
}}
>
<section <section
slot="page-details" slot="page-details"
data-tab-title="${msg("User details")}" data-tab-title="${msg("User details")}"