diff --git a/src/module/handlebars/handlebars-partials.ts b/src/module/handlebars/handlebars-partials.ts
index 82e58e8..a5f7466 100644
--- a/src/module/handlebars/handlebars-partials.ts
+++ b/src/module/handlebars/handlebars-partials.ts
@@ -8,6 +8,8 @@ export default async function registerHandlebarsPartials(): Promise<void> {
const templatePaths = [
"systems/ds4/templates/sheets/actor/components/biography.hbs",
"systems/ds4/templates/sheets/actor/components/character-progression.hbs",
+ "systems/ds4/templates/sheets/actor/components/character-properties.hbs",
+ "systems/ds4/templates/sheets/actor/components/character-header.hbs",
"systems/ds4/templates/sheets/actor/components/check.hbs",
"systems/ds4/templates/sheets/actor/components/checks.hbs",
"systems/ds4/templates/sheets/actor/components/combat-value.hbs",
diff --git a/src/scss/components/_character_header.scss b/src/scss/components/_character_header.scss
new file mode 100644
index 0000000..f69efd2
--- /dev/null
+++ b/src/scss/components/_character_header.scss
@@ -0,0 +1,53 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../utils/typography";
+
+.ds4-character-header {
+ display: flex;
+ flex-grow: 0;
+ flex-shrink: 0;
+ gap: 1em;
+
+ &__img {
+ border: none;
+ cursor: pointer;
+ height: 100px;
+ width: 100px;
+ }
+
+ &__data {
+ display: flex;
+ flex-direction: column;
+ }
+
+ &__data-row {
+ align-content: center;
+ display: flex;
+ flex: 1;
+ flex-direction: row;
+ gap: 0.5em;
+ > * {
+ flex: 1;
+ }
+ }
+
+ &__name {
+ display: flex;
+ align-items: center;
+ border-bottom: 0;
+ margin: 0;
+ }
+
+ &__name-input {
+ @include typography.font-heading-upper;
+ background-color: transparent;
+ border: none;
+ flex: 1;
+ font-size: 1.25em;
+ height: auto;
+ }
+}
diff --git a/src/scss/components/_character_progression.scss b/src/scss/components/_character_progression.scss
index 8e316a8..d1d03d8 100644
--- a/src/scss/components/_character_progression.scss
+++ b/src/scss/components/_character_progression.scss
@@ -10,42 +10,39 @@
@use "../utils/variables";
@use "../utils/mixins";
-.progression {
- .progression-entry {
- @include mixins.mark-invalid-or-disabled-input;
+.ds4-character-progression {
+ @include mixins.mark-invalid-or-disabled-input;
+ display: flex;
+ gap: 0.5em;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: flex-end;
+ &__entry {
align-items: center;
+ display: flex;
+ flex: 1;
+ gap: 0.25em;
+ justify-content: flex-end;
+ }
- padding-right: 3px;
- h2.progression-label {
- @include typography.font-heading-upper;
- display: block;
- height: 50px;
- padding: 0;
- color: colors.$c-light-grey;
- border: none;
- line-height: 50px;
- margin: variables.$margin-sm 0;
- text-align: right;
- }
- input.progression-value {
- margin-left: 5px;
- flex: 0 0 40px;
- text-align: left;
+ &__label {
+ @include typography.font-heading-upper;
+ border: none;
+ color: colors.$c-light-grey;
+ margin: 0;
+ padding: 0;
+ text-align: right;
+ }
- &--slayer-points {
- &::-webkit-inner-spin-button,
- &::-webkit-outer-spin-button {
- -webkit-appearance: auto;
- }
- &:hover,
- &:focus {
- -moz-appearance: auto;
- }
+ &__input {
+ flex: 0 0 5ch;
+
+ &--slayer-points {
+ &::-webkit-inner-spin-button,
+ &::-webkit-outer-spin-button {
+ -webkit-appearance: auto;
+ }
+ &:hover,
+ &:focus {
+ -moz-appearance: auto;
}
}
}
diff --git a/src/scss/components/_character_properties.scss b/src/scss/components/_character_properties.scss
new file mode 100644
index 0000000..1962afd
--- /dev/null
+++ b/src/scss/components/_character_properties.scss
@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ * SPDX-FileCopyrightText: 2021 Oliver Rümpelein
+ * SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../utils/mixins";
+
+.ds4-character-properties {
+ @include mixins.mark-invalid-or-disabled-input;
+ display: flex;
+ gap: 0.25em;
+
+ &__property {
+ flex: 1;
+ }
+
+ &__property-label {
+ font-size: 0.9em;
+ font-weight: bold;
+ white-space: nowrap;
+ }
+
+ &__property-multi-input {
+ display: flex;
+ gap: 0.125em;
+ }
+}
diff --git a/src/scss/components/_sheet.scss b/src/scss/components/_sheet.scss
new file mode 100644
index 0000000..2308aef
--- /dev/null
+++ b/src/scss/components/_sheet.scss
@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-sheet {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+}
diff --git a/src/scss/components/_tabs.scss b/src/scss/components/_sheet_tab_nav.scss
similarity index 70%
rename from src/scss/components/_tabs.scss
rename to src/scss/components/_sheet_tab_nav.scss
index a16447a..9d86fd9 100644
--- a/src/scss/components/_tabs.scss
+++ b/src/scss/components/_sheet_tab_nav.scss
@@ -6,16 +6,12 @@
@use "../utils/variables";
-nav.tabs {
+.ds4-sheet-tab-nav {
height: auto;
border-top: variables.$border-groove;
border-bottom: variables.$border-groove;
- .item {
- font-weight: bold;
- white-space: nowrap;
- }
- .item.active {
- text-decoration: none;
+ &__item {
+ font-weight: bold;
}
}
diff --git a/src/scss/ds4.scss b/src/scss/ds4.scss
index 7e33edd..1185def 100644
--- a/src/scss/ds4.scss
+++ b/src/scss/ds4.scss
@@ -23,6 +23,7 @@
@include meta.load-css("components/apps");
@include meta.load-css("components/basic_property");
@include meta.load-css("components/character_progression");
+ @include meta.load-css("components/character_properties");
@include meta.load-css("components/character_values");
@include meta.load-css("components/check");
@include meta.load-css("components/checks");
@@ -33,10 +34,12 @@
@include meta.load-css("components/currency");
@include meta.load-css("components/description");
@include meta.load-css("components/forms");
+ @include meta.load-css("components/character_header");
@include meta.load-css("components/item_list");
@include meta.load-css("components/profile");
@include meta.load-css("components/rollable_image");
- @include meta.load-css("components/tabs");
+ @include meta.load-css("components/sheet");
+ @include meta.load-css("components/sheet_tab_nav");
@include meta.load-css("components/talent_rank_equation");
@include meta.load-css("tabs/biography");
}
diff --git a/src/templates/sheets/actor/character-sheet.hbs b/src/templates/sheets/actor/character-sheet.hbs
index 8e5eb27..6fc20bc 100644
--- a/src/templates/sheets/actor/character-sheet.hbs
+++ b/src/templates/sheets/actor/character-sheet.hbs
@@ -6,83 +6,17 @@ SPDX-FileCopyrightText: 2021 Gesina Schwalbe
SPDX-License-Identifier: MIT
--}}
-<form class="{{cssClass}} flexcol" autocomplete="off">
- {{!-- Sheet Header --}}
- <header class="sheet-header">
- <img class="profile-img" src="{{data.img}}" data-edit="img" alt="Actor Icon" title="{{data.name}}" height="100"
- width="100" />
- <div class="header-fields flexrow">
- <h1 class="charname">
- <label for="name" class="hidden">Name</label>
- <input name="name" type="text" id="name" value="{{data.name}}" placeholder="Name" />
- </h1>
- {{> systems/ds4/templates/sheets/actor/components/character-progression.hbs}}
-
- <div class="flexrow basic-properties">
- <div class="basic-property">
- <label class="basic-property-label"
- for="data.baseInfo.race">{{config.i18n.characterBaseInfo.race}}</label>
- <input type="text" name="data.baseInfo.race" id="data.baseInfo.race"
- value="{{data.data.baseInfo.race}}" data-dtype="String" />
- </div>
- <div class="basic-property">
- <label class="basic-property-label"
- for="data.baseInfo.culture">{{config.i18n.characterBaseInfo.culture}}</label>
- <input id="data.baseInfo.culture" type="text" name="data.baseInfo.culture"
- value="{{data.data.baseInfo.culture}}" data-dtype="String" />
- </div>
- <div class="basic-property flex125">
- <label class="basic-property-label"
- for="data.progression.progressPoints.used">{{config.i18n.characterProgression.progressPoints}}</label>
- <div class="flexrow">
- <input id="data.progression.progressPoints.used" type="number"
- name="data.progression.progressPoints.used"
- value="{{data.data.progression.progressPoints.used}}" data-dtype="Number" />
- <span class="input-divider"> / </span>
- <label class="hidden" for="data.progression.progressPoints.total">Total
- Progression Points</label>
- <input type="number" id="data.progression.progressPoints.total"
- name="data.progression.progressPoints.total"
- value="{{data.data.progression.progressPoints.total}}" data-dtype="Number" />
- </div>
- </div>
- <div class="basic-property flex125">
- <label class="basic-property-label"
- for="data.progression.talentPoints.used">{{config.i18n.characterProgression.talentPoints}}</label>
- <div class="flexrow">
- <input type="number" name="data.progression.talentPoints.used"
- id="data.progression.talentPoints.used" value="{{data.data.progression.talentPoints.used}}"
- data-dtype="Number" />
- <span class="input-divider"> / </span>
- <label for="data.progression.talentPoints.total" class="hidden">Total Talent Points</label>
- <input type="number" name="data.progression.talentPoints.total"
- id="data.progression.talentPoints.total"
- value="{{data.data.progression.talentPoints.total}}" data-dtype="Number" />
- </div>
- </div>
- <div class="basic-property">
- <label class="basic-property-label"
- for="data.baseInfo.class">{{config.i18n.characterBaseInfo.class}}</label>
- <input type="text" id="data.baseInfo.class" name="data.baseInfo.class"
- value="{{data.data.baseInfo.class}}" data-dtype="String" />
- </div>
- <div class="basic-property">
- <label class="basic-property-label"
- for="data.baseInfo.heroClass">{{config.i18n.characterBaseInfo.heroClass}}</label>
- <input type="text" id="data.baseInfo.heroClass" name="data.baseInfo.heroClass"
- value="{{data.data.baseInfo.heroClass}}" data-dtype="String" />
- </div>
- </div>
- </div>
- </header>
+<form class="{{cssClass}} ds4-sheet" autocomplete="off">
+ {{!-- Character Header --}}
+ {{> systems/ds4/templates/sheets/actor/components/character-header.hbs}}
{{!-- Sheet Tab Navigation --}}
- <nav class="sheet-tabs tabs" data-group="primary">
- <a class="item" data-tab="values">{{localize 'DS4.HeadingValues'}}</a>
- <a class="item" data-tab="inventory">{{localize 'DS4.HeadingInventory'}}</a>
- <a class="item" data-tab="spells">{{localize 'DS4.HeadingSpells'}}</a>
- <a class="item" data-tab="abilities">{{localize 'DS4.HeadingAbilities'}}</a>
- <a class="item" data-tab="biography">{{localize 'DS4.HeadingBiography'}}</a>
+ <nav class="ds4-sheet-tab-nav sheet-tabs tabs" data-group="primary">
+ <a class="ds4-sheet-tab-nav__item item" data-tab="values">{{localize 'DS4.HeadingValues'}}</a>
+ <a class="ds4-sheet-tab-nav__item item" data-tab="inventory">{{localize 'DS4.HeadingInventory'}}</a>
+ <a class="ds4-sheet-tab-nav__item item" data-tab="spells">{{localize 'DS4.HeadingSpells'}}</a>
+ <a class="ds4-sheet-tab-nav__item item" data-tab="abilities">{{localize 'DS4.HeadingAbilities'}}</a>
+ <a class="ds4-sheet-tab-nav__item item" data-tab="biography">{{localize 'DS4.HeadingBiography'}}</a>
</nav>
<!-- beautify ignore:start -->
diff --git a/src/templates/sheets/actor/components/character-header.hbs b/src/templates/sheets/actor/components/character-header.hbs
new file mode 100644
index 0000000..e2d279c
--- /dev/null
+++ b/src/templates/sheets/actor/components/character-header.hbs
@@ -0,0 +1,25 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+SPDX-FileCopyrightText: 2021 Oliver Rümpelein
+SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+
+SPDX-License-Identifier: MIT
+--}}
+
+<header class="ds4-character-header">
+ <img class="ds4-character-header__img" src="{{data.img}}" data-edit="img" alt="{{localize 'DS4.ActorImageAltText'}}"
+ title="{{data.name}}" height="100" width="100" />
+ <div class="ds4-character-header__data">
+ <div class="ds4-character-header__data-row">
+ <h1 class="ds4-character-header__name">
+ <label for="name" class="hidden">Name</label>
+ <input class="ds4-character-header__name-input" name="name" type="text" id="name" value="{{data.name}}"
+ placeholder="{{localize 'DS4.PlaceholderName'}}" />
+ </h1>
+ {{> systems/ds4/templates/sheets/actor/components/character-progression.hbs}}
+ </div>
+ <div class="ds4-character-header__data-row">
+ {{> systems/ds4/templates/sheets/actor/components/character-properties.hbs}}
+ </div>
+ </div>
+</header>
diff --git a/src/templates/sheets/actor/components/character-progression.hbs b/src/templates/sheets/actor/components/character-progression.hbs
index 9788ea5..515d6a5 100644
--- a/src/templates/sheets/actor/components/character-progression.hbs
+++ b/src/templates/sheets/actor/components/character-progression.hbs
@@ -6,41 +6,41 @@ SPDX-FileCopyrightText: 2021 Gesina Schwalbe
SPDX-License-Identifier: MIT
--}}
-<div class="progression flexrow">
- <div class="progression-entry">
- <h2 class="progression-label"><label for="data.combatValues.hitPoints.value"
+<div class="ds4-character-progression">
+ <div class="ds4-character-progression__entry">
+ <h2 class="ds4-character-progression__label"><label for="data.combatValues.hitPoints.value"
title="{{localize 'DS4.CombatValuesHitPointsCurrent'}}">{{localize
"DS4.CombatValuesHitPointsCurrentAbbr"}}</label>
</h2>
- <input class="progression-value" type="number" name="data.combatValues.hitPoints.value"
+ <input class="ds4-character-progression__input" type="number" name="data.combatValues.hitPoints.value"
id="data.combatValues.hitPoints.value" value="{{data.data.combatValues.hitPoints.value}}"
data-dtype="Number" />
</div>
- {{#if (eq actor.type "character")}}
+ {{#if (eq data.type "character")}}
{{#if settings.showSlayerPoints}}
- <div class="progression-entry">
- <h2 class="progression-label"><label for="data.slayersPoints.value"
+ <div class="ds4-character-progression__entry">
+ <h2 class="ds4-character-progression__label"><label for="data.slayersPoints.value"
title="{{localize 'DS4.CharacterSlayerPoints'}}">{{localize "DS4.CharacterSlayerPointsAbbr"}}</label>
</h2>
- <input class="progression-value progression-value--slayer-points" type="number"
+ <input class="ds4-character-progression__input ds4-character-progression__input--slayer-points" type="number"
max="{{data.data.slayerPoints.max}}" min="0" step="1" name="data.slayerPoints.value"
id="data.slayersPoints.value" value="{{data.data.slayerPoints.value}}" data-dtype="Number" />
</div>
{{/if}}
- <div class="progression-entry">
- <h2 class="progression-label"><label for="data.progression.level"
+ <div class="ds4-character-progression__entry">
+ <h2 class="ds4-character-progression__label"><label for="data.progression.level"
title="{{localize 'DS4.CharacterProgressionLevel'}}">{{localize
"DS4.CharacterProgressionLevelAbbr"}}</label>
</h2>
- <input class="progression-value" type="number" min="0" name="data.progression.level" id="data.progression.level"
- value="{{data.data.progression.level}}" data-dtype="Number" />
+ <input class="ds4-character-progression__input" type="number" min="0" name="data.progression.level"
+ id="data.progression.level" value="{{data.data.progression.level}}" data-dtype="Number" />
</div>
- <div class="progression-entry">
- <h2 class="progression-label"><label for="data.progression.experiencePoints"
+ <div class="ds4-character-progression__entry">
+ <h2 class="ds4-character-progression__label"><label for="data.progression.experiencePoints"
title="{{localize 'DS4.CharacterProgressionExperiencePoints'}}">{{localize
"DS4.CharacterProgressionExperiencePointsAbbr"}}</label>
</h2>
- <input class="progression-value" type="number" min="0" name="data.progression.experiencePoints"
+ <input class="ds4-character-progression__input" type="number" min="0" name="data.progression.experiencePoints"
id="data.progression.experiencePoints" value="{{data.data.progression.experiencePoints}}"
data-dtype="Number" />
</div>
diff --git a/src/templates/sheets/actor/components/character-properties.hbs b/src/templates/sheets/actor/components/character-properties.hbs
new file mode 100644
index 0000000..0cc69f7
--- /dev/null
+++ b/src/templates/sheets/actor/components/character-properties.hbs
@@ -0,0 +1,59 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+SPDX-FileCopyrightText: 2021 Oliver Rümpelein
+SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+
+SPDX-License-Identifier: MIT
+--}}
+
+<div class="ds4-character-properties">
+ <div class="ds4-character-properties__property">
+ <label class="ds4-character-properties__property-label"
+ for="data.baseInfo.race">{{config.i18n.characterBaseInfo.race}}</label>
+ <input type="text" name="data.baseInfo.race" id="data.baseInfo.race" value="{{data.data.baseInfo.race}}"
+ data-dtype="String" />
+ </div>
+ <div class="ds4-character-properties__property">
+ <label class="ds4-character-properties__property-label"
+ for="data.baseInfo.culture">{{config.i18n.characterBaseInfo.culture}}</label>
+ <input id="data.baseInfo.culture" type="text" name="data.baseInfo.culture"
+ value="{{data.data.baseInfo.culture}}" data-dtype="String" />
+ </div>
+ <div class="ds4-character-properties__property">
+ <label class="ds4-character-properties__property-label"
+ for="data.progression.progressPoints.used">{{config.i18n.characterProgression.progressPoints}}</label>
+ <div class="ds4-character-properties__property-multi-input">
+ <input id="data.progression.progressPoints.used" type="number" name="data.progression.progressPoints.used"
+ value="{{data.data.progression.progressPoints.used}}" data-dtype="Number" />
+ <span class="input-divider"> / </span>
+ <label class="hidden" for="data.progression.progressPoints.total">Total
+ Progression Points</label>
+ <input type="number" id="data.progression.progressPoints.total" name="data.progression.progressPoints.total"
+ value="{{data.data.progression.progressPoints.total}}" data-dtype="Number" />
+ </div>
+ </div>
+ <div class="ds4-character-properties__property">
+ <label class="ds4-character-properties__property-label"
+ for="data.progression.talentPoints.used">{{config.i18n.characterProgression.talentPoints}}</label>
+ <div class="ds4-character-properties__property-multi-input">
+ <input type="number" name="data.progression.talentPoints.used" id="data.progression.talentPoints.used"
+ value="{{data.data.progression.talentPoints.used}}" data-dtype="Number" />
+ <span class="input-divider"> / </span>
+ <label for="data.progression.talentPoints.total" class="hidden">Total Talent Points</label>
+ <input type="number" name="data.progression.talentPoints.total" id="data.progression.talentPoints.total"
+ value="{{data.data.progression.talentPoints.total}}" data-dtype="Number" />
+ </div>
+ </div>
+ <div class="ds4-character-properties__property">
+ <label class="ds4-character-properties__property-label"
+ for="data.baseInfo.class">{{config.i18n.characterBaseInfo.class}}</label>
+ <input type="text" id="data.baseInfo.class" name="data.baseInfo.class" value="{{data.data.baseInfo.class}}"
+ data-dtype="String" />
+ </div>
+ <div class="ds4-character-properties__property">
+ <label class="ds4-character-properties__property-label"
+ for="data.baseInfo.heroClass">{{config.i18n.characterBaseInfo.heroClass}}</label>
+ <input type="text" id="data.baseInfo.heroClass" name="data.baseInfo.heroClass"
+ value="{{data.data.baseInfo.heroClass}}" data-dtype="String" />
+ </div>
+</div>
diff --git a/src/templates/sheets/actor/creature-sheet.hbs b/src/templates/sheets/actor/creature-sheet.hbs
index 1b034bc..3ae5da8 100644
--- a/src/templates/sheets/actor/creature-sheet.hbs
+++ b/src/templates/sheets/actor/creature-sheet.hbs
@@ -61,12 +61,13 @@ SPDX-License-Identifier: MIT
</header>
{{!-- Sheet Tab Navigation --}}
- <nav class="sheet-tabs tabs" data-group="primary">
- <a class="item" data-tab="values">{{localize 'DS4.HeadingValues'}}</a>
- <a class="item" data-tab="inventory">{{localize 'DS4.HeadingInventory'}}</a>
- <a class="item" data-tab="special-creature-abilities">{{localize 'DS4.HeadingSpecialCreatureAbilities'}}</a>
- <a class="item" data-tab="spells">{{localize 'DS4.HeadingSpells'}}</a>
- <a class="item" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
+ <nav class="ds4-sheet-tab-nav sheet-tabs tabs" data-group="primary">
+ <a class="ds4-sheet-tab-nav__item item" data-tab="values">{{localize 'DS4.HeadingValues'}}</a>
+ <a class="ds4-sheet-tab-nav__item item" data-tab="inventory">{{localize 'DS4.HeadingInventory'}}</a>
+ <a class="ds4-sheet-tab-nav__item item" data-tab="special-creature-abilities">{{localize
+ 'DS4.HeadingSpecialCreatureAbilities'}}</a>
+ <a class="ds4-sheet-tab-nav__item item" data-tab="spells">{{localize 'DS4.HeadingSpells'}}</a>
+ <a class="ds4-sheet-tab-nav__item item" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
</nav>
{{!-- Sheet Body --}}
diff --git a/src/templates/sheets/item/components/body.hbs b/src/templates/sheets/item/components/body.hbs
index 8779e25..1fced58 100644
--- a/src/templates/sheets/item/components/body.hbs
+++ b/src/templates/sheets/item/components/body.hbs
@@ -8,11 +8,11 @@ SPDX-License-Identifier: MIT
{{!-- Template for the common body (navigation & body sections) of all items. --}}
{{!-- Sheet Tab Navigation --}}
-<nav class="sheet-tabs tabs" data-group="primary">
- <a class="item" data-tab="description">{{localize "DS4.HeadingDescription"}}</a>
- <a class="item" data-tab="effects">{{localize "DS4.HeadingEffects"}}</a>
+<nav class="ds4-sheet-tab-nav sheet-tabs tabs" data-group="primary">
+ <a class="ds4-sheet-tab-nav__item item" data-tab="description">{{localize "DS4.HeadingDescription"}}</a>
+ <a class="ds4-sheet-tab-nav__item item" data-tab="effects">{{localize "DS4.HeadingEffects"}}</a>
{{#if isPhysical}}
- <a class="item" data-tab="details">{{localize "DS4.HeadingDetails"}}</a>
+ <a class="ds4-sheet-tab-nav__item item" data-tab="details">{{localize "DS4.HeadingDetails"}}</a>
{{/if}}
</nav>