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

web: fix display issues with challenges using pending_user_avatar

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-03-17 22:19:31 +01:00
parent a8d411a77b
commit a54fa7c9b1
7 changed files with 40 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/src/flows/FormStatic.ts
View File

@ -1,10 +1,19 @@
import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
import { gettext } from "django";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
import { ifDefined } from "lit-html/directives/if-defined";
@customElement("ak-form-static")
export class FormStatic extends LitElement {
@property()
userAvatar?: string;
@property()
user = "";
static get styles(): CSSResult[] {
return [css`
return [PFAvatar, css`
/* Form with user */
.form-control-static {
margin-top: var(--pf-global--spacer--sm);
@ -12,7 +21,7 @@ export class FormStatic extends LitElement {
align-items: center;
justify-content: space-between;
}
.form-control-static slot[name=avatar] {
.form-control-static .avatar {
display: flex;
align-items: center;
}
@ -30,7 +39,10 @@ export class FormStatic extends LitElement {
render(): TemplateResult {
return html`
<div class="form-control-static">
<slot name="avatar"></slot>
<div class="avatar">
<img class="pf-c-avatar" src="${ifDefined(this.userAvatar)}" alt="${gettext("User's avatar")}">
${this.user}
</div>
<slot name="link"></slot>
</div>
`;