add attributes and traits to character sheet
This commit is contained in:
parent
5d5c7efce0
commit
fd5bad3c3e
4 changed files with 196 additions and 63 deletions
|
|
@ -17,4 +17,5 @@
|
|||
@import "scss/components/tabs";
|
||||
@import "scss/components/items";
|
||||
@import "scss/components/description";
|
||||
@import "scss/components/character_values";
|
||||
}
|
||||
|
|
|
|||
51
src/scss/components/_character_values.scss
Normal file
51
src/scss/components/_character_values.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
header.sheet-header {
|
||||
.character-values {
|
||||
flex: 0 0 100%;
|
||||
.attributes-traits {
|
||||
margin-top: 5px;
|
||||
.attribute {
|
||||
.attribute-label {
|
||||
font-family: $font-heading;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
.attribute-value {
|
||||
border: 2px groove $c-border-groove;
|
||||
line-height: 26px;
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
gap: 0;
|
||||
input,
|
||||
.attribute-value-total {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
.trait {
|
||||
.trait-label {
|
||||
color: transparent;
|
||||
font-family: $font-heading;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
//text-shadow: -1px 1px 0 $c-black, 1px 1px 0 $c-black, 1px -1px 0 $c-black, -1px -1px 0 $c-black;
|
||||
-webkit-text-stroke: 1px $c-black;
|
||||
}
|
||||
.trait-value {
|
||||
border: 2px groove $c-border-groove;
|
||||
font-size: 1.5em;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
gap: 0;
|
||||
input,
|
||||
.trait-value-total {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -23,10 +23,6 @@ header.sheet-header {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.base-infos {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
h1.charname {
|
||||
height: 50px;
|
||||
padding: 0px;
|
||||
|
|
|
|||
|
|
@ -5,75 +5,160 @@
|
|||
<div class="header-fields">
|
||||
<h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="Name" /></h1>
|
||||
</div>
|
||||
{{!-- 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="base-infos 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="base-info flex-group-center">
|
||||
<label for="data.baseInfo.race" class="base-info-label">{{config.baseInfo.race}}</label>
|
||||
<div class="base-info-content flexrow flex-center flex-between">
|
||||
<input type="text" name="data.baseInfo.race" value="{{data.baseInfo.race}}" data-dtype="String" />
|
||||
<div class="character-values">
|
||||
{{!-- 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="base-infos 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="base-info flex-group-center">
|
||||
<label for="data.baseInfo.race" class="base-info-label">{{config.baseInfo.race}}</label>
|
||||
<div class="base-info-content flexrow flex-center flex-between">
|
||||
<input type="text" name="data.baseInfo.race" value="{{data.baseInfo.race}}"
|
||||
data-dtype="String" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="base-info flex-group-center">
|
||||
<div class="grid grid-3col">
|
||||
<div class="base-info flex-group-center">
|
||||
<label for="data.progression.level" class="base-info-label">{{config.progression.level}}</label>
|
||||
<div class="base-info-content flexrow flex-center flex-between">
|
||||
<input type="text" name="data.progression.level" value="{{data.progression.level}}"
|
||||
data-dtype="Number" />
|
||||
<div class="base-info flex-group-center">
|
||||
<div class="grid grid-3col">
|
||||
<div class="base-info flex-group-center">
|
||||
<label for="data.progression.level"
|
||||
class="base-info-label">{{config.progression.level}}</label>
|
||||
<div class="base-info-content flexrow flex-center flex-between">
|
||||
<input type="text" name="data.progression.level" value="{{data.progression.level}}"
|
||||
data-dtype="Number" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="base-info flex-group-center">
|
||||
<label for="data.progression.progressPoints"
|
||||
class="base-info-label">{{config.progression.progressPoints}}</label>
|
||||
<div class="base-info-content flexrow flex-center flex-between">
|
||||
<input type="text" name="data.progression.progressPoints.used"
|
||||
value="{{data.progression.progressPoints.used}}" data-dtype="Number" /><span> /
|
||||
</span><input type="text" name="data.progression.progressPoints.total"
|
||||
value="{{data.progression.progressPoints.total}}" data-dtype="Number" />
|
||||
<div class="base-info flex-group-center">
|
||||
<label for="data.progression.progressPoints"
|
||||
class="base-info-label">{{config.progression.progressPoints}}</label>
|
||||
<div class="base-info-content flexrow flex-center flex-between">
|
||||
<input type="text" name="data.progression.progressPoints.used"
|
||||
value="{{data.progression.progressPoints.used}}" data-dtype="Number" /><span> /
|
||||
</span><input type="text" name="data.progression.progressPoints.total"
|
||||
value="{{data.progression.progressPoints.total}}" data-dtype="Number" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="base-info flex-group-center">
|
||||
<label for="data.progression.talentPoints"
|
||||
class="base-info-label">{{config.progression.talentPoints}}</label>
|
||||
<div class="base-info-content flexrow flex-center flex-between">
|
||||
<input type="text" name="data.progression.talentPoints.used"
|
||||
value="{{data.progression.talentPoints.used}}" data-dtype="Number" /><span> /
|
||||
</span><input type="text" name="data.progression.talentPoints.total"
|
||||
value="{{data.progression.talentPoints.total}}" data-dtype="Number" />
|
||||
<div class="base-info flex-group-center">
|
||||
<label for="data.progression.talentPoints"
|
||||
class="base-info-label">{{config.progression.talentPoints}}</label>
|
||||
<div class="base-info-content flexrow flex-center flex-between">
|
||||
<input type="text" name="data.progression.talentPoints.used"
|
||||
value="{{data.progression.talentPoints.used}}" data-dtype="Number" /><span> /
|
||||
</span><input type="text" name="data.progression.talentPoints.total"
|
||||
value="{{data.progression.talentPoints.total}}" data-dtype="Number" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="base-info flex-group-center">
|
||||
<label for="data.baseInfo.class" class="base-info-label">{{config.baseInfo.class}}</label>
|
||||
<div class="base-info-content flexrow flex-center flex-between">
|
||||
<input type="text" name="data.baseInfo.class" value="{{data.baseInfo.class}}" data-dtype="String" />
|
||||
<div class="base-info flex-group-center">
|
||||
<label for="data.baseInfo.class" class="base-info-label">{{config.baseInfo.class}}</label>
|
||||
<div class="base-info-content flexrow flex-center flex-between">
|
||||
<input type="text" name="data.baseInfo.class" value="{{data.baseInfo.class}}"
|
||||
data-dtype="String" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="base-info flex-group-center">
|
||||
<label for="data.baseInfo.racialAbilities"
|
||||
class="base-info-label">{{config.baseInfo.racialAbilities}}</label>
|
||||
<div class="base-info-content flexrow flex-center flex-between">
|
||||
<input type="text" name="data.baseInfo.racialAbilities"
|
||||
value="{{data.baseInfo.racialAbilities}}" data-dtype="String" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="base-info flex-group-center">
|
||||
<label for="data.progression.experiencePoints"
|
||||
class="base-info-label">{{config.progression.experiencePoints}}</label>
|
||||
<div class="base-info-content flexrow flex-center flex-between">
|
||||
<input type="text" name="data.progression.experiencePoints"
|
||||
value="{{data.progression.experiencePoints}}" data-dtype="Number" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="base-info flex-group-center">
|
||||
<label for="data.baseInfo.heroClass" class="base-info-label">{{config.baseInfo.heroClass}}</label>
|
||||
<div class="base-info-content flexrow flex-center flex-between">
|
||||
<input type="text" name="data.baseInfo.heroClass" value="{{data.baseInfo.heroClass}}"
|
||||
data-dtype="String" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="base-info flex-group-center">
|
||||
<label for="data.baseInfo.racialAbilities"
|
||||
class="base-info-label">{{config.baseInfo.racialAbilities}}</label>
|
||||
<div class="base-info-content flexrow flex-center flex-between">
|
||||
<input type="text" name="data.baseInfo.racialAbilities" value="{{data.baseInfo.racialAbilities}}"
|
||||
data-dtype="String" />
|
||||
<div class="attributes-traits grid grid-3col">
|
||||
<div class="attribute flexrow"><label for="data.attributes.body.total"
|
||||
class="attribute-label ">{{config.attributes.body}}</label>
|
||||
<div class="attribute-value flex15 grid grid-8col"><input type="number"
|
||||
name="data.attributes.body.base" value='{{data.attributes.body.base}}'
|
||||
data-dtype="Number" /><span> +
|
||||
</span><input type="number" name="data.attributes.body.mod" value='{{data.attributes.body.mod}}'
|
||||
data-dtype="Number" /><span> =
|
||||
</span><span class="attribute-value-total">{{data.attributes.body.total}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="base-info flex-group-center">
|
||||
<label for="data.progression.experiencePoints"
|
||||
class="base-info-label">{{config.progression.experiencePoints}}</label>
|
||||
<div class="base-info-content flexrow flex-center flex-between">
|
||||
<input type="text" name="data.progression.experiencePoints"
|
||||
value="{{data.progression.experiencePoints}}" data-dtype="Number" />
|
||||
<div class="attribute flexrow"><label for="data.attributes.mobility.total"
|
||||
class="attribute-label">{{config.attributes.mobility}}</label>
|
||||
<div class="attribute-value flex15 grid grid-8col"><input type="number"
|
||||
name="data.attributes.mobility.base" value='{{data.attributes.mobility.base}}'
|
||||
data-dtype="Number" /><span> +
|
||||
</span><input type="number" name="data.attributes.mobility.mod"
|
||||
value='{{data.attributes.mobility.mod}}' data-dtype="Number" /><span> =
|
||||
</span><span class="attribute-value-total">{{data.attributes.mobility.total}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="base-info flex-group-center">
|
||||
<label for="data.baseInfo.heroClass" class="base-info-label">{{config.baseInfo.heroClass}}</label>
|
||||
<div class="base-info-content flexrow flex-center flex-between">
|
||||
<input type="text" name="data.baseInfo.heroClass" value="{{data.baseInfo.heroClass}}"
|
||||
data-dtype="String" />
|
||||
<div class="attribute flexrow"><label for="data.attributes.mind.total"
|
||||
class="attribute-label">{{config.attributes.mind}}</label>
|
||||
<div class="attribute-value flex15 grid grid-8col"><input type="number"
|
||||
name="data.attributes.mind.base" value='{{data.attributes.mind.base}}'
|
||||
data-dtype="Number" /><span> +
|
||||
</span><input type="number" name="data.attributes.mind.mod" value='{{data.attributes.mind.mod}}'
|
||||
data-dtype="Number" /><span> =
|
||||
</span><span class="attribute-value-total">{{data.attributes.mind.total}}</span></div>
|
||||
</div>
|
||||
<div class="trait flexrow"><label for="data.traits.strength.total"
|
||||
class="trait-label">{{config.traits.strength}}</label>
|
||||
<div class="trait-value flex15 grid grid-8col"><input type="number" name="data.traits.strength.base"
|
||||
value='{{data.traits.strength.base}}' data-dtype="Number" /><span> +
|
||||
</span><input type="number" name="data.traits.strength.mod" value='{{data.traits.strength.mod}}'
|
||||
data-dtype="Number" /><span> =
|
||||
</span><span class="trait-value-total">{{data.traits.strength.total}}</span></div>
|
||||
</div>
|
||||
<div class="trait flexrow"><label for="data.traits.agility.total"
|
||||
class="trait-label">{{config.traits.agility}}</label>
|
||||
<div class="trait-value flex15 grid grid-8col"><input type="number" name="data.traits.agility.base"
|
||||
value='{{data.traits.agility.base}}' data-dtype="Number" /><span> +
|
||||
</span><input type="number" name="data.traits.agility.mod" value='{{data.traits.agility.mod}}'
|
||||
data-dtype="Number" /><span> =
|
||||
</span><span class="trait-value-total">{{data.traits.agility.total}}</span></div>
|
||||
</div>
|
||||
<div class="trait flexrow"><label for="data.traits.intellect.total"
|
||||
class="trait-label">{{config.traits.intellect}}</label>
|
||||
<div class="trait-value flex15 grid grid-8col"><input type="number"
|
||||
name="data.traits.intellect.base" value='{{data.traits.intellect.base}}'
|
||||
data-dtype="Number" /><span> +
|
||||
</span><input type="number" name="data.traits.intellect.mod"
|
||||
value='{{data.traits.intellect.mod}}' data-dtype="Number" /><span> =
|
||||
</span><span class="trait-value-total">{{data.traits.intellect.total}}</span></div>
|
||||
</div>
|
||||
<div class="trait flexrow"><label for="data.traits.constitution.total"
|
||||
class="trait-label">{{config.traits.constitution}}</label>
|
||||
<div class="trait-value flex15 grid grid-8col"><input type="number"
|
||||
name="data.traits.constitution.base" value='{{data.traits.constitution.base}}'
|
||||
data-dtype="Number" /><span> +
|
||||
</span><input type="number" name="data.traits.constitution.mod"
|
||||
value='{{data.traits.constitution.mod}}' data-dtype="Number" /><span> =
|
||||
</span><span class="trait-value-total">{{data.traits.constitution.total}}</span></div>
|
||||
</div>
|
||||
<div class="trait flexrow"><label for="data.traits.dexterity.total"
|
||||
class="trait-label">{{config.traits.dexterity}}</label>
|
||||
<div class="trait-value flex15 grid grid-8col"><input type="number"
|
||||
name="data.traits.dexterity.base" value='{{data.traits.dexterity.base}}'
|
||||
data-dtype="Number" /><span> +
|
||||
</span><input type="number" name="data.traits.dexterity.mod"
|
||||
value='{{data.traits.dexterity.mod}}' data-dtype="Number" /><span> =
|
||||
</span><span class="trait-value-total">{{data.traits.dexterity.total}}</span></div>
|
||||
</div>
|
||||
<div class="trait flexrow"><label for="data.traits.aura.total"
|
||||
class="trait-label">{{config.traits.aura}}</label>
|
||||
<div class="trait-value flex15 grid grid-8col"><input type="number" name="data.traits.aura.base"
|
||||
value='{{data.traits.aura.base}}' data-dtype="Number" /><span> +
|
||||
</span><input type="number" name="data.traits.aura.mod" value='{{data.traits.aura.mod}}'
|
||||
data-dtype="Number" /><span> =
|
||||
</span><span class="trait-value-total">{{data.traits.aura.total}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue