css fixes for power dialog
This commit is contained in:
parent
b41fd8833b
commit
469fad5ba5
@ -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,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<header>
|
||||
<img src="{{icon}}" height="64" width="64" class="flex0 mbSwadeIcon" title="{{name}} Effect" alt=" " />
|
||||
<div class="flexcol mbSwadeTitle">
|
||||
{{#if icon}}
|
||||
<img src="{{icon}}" height="64" width="64" class="mbSwadeIcon" title="{{name}} Effect" alt=" " />
|
||||
{{/if}}
|
||||
<div class="mbSwadeTitle">
|
||||
<h2>{{headerTitle}}</h2>
|
||||
{{#if headerSubtitle}}<p>{{headerSubtitle}}</p>{{/if}}
|
||||
</div>
|
||||
|
||||
@ -17,31 +17,38 @@
|
||||
{{/if}}
|
||||
</p>
|
||||
{{/if}}
|
||||
{{#each modifiers}}
|
||||
<div class="form-group">
|
||||
{{#if isCheckbox}}
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" name="{{id}}" {{checked default}} />
|
||||
{{#if epic}}⭐ {{/if}}{{name}}
|
||||
{{#if value}}({{numberFormat value decimals=0 sign=true}}){{/if}}
|
||||
</label>
|
||||
{{/if}}
|
||||
{{#if isText}}
|
||||
<label for="{{id}}">{{#if epic}}⭐ {{/if}}{{name}}:</label>
|
||||
<input name="{{id}}" type="text" value="{{default}}">
|
||||
{{/if}}
|
||||
{{#if isNumber}}
|
||||
<label for="{{id}}">{{#if epic}}⭐ {{/if}}{{name}}:</label>
|
||||
<input name="{{id}}" type="number" value="{{default}}" {{#if step}}step="{{step}}" {{/if}} {{#if min}}min="{{min}}"
|
||||
{{/if}} {{#if max}}max="{{max}}" {{/if}}>
|
||||
{{/if}}
|
||||
{{#if isSelect}}
|
||||
<label for="{{id}}">{{#if epic}}⭐ {{/if}}{{name}}:</label>
|
||||
<select name="{{id}}">{{selectOptions choices selected=default}}</select>
|
||||
{{/if}}
|
||||
{{#if isRadio}}
|
||||
{{#if epic}}⭐ {{/if}}{{name}}:</label> {{radioBoxes id choices checked=default}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/each}}
|
||||
<section class="mbFormFields">
|
||||
{{#each modifiers}}
|
||||
<div class="form-group">
|
||||
{{#unless isRadio}}
|
||||
<label class="mb{{type}}" for="{{../formId}}-{{id}}"><span class="mbModName">{{#if epic}}⭐
|
||||
{{/if}}{{name}}</span>{{#if value}}
|
||||
<span class="mbModValue">({{numberFormat value decimals=0 sign=true}})</span>{{/if}}</label>
|
||||
{{/unless}}
|
||||
{{#if isCheckbox}}
|
||||
<input type="checkbox" name="{{id}}" id="{{../formId}}-{{id}}" {{checked default}} />
|
||||
{{/if}}
|
||||
{{#if isText}}
|
||||
<input name="{{id}}" id="{{formid}}-{{id}}" type="text" value="{{default}}">
|
||||
{{/if}}
|
||||
{{#if isNumber}}
|
||||
<input name="{{id}}" id="{{../formId}}-{{id}}" type="number" value="{{default}}" {{#if step}}step="{{step}}"
|
||||
{{/if}} {{#if min}}min="{{min}}" {{/if}} {{#if max}}max="{{max}}" {{/if}}>
|
||||
{{/if}}
|
||||
{{#if isSelect}}
|
||||
<select name="{{id}}" id="{{../formId}}-{{id}}">{{selectOptions choices selected=default}}</select>
|
||||
{{/if}}
|
||||
{{#if isRadio}}
|
||||
<fieldset class="mbRadiogroup">
|
||||
<legend>{{#if epic}}⭐ {{/if}}{{name}}</legend>
|
||||
{{#each choices}}
|
||||
<label class="mbradio" for="{{../../formId}}-{{../id}}-{{@key}}">{{text}}</label>
|
||||
<input type="radio" name="{{../id}}" {{checked checked}} id="{{../../formId}}-{{../id}}-{{@key}}"
|
||||
value="{{@key}}">
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</fieldset>
|
||||
</div>
|
||||
{{/each}}
|
||||
</section>
|
||||
</section>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user