web/elements: add PageHeader element to replace page

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-04-10 17:06:54 +02:00
parent 1fbf6be6c2
commit 6f7fb4c919
23 changed files with 456 additions and 561 deletions

View File

@ -18,6 +18,7 @@ import { DEFAULT_CONFIG } from "../../api/Config";
import { until } from "lit-html/directives/until";
import { ifDefined } from "lit-html/directives/if-defined";
import "../../elements/Tabs";
import "../../elements/PageHeader";
import "./tokens/UserTokenList";
import "./UserDetailsPage";
import "./settings/UserSettingsAuthenticatorTOTP";
@ -65,15 +66,11 @@ export class UserSettingsPage extends LitElement {
render(): TemplateResult {
return html`<div class="pf-c-page">
<main role="main" class="pf-c-page__main" tabindex="-1">
<section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content">
<h1>
<i class="pf-icon pf-icon-user"></i>
${t`User Settings`}
</h1>
<p>${t`Configure settings relevant to your user profile.`}</p>
</div>
</section>
<ak-page-header
icon="pf-icon pf-icon-user"
header=${t`User Settings`}
description=${t`Configure settings relevant to your user profile.`}>
</ak-page-header>
<ak-tabs ?vertical="${true}" style="height: 100%;">
<section slot="page-1" data-tab-title="${t`User details`}" class="pf-c-page__main-section pf-m-no-padding-mobile">
<ak-user-details></ak-user-details>