web/library: Updated applications card display (#1257)
This commit is contained in:
parent
04861b1b00
commit
700c66f312
|
@ -25,6 +25,7 @@ import PFContent from "@patternfly/patternfly/components/Content/content.css";
|
|||
import AKGlobal from "../authentik.css";
|
||||
import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
|
||||
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
|
||||
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||||
|
||||
@customElement("ak-library-app")
|
||||
export class LibraryApplication extends LitElement {
|
||||
|
@ -35,6 +36,7 @@ export class LibraryApplication extends LitElement {
|
|||
return [
|
||||
PFBase,
|
||||
PFCard,
|
||||
PFButton,
|
||||
PFAvatar,
|
||||
AKGlobal,
|
||||
css`
|
||||
|
@ -68,23 +70,20 @@ export class LibraryApplication extends LitElement {
|
|||
if (!this.application) {
|
||||
return html`<ak-spinner></ak-spinner>`;
|
||||
}
|
||||
return html` <a
|
||||
href="${ifDefined(this.application.launchUrl ?? "")}"
|
||||
class="pf-c-card pf-m-hoverable pf-m-compact"
|
||||
>
|
||||
return html` <div class="pf-c-card pf-m-hoverable pf-m-compact ak-lib-card">
|
||||
<div class="pf-c-card__header">
|
||||
${this.application.metaIcon
|
||||
? html`<img
|
||||
? html`<a href="${ifDefined(this.application.launchUrl ?? "")}"><img
|
||||
class="app-icon pf-c-avatar"
|
||||
src="${ifDefined(this.application.metaIcon)}"
|
||||
alt="Application Icon"
|
||||
/>`
|
||||
/></a>`
|
||||
: html`<i class="fas fas fa-share-square"></i>`}
|
||||
${until(
|
||||
me().then((u) => {
|
||||
if (!u.user.isSuperuser) 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>
|
||||
</a>
|
||||
`;
|
||||
|
@ -92,13 +91,13 @@ export class LibraryApplication extends LitElement {
|
|||
)}
|
||||
</div>
|
||||
<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">
|
||||
<small>${this.application.metaPublisher}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pf-c-card__body">${truncate(this.application.metaDescription, 35)}</div>
|
||||
</a>`;
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Reference in a new issue