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

View File

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

View File

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

View File

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

View File

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

View File

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