habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: add placeholder config, fix sizing of sidebar brand

Browse Source
This commit is contained in:
Jens Langhammer
2020-12-01 13:16:13 +01:00
parent 7bb26b5903
commit 71fbb23a2f
4 changed files with 278 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/elements/sidebar/Sidebar.ts
View File

@ -143,6 +143,10 @@ export class Sidebar extends LitElement {
PageStyle,
NavStyle,
css`
.pf-c-nav__list .sidebar-brand {
max-height: 82px;
margin-bottom: 0.5rem;
}
.pf-c-nav__link {
--pf-c-nav__link--PaddingTop: 0.5rem;
--pf-c-nav__link--PaddingRight: 0.5rem;
@ -207,7 +211,7 @@ export class Sidebar extends LitElement {
return html`<div class="pf-c-page__sidebar-body">
<nav class="pf-c-nav" aria-label="Global">
<ul class="pf-c-nav__list">
<li class="pf-c-nav__item">
<li class="pf-c-nav__item sidebar-brand">
<pb-sidebar-brand></pb-sidebar-brand>
</li>
${SIDEBAR_ITEMS.map((i) => this.renderItem(i))}

17
web/src/elements/sidebar/SidebarBrand.ts
View File

@ -5,10 +5,15 @@ import PageStyle from "@patternfly/patternfly/components/Page/page.css";
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
import { Config } from "../../api/config";
export const DefaultConfig: Config = {
branding_logo: " /static/dist/assets/images/logo.svg",
branding_title: "passbook",
};
@customElement("pb-sidebar-brand")
export class SidebarBrand extends LitElement {
@property()
config?: Config;
config: Config = DefaultConfig;
static get styles() {
return [
@ -44,12 +49,12 @@ export class SidebarBrand extends LitElement {
if (!this.config) {
return html``;
}
return html` <a href="" class="pf-c-page__header-brand-link">
return html` <a href="#/" class="pf-c-page__header-brand-link">
<div class="pf-c-brand pb-brand">
<img src="${this.config?.branding_logo}" alt="passbook icon" loading="lazy" />
${this.config?.branding_title
? html`<span>${this.config.branding_title}</span>`
: ""}
<img src="${this.config.branding_logo}" alt="passbook icon" loading="lazy" />
${this.config.branding_title
? html`<span>${this.config.branding_title}</span>`
: ""}
</div>
</a>`;
}