add culture and save space with base infos and progression infos

This commit is contained in:
Johannes Loher 2021-01-04 21:51:58 +01:00
parent 520aab8b72
commit f8deca4cd4
8 changed files with 102 additions and 75 deletions

View file

@ -20,4 +20,5 @@
@import "scss/components/character_values";
@import "scss/components/attributes_traits";
@import "scss/components/combat_values";
@import "scss/components/character_progression";
}

View file

@ -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);
}

View file

@ -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;
}
}
}

View 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;
}
}
}

View file

@ -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;
}

View file

@ -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 {

View file

@ -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>

View 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>