add culture and save space with base infos and progression infos
This commit is contained in:
parent
520aab8b72
commit
f8deca4cd4
8 changed files with 102 additions and 75 deletions
|
|
@ -20,4 +20,5 @@
|
|||
@import "scss/components/character_values";
|
||||
@import "scss/components/attributes_traits";
|
||||
@import "scss/components/combat_values";
|
||||
@import "scss/components/character_progression";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ async function registerHandlebarsPartials() {
|
|||
"systems/ds4/templates/actor/partials/attributes-traits.hbs",
|
||||
"systems/ds4/templates/actor/partials/combat-values.hbs",
|
||||
"systems/ds4/templates/actor/partials/profile.hbs",
|
||||
"systems/ds4/templates/actor/partials/character-progression.hbs",
|
||||
];
|
||||
return loadTemplates(templatePaths);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
.basic-properties {
|
||||
flex: 0 0 100%;
|
||||
gap: 2px;
|
||||
.basic-property {
|
||||
padding-left: 1px;
|
||||
padding-right: 1px;
|
||||
.basic-property-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -9,5 +12,8 @@
|
|||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.input-divider {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
30
src/scss/components/_character_progression.scss
Normal file
30
src/scss/components/_character_progression.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
.progression {
|
||||
.progression-entry {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
padding-right: 3px;
|
||||
h2.progression-label {
|
||||
font-family: $font-heading;
|
||||
display: block;
|
||||
height: 50px;
|
||||
padding: 0px;
|
||||
color: $c-light-grey;
|
||||
border: none;
|
||||
line-height: 50px;
|
||||
margin: $header-top-margin 0;
|
||||
text-align: right;
|
||||
//flex: 0;
|
||||
}
|
||||
input.progression-value {
|
||||
margin-left: 5px;
|
||||
flex: 0 0 40px;
|
||||
text-align: left;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -18,6 +18,9 @@
|
|||
.flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
.flex125 {
|
||||
flex: 1.25;
|
||||
}
|
||||
.flex15 {
|
||||
flex: 1.5;
|
||||
}
|
||||
|
|
@ -51,6 +54,9 @@
|
|||
.flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
.flex125 {
|
||||
flex: 1.25;
|
||||
}
|
||||
.flex15 {
|
||||
flex: 1.5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,8 +28,8 @@
|
|||
}
|
||||
|
||||
.grid-6col {
|
||||
grid-column: span 5 / span 5;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
grid-column: span 6 / span 6;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-7col {
|
||||
|
|
|
|||
|
|
@ -2,89 +2,57 @@
|
|||
{{!-- 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">
|
||||
<div class="header-fields flexrow">
|
||||
<h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="Name" /></h1>
|
||||
{{> systems/ds4/templates/actor/partials/character-progression.hbs}}
|
||||
|
||||
<div class="flexrow basic-properties">
|
||||
<div class="basic-property">
|
||||
<label class="basic-property-label" for="data.baseInfo.race">{{config.baseInfo.race}}</label>
|
||||
<input type="text" name="data.baseInfo.race" value="{{data.baseInfo.race}}" data-dtype="String" />
|
||||
</div>
|
||||
<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}}"
|
||||
<div class="basic-property">
|
||||
<label class="basic-property-label" for="data.baseInfo.culture">{{config.baseInfo.culture}}</label>
|
||||
<input type="text" name="data.baseInfo.culture" value="{{data.baseInfo.culture}}"
|
||||
data-dtype="String" />
|
||||
</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>
|
||||
</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">
|
||||
<div class="basic-property flex125">
|
||||
<label class="basic-property-label"
|
||||
for="data.progression.progressPoints.used">{{config.progression.progressPoints}}</label>
|
||||
<div class="flexrow">
|
||||
<input type="text" name="data.progression.progressPoints.used"
|
||||
value="{{data.progression.progressPoints.used}}" data-dtype="Number" /><span> /
|
||||
value="{{data.progression.progressPoints.used}}" data-dtype="Number" /><span
|
||||
class="input-divider"> /
|
||||
</span><input type="text" name="data.progression.progressPoints.total"
|
||||
value="{{data.progression.progressPoints.total}}" data-dtype="Number" />
|
||||
</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">
|
||||
<div class="basic-property flex125">
|
||||
<label class="basic-property-label"
|
||||
for="data.progression.talentPoints.used">{{config.progression.talentPoints}}</label>
|
||||
<div class="flexrow">
|
||||
<input type="text" name="data.progression.talentPoints.used"
|
||||
value="{{data.progression.talentPoints.used}}" data-dtype="Number" /><span> /
|
||||
value="{{data.progression.talentPoints.used}}" data-dtype="Number" /><span
|
||||
class="input-divider"> /
|
||||
</span><input type="text" name="data.progression.talentPoints.total"
|
||||
value="{{data.progression.talentPoints.total}}" data-dtype="Number" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="basic-property">
|
||||
<label class="basic-property-label" for="data.baseInfo.class">{{config.baseInfo.class}}</label>
|
||||
<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.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">
|
||||
<div class="basic-property">
|
||||
<label class="basic-property-label"
|
||||
for="data.baseInfo.heroClass">{{config.baseInfo.heroClass}}</label>
|
||||
<input type="text" name="data.baseInfo.heroClass" value="{{data.baseInfo.heroClass}}"
|
||||
data-dtype="String" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="character-values">
|
||||
{{> systems/ds4/templates/actor/partials/attributes-traits.hbs}}
|
||||
{{> systems/ds4/templates/actor/partials/combat-values.hbs}}
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
|
|||
15
src/templates/actor/partials/character-progression.hbs
Normal file
15
src/templates/actor/partials/character-progression.hbs
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<div class="progression flexrow">
|
||||
<div class="progression-entry">
|
||||
<h2 class="progression-label"><label for="data.progression.level">{{config.progression.level}}</label>
|
||||
</h2>
|
||||
<input class="progression-value" type="text" name="data.progression.level" value="{{data.progression.level}}"
|
||||
data-dtype="Number" />
|
||||
</div>
|
||||
<div class="progression-entry">
|
||||
<h2 class="progression-label"><label
|
||||
for="data.progression.experiencePoints">{{config.progression.experiencePoints}}</label>
|
||||
</h2>
|
||||
<input class="progression-value" type="text" name="data.progression.experiencePoints"
|
||||
value="{{data.progression.experiencePoints}}" data-dtype="Number" />
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in a new issue