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

web/library: Updated applications card display (#1257)

Browse source
This commit is contained in:
George V 2021-08-15 21:19:50 +03:00 committed by GitHub
parent 04861b1b00
commit 700c66f312
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
web/src/pages/LibraryPage.ts
View file

@ -25,6 +25,7 @@ import PFContent from "@patternfly/patternfly/components/Content/content.css";
import AKGlobal from "../authentik.css"; import AKGlobal from "../authentik.css";
import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css"; import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css"; import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
@customElement("ak-library-app") @customElement("ak-library-app")
export class LibraryApplication extends LitElement { export class LibraryApplication extends LitElement {
@ -35,6 +36,7 @@ export class LibraryApplication extends LitElement {
return [ return [
PFBase, PFBase,
PFCard, PFCard,
PFButton,
PFAvatar, PFAvatar,
AKGlobal, AKGlobal,
css` css`
@ -68,23 +70,20 @@ export class LibraryApplication extends LitElement {
if (!this.application) { if (!this.application) {
return html`<ak-spinner></ak-spinner>`; return html`<ak-spinner></ak-spinner>`;
} }
return html` <a return html` <div class="pf-c-card pf-m-hoverable pf-m-compact ak-lib-card">
href="${ifDefined(this.application.launchUrl ?? "")}"
class="pf-c-card pf-m-hoverable pf-m-compact"
>
<div class="pf-c-card__header"> <div class="pf-c-card__header">
${this.application.metaIcon ${this.application.metaIcon
? html`<img ? html`<a href="${ifDefined(this.application.launchUrl ?? "")}"><img
class="app-icon pf-c-avatar" class="app-icon pf-c-avatar"
src="${ifDefined(this.application.metaIcon)}" src="${ifDefined(this.application.metaIcon)}"
alt="Application Icon" alt="Application Icon"
/>` /></a>`
: html`<i class="fas fas fa-share-square"></i>`} : html`<i class="fas fas fa-share-square"></i>`}
${until( ${until(
me().then((u) => { me().then((u) => {
if (!u.user.isSuperuser) return html``; if (!u.user.isSuperuser) return html``;
return html` return html`
<a href="#/core/applications/${this.application?.slug}"> <a class="pf-c-button pf-m-control pf-m-small" href="#/core/applications/${this.application?.slug}">
<i class="fas fa-pencil-alt"></i> <i class="fas fa-pencil-alt"></i>
</a> </a>
`; `;
@ -92,13 +91,13 @@ export class LibraryApplication extends LitElement {
)} )}
</div> </div>
<div class="pf-c-card__title"> <div class="pf-c-card__title">
<p id="card-1-check-label">${this.application.name}</p> <p id="card-1-check-label"><a href="${ifDefined(this.application.launchUrl ?? "")}">${this.application.name}</a></p>
<div class="pf-c-content"> <div class="pf-c-content">
<small>${this.application.metaPublisher}</small> <small>${this.application.metaPublisher}</small>
</div> </div>
</div> </div>
<div class="pf-c-card__body">${truncate(this.application.metaDescription, 35)}</div> <div class="pf-c-card__body">${truncate(this.application.metaDescription, 35)}</div>
</a>`; </div>`;
} }
} }