diff --git a/src/module/powers/basePowers.js b/src/module/powers/basePowers.js index 9baa820..614dffb 100644 --- a/src/module/powers/basePowers.js +++ b/src/module/powers/basePowers.js @@ -59,7 +59,7 @@ export class PowerFormApplication extends HandlebarsApplicationMixin(Application width: 600, height: 'auto', }, - classes: ['standard-form', 'mbSwade', 'mbSwadeForm', 'mbSwadePowerEffectsForm'], + classes: ['mbSwade', 'mbSwadeForm', 'mbSwadePowerEffectsForm'], window: { icon: 'fa-solid fa-hand-sparkles', title: 'Apply Effect', @@ -69,15 +69,14 @@ export class PowerFormApplication extends HandlebarsApplicationMixin(Application static PARTS = { header: { template: templates['dialogHeader.html'], - classes: ['mbSwade', 'mbSwadeDialogHeader', 'flexrow'], + classes: ['mbSwade', 'mbSwadeDialogHeader', 'mbSwadePowerEffectsHeader'], }, body: { template: templates['powerDialog.html'], - classes: ['mbSwadePowerEffectsBody'], + classes: ['mbSwade', 'mbSwadePowerEffectsBody', 'scrollable'], }, footer: { template: 'templates/generic/form-footer.hbs', - classes: ['sheet-footer', 'flexrow'], }, }; @@ -116,9 +115,16 @@ export class PowerFormApplication extends HandlebarsApplicationMixin(Application modifier.choices[choice] = `${modifier.choices[choice]}${val}`; } } + if (modifier.isRadio) { + for (const choice in modifier.choices) { + let val = modifier.choices[choice]; + modifier.choices[choice] = { text: val, checked: choice == modifier.default }; + } + } } const data = { name: this.powerEffect.name, + formId: foundry.utils.randomID(), headerTitle: `${this.powerEffect.name} Effect`, headerSubtitle: `Apply the effects from ${this.powerEffect.name}`, icon: this.powerEffect.icon, diff --git a/src/styles/swade-mb-helpers.scss b/src/styles/swade-mb-helpers.scss index a5f385a..2d0c504 100644 --- a/src/styles/swade-mb-helpers.scss +++ b/src/styles/swade-mb-helpers.scss @@ -1,32 +1,103 @@ -.mbSwadeForm { - label.checkbox { - font-size: var(--font-size-14); - } -} +.mbSwade { + &.mbSwadeForm { + footer.form-footer { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: stretch; + align-content: stretch; + gap: 0.25em; -table.mbForm { - th { - padding-left: 0.25em; - padding-right: 0.25em; - } -} + &>button { + flex-grow: 1; + flex-shrink: 1; + flex-basis: auto; + } + } -.mbSwade.mbSwadeDialogHeader { - align-items: flex-start; + .mbFormFields { + display: grid; + grid-template-columns: minmax(5em, 2fr) 5fr; + grid-gap: 0.5em 0.5em; + grid-auto-flow: row dense; - img.mbSwadeIcon { - margin-right: 1em; + &>.form-group { + display: contents; + + &>label { + grid-column: 1 / span 1; + justify-self: end; + + &::after { + content: ":"; + } + + &.mbcheckbox { + grid-column: 2 / span 1; + justify-self: start; + + &::after { + content: ""; + } + } + } + + &>input { + grid-column: 2 / span 1; + justify-self: start; + + &[type="checkbox"] { + grid-column: 1 / span 1; + justify-self: end; + } + } + + &>fieldset { + grid-column: 1 / span 2; + display: flex; + flex-direction: row; + align-items: baseline; + + &>label { + text-align: right; + + &::after { + content: ":"; + } + } + + &>input { + margin-right: 2em; + } + } + } + } } - .mbSwadeTitle { - h2:has(+ p) { - margin-bottom: 0; + .mbSwadeDialogHeader { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: flex-start; + align-content: stretch; + gap: 0.5em; + + &>* { + flex-grow: 1; + flex-shrink: 1; + flex-basis: auto + } + + &>.mbSwadeIcon { + flex-grow: 0; + } + + &>.mbSwadeTitle { + h2:has(+ p) { + margin-bottom: 0; + } } } } - -.mbSwade.mbSwadeForm { - .mbSwadePowerEffectsBody { - margin-bottom: 0.5em; - } -} diff --git a/src/templates/dialogHeader.html b/src/templates/dialogHeader.html index c004167..5cebf2c 100644 --- a/src/templates/dialogHeader.html +++ b/src/templates/dialogHeader.html @@ -1,6 +1,8 @@
-  -
+ {{#if icon}} +  + {{/if}} +

{{headerTitle}}

{{#if headerSubtitle}}

{{headerSubtitle}}

{{/if}}
diff --git a/src/templates/powerDialog.html b/src/templates/powerDialog.html index de4775c..e35c9e8 100644 --- a/src/templates/powerDialog.html +++ b/src/templates/powerDialog.html @@ -17,31 +17,38 @@ {{/if}}

{{/if}} - {{#each modifiers}} -
- {{#if isCheckbox}} - - {{/if}} - {{#if isText}} - - - {{/if}} - {{#if isNumber}} - - - {{/if}} - {{#if isSelect}} - - - {{/if}} - {{#if isRadio}} - {{#if epic}}⭐ {{/if}}{{name}}: {{radioBoxes id choices checked=default}} - {{/if}} -
- {{/each}} +
+ {{#each modifiers}} +
+ {{#unless isRadio}} + + {{/unless}} + {{#if isCheckbox}} + + {{/if}} + {{#if isText}} + + {{/if}} + {{#if isNumber}} + + {{/if}} + {{#if isSelect}} + + {{/if}} + {{#if isRadio}} +
+ {{#if epic}}⭐ {{/if}}{{name}} + {{#each choices}} + + + {{/each}} + {{/if}} +
+
+ {{/each}} +