web: fix display of radio buttons on wizard pages

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-05-18 23:09:02 +02:00
parent 11f7935155
commit 3b0b6dcf29
6 changed files with 24 additions and 18 deletions

View file

@ -6,6 +6,7 @@ import { property } from "lit/decorators.js";
import AKGlobal from "../../authentik.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
@ -25,11 +26,11 @@ export class InitialServiceConnectionWizardPage extends WizardPage {
connectionTypes: TypeCreate[] = [];
static get styles(): CSSResult[] {
return [PFBase, PFButton, AKGlobal, PFRadio];
return [PFBase, PFForm, PFButton, AKGlobal, PFRadio];
}
render(): TemplateResult {
return html`
return html`<form class="pf-c-form pf-m-horizontal">
${this.connectionTypes.map((type) => {
return html`<div class="pf-c-radio">
<input
@ -51,7 +52,7 @@ export class InitialServiceConnectionWizardPage extends WizardPage {
<span class="pf-c-radio__description">${type.description}</span>
</div>`;
})}
`;
</form>`;
}
}

View file

@ -6,6 +6,7 @@ import { property } from "lit/decorators.js";
import AKGlobal from "../../authentik.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
@ -30,11 +31,11 @@ export class InitialPolicyWizardPage extends WizardPage {
policyTypes: TypeCreate[] = [];
static get styles(): CSSResult[] {
return [PFBase, PFButton, AKGlobal, PFRadio];
return [PFBase, PFForm, PFButton, AKGlobal, PFRadio];
}
render(): TemplateResult {
return html`
return html`<form class="pf-c-form pf-m-horizontal">
${this.policyTypes.map((type) => {
return html`<div class="pf-c-radio">
<input
@ -56,7 +57,7 @@ export class InitialPolicyWizardPage extends WizardPage {
<span class="pf-c-radio__description">${type.description}</span>
</div>`;
})}
`;
</form>`;
}
}

View file

@ -6,6 +6,7 @@ import { property } from "lit/decorators.js";
import AKGlobal from "../../authentik.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
@ -28,11 +29,11 @@ export class InitialPropertyMappingWizardPage extends WizardPage {
mappingTypes: TypeCreate[] = [];
static get styles(): CSSResult[] {
return [PFBase, PFButton, AKGlobal, PFRadio];
return [PFBase, PFForm, PFButton, AKGlobal, PFRadio];
}
render(): TemplateResult {
return html`
return html`<form class="pf-c-form pf-m-horizontal">
${this.mappingTypes.map((type) => {
return html`<div class="pf-c-radio">
<input
@ -54,7 +55,7 @@ export class InitialPropertyMappingWizardPage extends WizardPage {
<span class="pf-c-radio__description">${type.description}</span>
</div>`;
})}
`;
</form>`;
}
}

View file

@ -6,6 +6,7 @@ import { property } from "lit/decorators.js";
import AKGlobal from "../../authentik.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
@ -28,11 +29,11 @@ export class InitialProviderWizardPage extends WizardPage {
providerTypes: TypeCreate[] = [];
static get styles(): CSSResult[] {
return [PFBase, PFButton, AKGlobal, PFRadio];
return [PFBase, PFForm, PFButton, AKGlobal, PFRadio];
}
render(): TemplateResult {
return html`
return html`<form class="pf-c-form pf-m-horizontal">
${this.providerTypes.map((type) => {
return html`<div class="pf-c-radio">
<input
@ -49,7 +50,7 @@ export class InitialProviderWizardPage extends WizardPage {
<span class="pf-c-radio__description">${type.description}</span>
</div>`;
})}
`;
</form> `;
}
}

View file

@ -6,6 +6,7 @@ import { property } from "lit/decorators.js";
import AKGlobal from "../../authentik.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
@ -27,11 +28,11 @@ export class InitialSourceWizardPage extends WizardPage {
sourceTypes: TypeCreate[] = [];
static get styles(): CSSResult[] {
return [PFBase, PFButton, AKGlobal, PFRadio];
return [PFBase, PFForm, PFButton, AKGlobal, PFRadio];
}
render(): TemplateResult {
return html`
return html`<form class="pf-c-form pf-m-horizontal">
${this.sourceTypes.map((type) => {
return html`<div class="pf-c-radio">
<input
@ -53,7 +54,7 @@ export class InitialSourceWizardPage extends WizardPage {
<span class="pf-c-radio__description">${type.description}</span>
</div>`;
})}
`;
</form>`;
}
}

View file

@ -6,6 +6,7 @@ import { property } from "lit/decorators.js";
import AKGlobal from "../../authentik.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
@ -42,11 +43,11 @@ export class InitialStageWizardPage extends WizardPage {
stageTypes: TypeCreate[] = [];
static get styles(): CSSResult[] {
return [PFBase, PFButton, AKGlobal, PFRadio];
return [PFBase, PFForm, PFButton, AKGlobal, PFRadio];
}
render(): TemplateResult {
return html`
return html`<form class="pf-c-form pf-m-horizontal">
${this.stageTypes.map((type) => {
return html`<div class="pf-c-radio">
<input
@ -68,7 +69,7 @@ export class InitialStageWizardPage extends WizardPage {
<span class="pf-c-radio__description">${type.description}</span>
</div>`;
})}
`;
</form>`;
}
}