boilerplate
This commit is contained in:
François-Xavier Guillois
@@ -0,0 +1,109 @@
|
||||
<form class="{{cssClass}} {{actor.type}} flexcol" autocomplete="off">
|
||||
|
||||
{{!-- Sheet Header --}}
|
||||
<header class="sheet-header">
|
||||
<img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" height="100" width="100"/>
|
||||
<div class="header-fields">
|
||||
<h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="Name"/></h1>
|
||||
{{!-- The grid classes are defined in scss/global/_grid.scss. To use,
|
||||
use both the "grid" and "grid-Ncol" class where "N" can be any number
|
||||
from 1 to 12 and will create that number of columns. --}}
|
||||
<div class="resources grid grid-3col">
|
||||
|
||||
{{!-- "flex-group-center" is also defined in the _grid.scss file
|
||||
and it will add a small amount of padding, a border, and will
|
||||
center all of its child elements content and text. --}}
|
||||
<div class="resource flex-group-center">
|
||||
<label for="system.health.value" class="resource-label">Health</label>
|
||||
<div class="resource-content flexrow flex-center flex-between">
|
||||
<input type="text" name="system.health.value" value="{{system.health.value}}" data-dtype="Number"/>
|
||||
<span> / </span>
|
||||
<input type="text" name="system.health.max" value="{{system.health.max}}" data-dtype="Number"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="resource flex-group-center">
|
||||
<label for="system.power.value" class="resource-label">Power</label>
|
||||
<div class="resource-content flexrow flex-center flex-between">
|
||||
<input type="text" name="system.power.value" value="{{system.power.value}}" data-dtype="Number"/>
|
||||
<span> / </span>
|
||||
<input type="text" name="system.power.max" value="{{system.power.max}}" data-dtype="Number"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="resource flex-group-center">
|
||||
<label for="system.attributes.level.value" class="resource-label">Level</label>
|
||||
<div class="resource-content flexrow flex-center flex-between">
|
||||
<input type="text" name="system.attributes.level.value" value="{{system.attributes.level.value}}" data-dtype="Number"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{{!-- Sheet Tab Navigation --}}
|
||||
<nav class="sheet-tabs tabs" data-group="primary">
|
||||
{{!-- Default tab is specified in actor-sheet.mjs --}}
|
||||
<a class="item" data-tab="features">Features</a>
|
||||
<a class="item" data-tab="description">Description</a>
|
||||
<a class="item" data-tab="items">Items</a>
|
||||
<a class="item" data-tab="spells">Spells</a>
|
||||
<a class="item" data-tab="effects">Effects</a>
|
||||
</nav>
|
||||
|
||||
{{!-- Sheet Body --}}
|
||||
<section class="sheet-body">
|
||||
|
||||
{{!-- Owned Features Tab --}}
|
||||
<div class="tab features" data-group="primary" data-tab="features">
|
||||
<section class="grid grid-3col">
|
||||
<aside class="sidebar">
|
||||
|
||||
{{!-- The grid classes are defined in scss/global/_grid.scss. To use,
|
||||
use both the "grid" and "grid-Ncol" class where "N" can be any number
|
||||
from 1 to 12 and will create that number of columns. --}}
|
||||
<div class="abilities flexcol">
|
||||
{{#each system.abilities as |ability key|}}
|
||||
<div class="ability flexrow flex-group-center">
|
||||
<label for="system.abilities.{{key}}.value" class="resource-label rollable flexlarge align-left" data-roll="d20+@abilities.{{key}}.mod" data-label="{{ability.label}}">{{ability.label}}</label>
|
||||
<input type="text" name="system.abilities.{{key}}.value" value="{{ability.value}}" data-dtype="Number"/>
|
||||
<span class="ability-mod rollable" data-roll="d20+@abilities.{{key}}.mod" data-label="{{ability.label}}">{{numberFormat ability.mod decimals=0 sign=true}}</span>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{{!-- For the main features list, span the right two columns --}}
|
||||
<section class="main grid-span-2">
|
||||
{{!-- This is a Handlebars partial. They're stored in the `/parts` folder next to this sheet, and defined in module/helpers/templates.mjs --}}
|
||||
{{> "systems/totem/templates/actor/parts/actor-features.html"}}
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{{!-- Biography Tab --}}
|
||||
<div class="tab biography" data-group="primary" data-tab="description">
|
||||
{{!-- If you want TinyMCE editors to output inline rolls when rendered, you need to pass the actor's roll data to the rollData property. --}}
|
||||
{{editor system.biography target="system.biography" rollData=rollData button=true owner=owner editable=editable}}
|
||||
</div>
|
||||
|
||||
{{!-- Owned Items Tab --}}
|
||||
<div class="tab items" data-group="primary" data-tab="items">
|
||||
{{> "systems/totem/templates/actor/parts/actor-items.html"}}
|
||||
</div>
|
||||
|
||||
{{!-- Owned Spells Tab --}}
|
||||
<div class="tab spells" data-group="primary" data-tab="spells">
|
||||
{{> "systems/totem/templates/actor/parts/actor-spells.html"}}
|
||||
</div>
|
||||
|
||||
{{!-- Active Effects Tab --}}
|
||||
<div class="tab effects flexcol" data-group="primary" data-tab="effects">
|
||||
{{> "systems/totem/templates/actor/parts/actor-effects.html"}}
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</form>
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
<form class="{{cssClass}} {{actor.type}} flexcol" autocomplete="off">
|
||||
|
||||
{{!-- Sheet Header --}}
|
||||
<header class="sheet-header">
|
||||
<img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" height="100" width="100"/>
|
||||
<div class="header-fields">
|
||||
<h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="Name"/></h1>
|
||||
{{!-- The grid classes are defined in scss/global/_grid.scss. To use,
|
||||
use both the "grid" and "grid-Ncol" class where "N" can be any number
|
||||
from 1 to 12 and will create that number of columns. --}}
|
||||
<div class="resources grid grid-3col">
|
||||
|
||||
{{!-- "flex-group-center" is also defined in the _grid.scss file
|
||||
and it will add a small amount of padding, a border, and will
|
||||
center all of its child elements content and text. --}}
|
||||
<div class="resource flex-group-center">
|
||||
<label for="system.health.value" class="resource-label">Health</label>
|
||||
<div class="resource-content flexrow flex-center flex-between">
|
||||
<input type="text" name="system.health.value" value="{{system.health.value}}" data-dtype="Number"/>
|
||||
<span> / </span>
|
||||
<input type="text" name="system.health.max" value="{{system.health.max}}" data-dtype="Number"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="resource flex-group-center">
|
||||
<label for="system.power.value" class="resource-label">Power</label>
|
||||
<div class="resource-content flexrow flex-center flex-between">
|
||||
<input type="text" name="system.power.value" value="{{system.power.value}}" data-dtype="Number"/>
|
||||
<span> / </span>
|
||||
<input type="text" name="system.power.max" value="{{system.power.max}}" data-dtype="Number"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="resource flex-group-center">
|
||||
<label for="system.cr" class="resource-label">CR / XP</label>
|
||||
<div class="resource-content flexrow flex-center flex-between">
|
||||
<input type="text" name="system.cr" value="{{system.cr}}" data-dtype="Number"/>
|
||||
<span> / </span>
|
||||
<input type="text" disabled="true" name="system.xp" value="{{system.xp}}" data-dtype="Number"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{{!-- Sheet Tab Navigation --}}
|
||||
<nav class="sheet-tabs tabs" data-group="primary">
|
||||
{{!-- Default tab is specified in actor-sheet.mjs --}}
|
||||
<a class="item" data-tab="description">Description</a>
|
||||
<a class="item" data-tab="items">Items</a>
|
||||
<a class="item" data-tab="effects">Effects</a>
|
||||
</nav>
|
||||
|
||||
{{!-- Sheet Body --}}
|
||||
<section class="sheet-body">
|
||||
|
||||
{{!-- Biography Tab --}}
|
||||
<div class="tab biography" data-group="primary" data-tab="description">
|
||||
{{!-- If you want TinyMCE editors to output inline rolls when rendered, you need to pass the actor's roll data to the rollData property. --}}
|
||||
{{editor system.biography target="system.biography" rollData=rollData button=true owner=owner editable=editable}}
|
||||
</div>
|
||||
|
||||
{{!-- Owned Items Tab --}}
|
||||
<div class="tab items" data-group="primary" data-tab="items">
|
||||
{{> "systems/totem/templates/actor/parts/actor-items.html"}}
|
||||
</div>
|
||||
|
||||
{{!-- Active Effects Tab --}}
|
||||
<div class="tab effects flexcol" data-group="primary" data-tab="effects">
|
||||
{{> "systems/totem/templates/actor/parts/actor-effects.html"}}
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</form>
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
<ol class="items-list effects-list">
|
||||
{{#each effects as |section sid|}}
|
||||
<li class="items-header flexrow" data-effect-type="{{section.type}}">
|
||||
<h3 class="item-name effect-name flexrow">{{localize section.label}}</h3>
|
||||
<div class="effect-source">Source</div>
|
||||
<div class="effect-source">Duration</div>
|
||||
<div class="item-controls effect-controls flexrow">
|
||||
<a class="effect-control" data-action="create" title="{{localize 'TOTEM.EffectCreate'}}">
|
||||
<i class="fas fa-plus"></i> {{localize "TOTEM.Add"}}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<ol class="item-list">
|
||||
{{#each section.effects as |effect|}}
|
||||
<li class="item effect flexrow" data-effect-id="{{effect.id}}">
|
||||
<div class="item-name effect-name flexrow">
|
||||
<img class="item-image" src="{{effect.icon}}"/>
|
||||
<h4>{{effect.label}}</h4>
|
||||
</div>
|
||||
<div class="effect-source">{{effect.sourceName}}</div>
|
||||
<div class="effect-duration">{{effect.duration.label}}</div>
|
||||
<div class="item-controls effect-controls flexrow">
|
||||
<a class="effect-control" data-action="toggle" title="{{localize 'TOTEM.EffectToggle'}}">
|
||||
<i class="fas {{#if effect.disabled}}fa-check{{else}}fa-times{{/if}}"></i>
|
||||
</a>
|
||||
<a class="effect-control" data-action="edit" title="{{localize 'TOTEM.EffectEdit'}}">
|
||||
<i class="fas fa-edit"></i>
|
||||
</a>
|
||||
<a class="effect-control" data-action="delete" title="{{localize 'TOTEM.EffectDelete'}}">
|
||||
<i class="fas fa-trash"></i>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ol>
|
||||
{{/each}}
|
||||
</ol>
|
||||
@@ -0,0 +1,22 @@
|
||||
<ol class="items-list">
|
||||
<li class="item flexrow items-header">
|
||||
<div class="item-name">Name</div>
|
||||
<div class="item-controls">
|
||||
<a class="item-control item-create" title="Create item" data-type="feature"><i class="fas fa-plus"></i> Add item</a>
|
||||
</div>
|
||||
</li>
|
||||
{{#each features as |item id|}}
|
||||
<li class="item flexrow" data-item-id="{{item._id}}">
|
||||
<div class="item-name">
|
||||
<div class="item-image">
|
||||
<a class="rollable" data-roll-type="item"><img src="{{item.img}}" title="{{item.name}}" width="24" height="24"/></a>
|
||||
</div>
|
||||
<h4>{{item.name}}</h4>
|
||||
</div>
|
||||
<div class="item-controls">
|
||||
<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>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ol>
|
||||
@@ -0,0 +1,24 @@
|
||||
<ol class="items-list">
|
||||
<li class="item flexrow items-header">
|
||||
<div class="item-name">Name</div>
|
||||
<div class="item-formula">Roll Formula</div>
|
||||
<div class="item-controls">
|
||||
<a class="item-control item-create" title="Create item" data-type="item"><i class="fas fa-plus"></i> Add item</a>
|
||||
</div>
|
||||
</li>
|
||||
{{#each gear as |item id|}}
|
||||
<li class="item flexrow" data-item-id="{{item._id}}">
|
||||
<div class="item-name">
|
||||
<div class="item-image">
|
||||
<a class="rollable" data-roll-type="item"><img src="{{item.img}}" title="{{item.name}}" width="24" height="24"/></a>
|
||||
</div>
|
||||
<h4>{{item.name}}</h4>
|
||||
</div>
|
||||
<div class="item-formula item-prop">{{item.system.formula}}</div>
|
||||
<div class="item-controls">
|
||||
<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>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ol>
|
||||
@@ -0,0 +1,24 @@
|
||||
<ol class="items-list">
|
||||
{{#each spells as |spells spellLevel|}}
|
||||
<li class="item flexrow items-header">
|
||||
<div class="item-name">Level {{spellLevel}} Spells</div>
|
||||
<div class="item-controls">
|
||||
<a class="item-control item-create" title="Create item" data-type="spell" data-spell-level="{{spellLevel}}"><i class="fas fa-plus"></i> Add LVL {{spellLevel}}</a>
|
||||
</div>
|
||||
</li>
|
||||
{{#each spells as |item id|}}
|
||||
<li class="item flexrow" data-item-id="{{item._id}}">
|
||||
<div class="item-name flexrow">
|
||||
<div class="item-image">
|
||||
<a class="rollable" data-roll-type="item"><img src="{{item.img}}" title="{{item.name}}" width="24" height="24"/></a>
|
||||
</div>
|
||||
<h4>{{item.name}}</h4>
|
||||
</div>
|
||||
<div class="item-controls">
|
||||
<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>
|
||||
</li>
|
||||
{{/each}}
|
||||
{{/each}}
|
||||
</ol>
|
||||
Reference in New Issue
Block a user