web: fix card titles

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-03-20 15:38:09 +01:00
parent f54cc79f6b
commit 45a397bd77
8 changed files with 40 additions and 44 deletions

View File

@ -1,7 +1,7 @@
{% load i18n %} {% load i18n %}
<div class="pf-c-card"> <div class="pf-c-card">
<div class="pf-c-card__header pf-c-title pf-m-md"> <div class="pf-c-card__title">
{% trans 'Update details' %} {% trans 'Update details' %}
</div> </div>
<div class="pf-c-card__body"> <div class="pf-c-card__body">

View File

@ -1,7 +1,7 @@
{% load i18n %} {% load i18n %}
<div class="pf-c-card"> <div class="pf-c-card">
<div class="pf-c-card__header pf-c-title pf-m-md"> <div class="pf-pf-c-card__title">
{% blocktrans with source_name=source.name %} {% blocktrans with source_name=source.name %}
Source {{ source_name }} Source {{ source_name }}
{% endblocktrans %} {% endblocktrans %}

View File

@ -1,7 +1,7 @@
{% load i18n %} {% load i18n %}
<div class="pf-c-card"> <div class="pf-c-card">
<div class="pf-c-card__header pf-c-title pf-m-md"> <div class="pf-c-card__title">
{% trans "Static One-Time Passwords" %} {% trans "Static One-Time Passwords" %}
</div> </div>
<div class="pf-c-card__body"> <div class="pf-c-card__body">

View File

@ -1,7 +1,7 @@
{% load i18n %} {% load i18n %}
<div class="pf-c-card"> <div class="pf-c-card">
<div class="pf-c-card__header pf-c-title pf-m-md"> <div class="pf-c-card__title">
{% trans "Time-based One-Time Passwords" %} {% trans "Time-based One-Time Passwords" %}
</div> </div>
<div class="pf-c-card__body"> <div class="pf-c-card__body">

View File

@ -2,7 +2,7 @@
{% load humanize %} {% load humanize %}
<div class="pf-c-card"> <div class="pf-c-card">
<div class="pf-c-card__header pf-c-title pf-m-md"> <div class="pf-c-card__title">
{% trans "WebAuthn Devices" %} {% trans "WebAuthn Devices" %}
</div> </div>
<div class="pf-c-card__body"> <div class="pf-c-card__body">

View File

@ -2,7 +2,7 @@
{% load authentik_utils %} {% load authentik_utils %}
<div class="pf-c-card"> <div class="pf-c-card">
<div class="pf-c-card__header pf-c-title pf-m-md"> <div class="pf-c-card__title">
{% trans 'Reset your password' %} {% trans 'Reset your password' %}
</div> </div>
<div class="pf-c-card__body"> <div class="pf-c-card__body">

View File

@ -76,11 +76,7 @@ export class ApplicationViewPage extends LitElement {
<section slot="page-1" data-tab-title="${gettext("Overview")}" class="pf-c-page__main-section pf-m-no-padding-mobile"> <section slot="page-1" data-tab-title="${gettext("Overview")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-l-gallery pf-m-gutter"> <div class="pf-l-gallery pf-m-gutter">
<div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-4-col" style="grid-column-end: span 3;grid-row-end: span 2;"> <div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-4-col" style="grid-column-end: span 3;grid-row-end: span 2;">
<div class="pf-c-card__header"> <div class="pf-c-card__title">${gettext("Logins over the last 24 hours")}</div>
<div class="pf-c-card__header-main">
<i class="pf-icon pf-icon-server"></i> ${gettext("Logins over the last 24 hours")}
</div>
</div>
<div class="pf-c-card__body"> <div class="pf-c-card__body">
${this.application ? html` ${this.application ? html`
<ak-charts-application-authorize applicationSlug=${this.application.slug}> <ak-charts-application-authorize applicationSlug=${this.application.slug}>
@ -88,11 +84,7 @@ export class ApplicationViewPage extends LitElement {
</div> </div>
</div> </div>
<div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-2-col"> <div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-2-col">
<div class="pf-c-card__header"> <div class="pf-c-card__title">${gettext("Related")}</div>
<div class="pf-c-card__header-main">
<i class="fas fa-external-link-alt"></i> ${gettext("Related")}
</div>
</div>
<div class="pf-c-card__body"> <div class="pf-c-card__body">
<dl class="pf-c-description-list"> <dl class="pf-c-description-list">
${this.application.provider ? ${this.application.provider ?
@ -113,11 +105,7 @@ export class ApplicationViewPage extends LitElement {
</div> </div>
</div> </div>
<div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-4-col" style="grid-column-end: span 3;grid-row-end: span 2;"> <div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-4-col" style="grid-column-end: span 3;grid-row-end: span 2;">
<div class="pf-c-card__header"> <div class="pf-c-card__title">${gettext("Changelog")}</div>
<div class="pf-c-card__header-main">
<i class="pf-icon pf-icon-server"></i> ${gettext("Changelog")}
</div>
</div>
<div class="pf-c-card__body"> <div class="pf-c-card__body">
<ak-object-changelog <ak-object-changelog
targetModelPk=${this.application.pk || ""} targetModelPk=${this.application.pk || ""}
@ -130,11 +118,7 @@ export class ApplicationViewPage extends LitElement {
</section> </section>
<div slot="page-2" data-tab-title="${gettext("Policy Bindings")}" class="pf-c-page__main-section pf-m-no-padding-mobile"> <div slot="page-2" data-tab-title="${gettext("Policy Bindings")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card"> <div class="pf-c-card">
<div class="pf-c-card__header"> <div class="pf-c-card__title">${gettext("These policies control which users can access this application.")}</div>
<div class="pf-c-card__header-main">
${gettext("These policies control which users can access this application.")}
</div>
</div>
<ak-bound-policies-list .target=${this.application.pk}> <ak-bound-policies-list .target=${this.application.pk}>
</ak-bound-policies-list> </ak-bound-policies-list>
</div> </div>

View File

@ -12,9 +12,13 @@ import { Flow, FlowsApi } from "authentik-api";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import PFPage from "@patternfly/patternfly/components/Page/page.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css";
import AKGlobal from "../../authentik.css"; import AKGlobal from "../../authentik.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
@customElement("ak-flow-view") @customElement("ak-flow-view")
export class FlowViewPage extends LitElement { export class FlowViewPage extends LitElement {
@ -31,7 +35,7 @@ export class FlowViewPage extends LitElement {
flow!: Flow; flow!: Flow;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFBase, PFPage, PFContent, AKGlobal].concat( return [PFBase, PFPage, PFCard, PFContent, PFFlex, PFSizing, PFDisplay, AKGlobal].concat(
css` css`
img.pf-icon { img.pf-icon {
max-height: 24px; max-height: 24px;
@ -57,36 +61,44 @@ export class FlowViewPage extends LitElement {
</div> </div>
</section> </section>
<ak-tabs> <ak-tabs>
<div slot="page-1" data-tab-title="${gettext("Flow Diagram")}" class="pf-c-page__main-section pf-m-no-padding-mobile"> <div slot="page-1" data-tab-title="${gettext("Flow Overview")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card"> <div class="pf-u-display-flex">
<ak-flow-diagram flowSlug=${this.flow.slug}> <div class="pf-u-w-75">
</ak-flow-diagram> <div class="pf-c-card">
<div class="pf-c-card__body">
<ak-flow-diagram flowSlug=${this.flow.slug}>
</ak-flow-diagram>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div slot="page-2" data-tab-title="${gettext("Stage Bindings")}" class="pf-c-page__main-section pf-m-no-padding-mobile"> <div slot="page-2" data-tab-title="${gettext("Stage Bindings")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card"> <div class="pf-c-card">
<ak-bound-stages-list .target=${this.flow.pk}> <div class="pf-c-card__body">
</ak-bound-stages-list> <ak-bound-stages-list .target=${this.flow.pk}>
</ak-bound-stages-list>
</div>
</div> </div>
</div> </div>
<div slot="page-3" data-tab-title="${gettext("Policy Bindings")}" class="pf-c-page__main-section pf-m-no-padding-mobile"> <div slot="page-3" data-tab-title="${gettext("Policy Bindings")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card"> <div class="pf-c-card">
<div class="pf-c-card__header"> <div class="pf-c-card__title">${gettext("These policies control which users can access this flow.")}</div>
<div class="pf-c-card__header-main"> <div class="pf-c-card__body">
${gettext("These policies control which users can access this flow.")} <ak-bound-policies-list .target=${this.flow.policybindingmodelPtrId}>
</div> </ak-bound-policies-list>
</div> </div>
<ak-bound-policies-list .target=${this.flow.policybindingmodelPtrId}>
</ak-bound-policies-list>
</div> </div>
</div> </div>
<div slot="page-4" data-tab-title="${gettext("Changelog")}" class="pf-c-page__main-section pf-m-no-padding-mobile"> <div slot="page-4" data-tab-title="${gettext("Changelog")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card"> <div class="pf-c-card">
<ak-object-changelog <div class="pf-c-card__body">
targetModelPk=${this.flow.pk || ""} <ak-object-changelog
targetModelApp="authentik_flows" targetModelPk=${this.flow.pk || ""}
targetModelName="flow"> targetModelApp="authentik_flows"
</ak-object-changelog> targetModelName="flow">
</ak-object-changelog>
</div>
</div> </div>
</div> </div>
</ak-tabs>`; </ak-tabs>`;