Beginning of global styling; Full Sidebar restyle

This commit is contained in:
Nathanael Phillips 2020-11-02 12:23:55 -07:00
parent a8c2881a7b
commit f7d7580b3a
53 changed files with 6671 additions and 1811 deletions

View file

@ -0,0 +1,22 @@
<div class="panel additional-info">
<section><h1 class="section-titles biopage">Personality Traits</h1>
{{editor content=data.details.trait target="data.details.trait" button=true owner=owner editable=editable}}
</section>
<section><h1 class="section-titles biopage">Ideals</h1>
{{editor content=data.details.ideal target="data.details.ideal" button=true owner=owner editable=editable}}
</section>
<section><h1 class="section-titles biopage">Bonds</h1>
{{editor content=data.details.bond target="data.details.bond" button=true owner=owner editable=editable}}
</section>
<section><h1 class="section-titles biopage">Flaws</h1>
{{editor content=data.details.flaw target="data.details.flaw" button=true owner=owner editable=editable}}
</section>
</div>
<div class="panel background">
<section><h1 class="section-titles biopage">Description</h1>
{{editor content=data.details.description.value target="data.details.description.value" button=true owner=owner editable=editable}}
</section>
<section><h1 class="section-titles">Background</h1>
{{editor content=data.details.biography.value target="data.details.biography.value" button=true owner=owner editable=editable}}
</section>
</div>

View file

@ -0,0 +1,56 @@
<section class="panel abilities">
{{!-- Ability Scores --}}
<section class="scores">
<h1>Ability Scores</h1>
<ol>
{{#each data.abilities as |ability id|}}
<li class="ability {{#if ability.proficient}}proficient{{/if}}" data-ability="{{id}}">
<h2 class="ability-name rollable">{{ability.label}}</h4>
<input class="ability-score" name="data.abilities.{{id}}.value" type="text"
value="{{ability.value}}" data-dtype="Number" placeholder="10" />
<div class="ability-modifiers">
<span class="ability-mod"
title="Modifier">{{numberFormat ability.mod decimals=0 sign=true}}</span>
<input type="hidden" name="data.abilities.{{id}}.proficient"
value="{{ability.proficient}}" data-dtype="Number" />
<button class="proficiency-toggle ability-proficiency"
title="Proficiency">{{{ability.icon}}}</button>
<span class="ability-save"
title="Saving Throw">{{numberFormat ability.save decimals=0 sign=true}}</span>
</div>
</li>
{{/each}}
</ol>
</section>
{{!-- Skills --}}
<section class="skills">
<h1>Skills</h1>
<ol>
{{#each data.skills as |skill s|}}
<li class="skill {{#if skill.value}}proficient{{/if}}" data-skill="{{s}}">
<input type="hidden" name="data.skills.{{s}}.value" value="{{skill.value}}"
data-dtype="Number" />
<button class="proficiency-toggle skill-proficiency"
title="{{skill.hover}}">{{{skill.icon}}}</button>
<span class="skill-name rollable">{{skill.label}}</span>
<span class="skill-ability">{{skill.ability}}</span>
<span class="skill-mod">{{numberFormat skill.total decimals=0 sign=true}}</span>
{{!-- <input class="skill-bonus" name="data.skills.{{s}}.bonus" type="text" value="{{numberFormat skill.bonus decimals=0 sign=true}}" data-dtype="Number" placeholder="0" title="Misc. Modifier"/> --}}
{{!-- <span class="skill-passive">({{skill.passive}})</span> --}}
</li>
{{/each}}
</ol>
</section>
</section>
<section class="panel traits-resources">
<nav class="core-tabs tab-list" data-subgroup-selection>
<button type="button" class="item active" data-subgroup="coreattributes" data-target="traits">Traits</button>
<button type="button" class="item" data-subgroup="coreattributes" data-target="resources">Resources</button>
</nav>
<div class="tab core-traits active" data-subgroup="coreattributes" data-target="traits">
{{> "systems/sw5e/templates/actors/newActor/parts/swalt-traits.html"}}
</div>
<div class="tab core-resources" data-subgroup="coreattributes" data-target="resources">
{{> "systems/sw5e/templates/actors/newActor/parts/swalt-resources.html"}}
</div>
</section>

View file

@ -0,0 +1,80 @@
<div class="panel">
<ul class="filter-list" data-filter="features">
<li class="filter-title">{{localize "SW5E.Filter"}}</li>
<li class="filter-item" data-filter="action">{{localize "SW5E.Action"}}</li>
<li class="filter-item" data-filter="bonus">{{localize "SW5E.BonusAction"}}</li>
<li class="filter-item" data-filter="reaction">{{localize "SW5E.Reaction"}}</li>
</ul>
<ol class="group-list">
{{#each sections as |section sid|}}
<li>
<div class="group-list-title group-grid-features">
<div class="title">
<h3 class="item-name">{{localize section.label}}</h3>
{{#if ../owner}}
<a class="item-control item-create" title="{{localize 'SW5E.FeatureAdd'}}"
{{#each section.dataset as |v k|}}data-{{k}}="{{v}}" {{/each}}>
<i class="fas fa-plus"></i> {{localize "SW5E.Add"}}
</a>
{{/if}}
</div>
{{#if section.hasActions}}
<div class="item-detail item-uses">{{localize "SW5E.Uses"}}</div>
<div class="item-detail item-action">{{localize "SW5E.Usage"}}</div>
{{/if}}
</div>
<ol class="item-list">
{{#each section.items as |item iid|}}
<li class="item group-grid-features {{#if isDepleted}}depleted{{/if}}" data-item-id="{{item._id}}">
<div class="item-name rollable">
<div class="item-image" style="background-image: url({{item.img}})"></div>
<h4>{{item.name}}</h4>
</div>
{{#if section.hasActions}}
<div class="item-detail item-uses">
{{#if item.isOnCooldown}}
<a class="item-recharge rollable">{{item.labels.recharge}}</a>
{{else if item.data.recharge.value}}
{{localize "SW5E.Charged"}}
{{else if item.hasUses}}
<input type="text" value="{{item.data.uses.value}}" placeholder="0" />/<span>{{item.data.uses.max}}</span>
{{/if}}
</div>
<div class="item-detail item-action">
{{#if item.data.activation.type }}
{{item.labels.activation}}
{{/if}}
</div>
{{else if section.isClass}}
<div class="item-detail player-class">
{{item.data.subclass}}
</div>
<div class="item-detail player-class-levels">
Level {{item.data.levels}}
</div>
{{/if}}
{{#if ../../owner}}
<div class="item-controls item-detail">
<a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
<a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
</div>
{{/if}}
</li>
{{/each}}
</ol>
</li>
{{/each}}
</ol>
</div>

View file

@ -0,0 +1,112 @@
<section class="panel">
{{#if isCharacter }}
<div class="currency-encumbrance">
<label class="currency">
{{localize "SW5E.Currency"}}
{{#each data.currency as |v k|}}
<input type="text" name="data.currency.{{k}}" value="{{v}}" data-dtype="Number" />
{{/each}}
</label>
{{#with data.attributes.encumbrance}}
<div class="encumbrance-wrapper" title="Encumbrance">
<div class="encumbrance {{#if encumbered}}encumbered{{/if}}">
<span class="encumbrance-bar" style="width:{{pct}}%"></span>
<i class="encumbrance-breakpoint encumbrance-33 arrow-up"></i>
<i class="encumbrance-breakpoint encumbrance-33 arrow-down"></i>
<i class="encumbrance-breakpoint encumbrance-66 arrow-up"></i>
<i class="encumbrance-breakpoint encumbrance-66 arrow-down"></i>
</div>
<span class="encumbrance-label">{{value}} / {{max}}</span>
</div>
{{/with}}
</div>
{{/if}}
<ul class="filter-list" data-filter="inventory">
<li class="filter-title">{{localize "SW5E.Filter"}}</li>
<li class="filter-item" data-filter="action">{{localize "SW5E.Action"}}</li>
<li class="filter-item" data-filter="bonus">{{localize "SW5E.BonusAction"}}</li>
<li class="filter-item" data-filter="reaction">{{localize "SW5E.Reaction"}}</li>
<li class="filter-item" data-filter="equipped">{{localize "SW5E.Equipped"}}</li>
</ul>
<div class="group-list-header group-grid-inventory">
<div>&nbsp;</div>
{{#if isCharacter}}
<div class="item-detail item-weight">{{localize "SW5E.Weight"}}</div>
{{/if}}
<div class="item-detail item-uses">{{localize "SW5E.Charges"}}</div>
<div class="item-detail item-action">{{localize "SW5E.Usage"}}</div>
<div class="item-detail"></div>
</div>
<ol class="group-list">
{{#each sections as |section sid|}}
<li>
<div class="group-list-title">
<h3 class="item-name">{{localize section.label}}</h3>
{{#if ../owner}}
<a class="item-control item-create" title='{{localize "SW5E.ItemCreate"}}'
{{#each section.dataset as |v k|}}data-{{k}}="{{v}}" {{/each}}>
<i class="fas fa-plus"></i> {{localize "SW5E.Add"}}
</a>
{{/if}}
</div>
<ol class="group-items">
{{#each section.items as |item iid|}}
<li class="item group-grid-inventory" data-item-id="{{item._id}}">
<div class="item-name rollable">
<div class="item-image" style="background-image: url({{item.img}})"></div>
<h4>
{{item.name~}}
{{~#if item.isStack}} ({{item.data.quantity}}){{/if}}
{{~#if item.data.attuned}} <i class="fas fa-sun attuned"
title={{localize "SW5E.Attuned"}}></i>{{/if}}
</h4>
</div>
{{#if ../../isCharacter}}
<div class="item-detail item-weight">
{{#if item.totalWeight}}
{{ item.totalWeight }} {{localize "SW5E.AbbreviationLbs"}}
{{/if}}
</div>
{{/if}}
<div class="item-detail item-uses">
{{#if item.hasUses }}
<input type="text" value="{{item.data.uses.value}}" placeholder="0" />
/<span style="padding-left: 8px;">{{item.data.uses.max}}</span>
{{/if}}
</div>
<div class="item-detail item-action">
{{#if item.data.activation.type }}
{{item.labels.activation}}
{{/if}}
</div>
{{#if ../../owner}}
<div class="item-detail item-controls">
<a class="item-control item-toggle {{item.toggleClass}}" title='{{item.toggleTitle}}'>
<i class="fas fa-shield-alt"></i>
</a>
<a class="item-control item-edit" title='{{localize "SW5E.ItemEdit"}}'><i
class="fas fa-edit"></i></a>
<a class="item-control item-delete" title='{{localize "SW5E.ItemDelete"}}'><i
class="fas fa-trash"></i></a>
</div>
{{/if}}
</li>
{{/each}}
</ol>
</li>
{{/each}}
</ol>
</section>

View file

@ -0,0 +1,33 @@
<div class="panel">
<section class="background">
<input type="text" name="data.details.notesname" value="{{data.details.notesname}}"
placeholder="Personal Journal" />
{{editor content=data.details.notes.value target="data.details.notes.value" button=true owner=owner editable=editable}}
</section>
<section>
<input type="text" name="data.details.notes1name" value="{{data.details.notes1name}}"
placeholder="Additional Notes" />
{{editor content=data.details.notes1.value target="data.details.notes1.value" button=true owner=owner editable=editable}}
</section>
<section>
<input type="text" name="data.details.notes2name" value="{{data.details.notes2name}}"
placeholder="Additional Notes" />
{{editor content=data.details.notes2.value target="data.details.notes2.value" button=true owner=owner editable=editable}}
</section>
<section>
<input type="text" name="data.details.notes3name" value="{{data.details.notes3name}}"
placeholder="Additional Notes" />
{{editor content=data.details.notes3.value target="data.details.notes3.value" button=true owner=owner editable=editable}}
</section>
<section>
<input type="text" name="data.details.notes4name" value="{{data.details.notes4name}}"
placeholder="Additional Notes" />
{{editor content=data.details.notes4.value target="data.details.notes4.value" button=true owner=owner editable=editable}}
</section>
</section>
</div>

View file

@ -0,0 +1,135 @@
<section class="panel">
<div class="powercasting-ability">
<label>{{localize "SW5E.PowerAbility"}}
<select name="data.attributes.powercasting" data-type="String">
{{#select data.attributes.powercasting}}
<option value="">{{localize "SW5E.None"}}</option>
{{#each data.abilities as |abl a|}}
<option value="{{a}}">{{abl.label}}</option>
{{/each}}
{{/select}}
</select>
</label>
{{#if isNPC}}
<label>{{localize "SW5E.PowercasterLevel"}}
<input class="powercasting-level" type="text" name="data.details.powerLevel" value="{{data.details.powerLevel}}"
data-dtype="Number" placeholder="0" />
</label>
{{/if}}
<h3 class="power-dc">{{localize "SW5E.PowerDC"}} <span>{{data.attributes.powerdc}}</span></h3>
</div>
<ul class="filter-list" data-filter="powerbook">
<li class="filter-title">{{localize "SW5E.Filter"}}</li>
<li class="filter-item" data-filter="action">{{localize "SW5E.Action"}}</li>
<li class="filter-item" data-filter="bonus">{{localize "SW5E.BonusAction"}}</li>
<li class="filter-item" data-filter="reaction">{{localize "SW5E.Reaction"}}</li>
<li class="filter-item" data-filter="concentration">{{localize "SW5E.AbbreviationConc"}}</li>
<li class="filter-item" data-filter="ritual">{{localize "SW5E.Ritual"}}</li>
<li class="filter-item" data-filter="prepared">{{localize "SW5E.Prepared"}}{{#if preparedPowers}}
({{preparedPowers}}){{/if}}</li>
</ul>
<div class="group-list-header group-grid-powers">
<div></div>
<div class="item-detail item-uses"></div>
<div class="item-detail item-school">{{localize "SW5E.PowerSchool"}}</div>
<div class="item-detail item-action">{{localize "SW5E.PowerUsage"}}</div>
<div class="item-detail item-target">{{localize "SW5E.PowerTarget"}}</div>
</div>
<ol class="group-list">
{{#each powerbook as |section|}}
<li>
<div class="group-list-title group-grid-powers">
<div class="item-name">
<h3>{{section.label}}</h3>
{{#if section.canCreate}}
<a class="item-control item-create" title="{{localize 'SW5E.PowerCreate'}}"
{{#each section.dataset as |v k|}}data-{{k}}="{{v}}" {{/each}}>
<i class="fas fa-plus"></i> {{localize "SW5E.Add"}}
</a>
{{/if}}
</div>
<div class="item-detail item-uses">
{{#if section.usesSlots}}
<input type="text" name="data.powers.{{section.prop}}.value" value="{{section.uses}}" placeholder="0"
data-dtype="Number" />
/
<span data-level="{{section.prop}}" data-slots="{{section.slots}}">
{{{section.slots}}}
{{#if ../editable}}
<a class="slot-max-override" title="{{localize 'SW5E.PowerProgOverride'}}">
<i class="fas fa-edit"></i>
</a>
{{/if}}
{{ else }}
{{{section.uses}}} / {{{section.slots}}}
{{/if}}
</div>
</div>
<ol class="item-list">
{{#each section.powers as |item i|}}
<li class="item group-grid-powers" data-item-id="{{item._id}}">
<div class="item-name rollable">
<div class="item-image" style="background-image: url({{item.img}})"></div>
<h4>{{item.name}}</h4>
</div>
<div class="item-detail item-uses">
{{#if item.data.uses.per }}
Uses {{item.data.uses.value}} / {{item.data.uses.max}}
{{/if}}
</div>
<!-- <div class="power-comps">
{{#each labels.components}}
<span class="power-component {{this}}">{{this}}</span>
{{/each}}
</div> -->
<div class="item-detail item-school">{{labels.school}}</div>
<div class="item-detail item-action">{{labels.activation}}</div>
<div class="item-detail item-target" title="{{localize 'SW5E.Range'}}: {{labels.range}}">
{{#if labels.target}}
{{labels.target}}
{{else}}None
{{/if}}
</div>
{{#if ../../owner}}
<div class="item-detail item-controls">
{{#if section.canPrepare}}
<a class="item-control item-toggle {{item.toggleClass}}" title="{{item.toggleTitle}}"><i
class="fas fa-check-circle"></i></a>
{{/if}}
<a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
<a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
</div>
{{/if}}
</li>
{{/each}}
</ol>
</li>
{{else}}
{{#if owner}}
{{#if filters.powerbook.size}}
<li class="item flexrow">
<p class="notes">{{localize "SW5E.FilterNoPowers"}}</p>
</li>
{{else}}
<li class="item flexrow inventory-header powerbook-header powerbook-empty">
<div class="item-controls">
<a class="item-control item-create" title="{{localize 'SW5E.PowerCreate'}}" data-type="power"
data-level="{{lvl}}"><i class="fas fa-plus"></i> {{localize "SW5E.PowerAdd"}}</a>
</div>
</li>
<li class="item flexrow">
<p class="notes">{{localize "SW5E.NoPowerLevels"}}</p>
</li>
{{/if}}
{{/if}}
{{/each}}
</ol>
</section>

View file

@ -0,0 +1,65 @@
{{!-- Resources, Counters, & Favorites --}}
<section class="resources">
<section class="resource-items">
{{#each resources as |res|}}
<div class="resource">
<h1>
<input name="data.resources.{{res.name}}.label" type="text" value="{{res.label}}"
placeholder="{{res.placeholder}}" />
</h1>
<div class="attribute-value">
<input name="data.resources.{{res.name}}.value" type="text" value="{{res.value}}" data-dtype="Number"
placeholder="0" class="value-number" />
<span class="value-separator">/</span>
<input name="data.resources.{{res.name}}.max" type="text" value="{{res.max}}" data-dtype="Number"
placeholder="0" class="value-number" />
</div>
<footer class="attribute-footer">
<label class="recharge checkbox">
{{ localize "SW5E.AbbreviationSR" }} <input name="data.resources.{{res.name}}.sr" type="checkbox"
{{checked res.sr}} />
</label>
<label class="recharge checkbox">
{{ localize "SW5E.AbbreviationLR" }} <input name="data.resources.{{res.name}}.lr" type="checkbox"
{{checked res.lr}} />
</label>
</footer>
</div>
{{/each}}
</section>
<section class="counters">
<div class="counter">
<h4 class="death-save rollable">{{ localize "SW5E.DeathSave" }}</h4>
<div class="counter-value">
<div class="death-success">
<i class="fas fa-check"></i>
<input type="text" name="data.attributes.death.success" data-dtype="Number" placeholder="0"
value="{{data.attributes.death.success}}" />
</div>
<div class="death-fail">
<i class="fas fa-times"></i>
<input type="text" name="data.attributes.death.failure" data-dtype="Number" placeholder="0"
value="{{data.attributes.death.failure}}" />
</div>
</div>
</div>
<div class="counter">
<h4>{{ localize "SW5E.Exhaustion" }}</h4>
<div class="counter-value">
<input type="text" name="data.attributes.exhaustion" data-dtype="Number" placeholder="0"
value="{{data.attributes.exhaustion}}" />
</div>
</div>
<div class="counter">
<h4>{{ localize "SW5E.Inspiration" }}</h4>
<div class="counter-value">
<input type="checkbox" name="data.attributes.inspiration" data-dtype="Boolean"
{{checked data.attributes.inspiration}} />
</div>
</div>
</section>
<section class="favorites">
<h1>Favorites</h1>
<div class="favtabtarget"></div>
</section>
</section>

View file

@ -0,0 +1,118 @@
<section class="traits">
<label>
{{localize "SW5E.Size"}}
<select class="actor-size" name="data.traits.size">
{{#select data.traits.size}}
{{#each config.actorSizes as |label size|}}
<option value="{{size}}">{{label}}</option>
{{/each}}
{{/select}}
</select>
</label>
<label class="{{#unless data.traits.senses}}inactive{{/unless}}">
{{#unless isVehicle}}
{{localize "SW5E.Senses"}}
<input type="text" name="data.traits.senses" value="{{data.traits.senses}}"
placeholder="{{ localize 'SW5E.None' }}" />
{{/unless}}
</label>
<div class="languages">
<label data-options="share-languages" class="languages">{{localize "SW5E.Languages"}}</label>
<a class="trait-selector" data-options="languages" data-target="data.traits.languages">
<i class="fas fa-edit"></i>
</a>
<ul class="traits-list">
{{#each data.traits.languages.selected as |v k|}}
<li>{{v}}</li>
{{/each}}
</ul>
</div>
<div>
<label>{{localize "SW5E.DamImm"}}</label>
<a class="trait-selector" data-options="damageResistanceTypes" data-target="data.traits.di">
<i class="fas fa-edit"></i>
</a>
<ul class="traits-list">
{{#each data.traits.di.selected as |v k|}}
<li>{{v}}</li>
{{/each}}
</ul>
</div>
<div>
<label>{{localize "SW5E.DamRes"}}</label>
<a class="trait-selector" data-options="damageResistanceTypes" data-target="data.traits.dr">
<i class="fas fa-edit"></i>
</a>
<ul class="traits-list">
{{#each data.traits.dr.selected as |v k|}}
<li>{{v}}</li>
{{/each}}
</ul>
</div>
<div>
<label>{{localize "SW5E.DamVuln"}}</label>
<a class="trait-selector" data-options="damageResistanceTypes" data-target="data.traits.dv">
<i class="fas fa-edit"></i>
</a>
<ul class="traits-list">
{{#each data.traits.dv.selected as |v k|}}
<li>{{v}}</li>
{{/each}}
</ul>
</div>
<div>
<label>{{localize "SW5E.ConImm"}}</label>
<a class="trait-selector" data-options="conditionTypes" data-target="data.traits.ci">
<i class="fas fa-edit"></i>
</a>
<ul class="traits-list">
{{#each data.traits.ci.selected as |v k|}}
<li>{{v}}</li>
{{/each}}
</ul>
</div>{{#if isCharacter}}
<div>
<label>{{localize "SW5E.TraitWeaponProf"}}</label>
<a class="trait-selector" data-options="weaponProficiencies" data-target="data.traits.weaponProf">
<i class="fas fa-edit"></i>
</a>
<ul class="traits-list">
{{#each data.traits.weaponProf.selected as |v k|}}
<li>{{v}}</li>
{{/each}}
</ul>
</div>
<div>
<label>{{localize "SW5E.TraitArmorProf"}}</label>
<a class="trait-selector" data-options="armorProficiencies" data-target="data.traits.armorProf">
<i class="fas fa-edit"></i>
</a>
<ul class="traits-list">
{{#each data.traits.armorProf.selected as |v k|}}
<li>{{v}}</li>
{{/each}}
</ul>
</div>
<div>
<label>{{localize "SW5E.TraitToolProf"}}</label>
<a class="trait-selector" data-options="toolProficiencies" data-target="data.traits.toolProf">
<i class="fas fa-edit"></i>
</a>
<ul class="traits-list">
{{#each data.traits.toolProf.selected as |v k|}}
<li>{{v}}</li>
{{/each}}
</ul>
</div>
{{/if}}
{{#unless isVehicle}}
<div>
<label>{{localize "SW5E.SpecialTraits"}}</label>
<a class="configure-flags"><i class="fas fa-cog"></i></a>
</div>
{{/unless}}
<ul class="passives"></ul>
</section>