Use grid for talents tab

src/ds4.scss

@@ -19,5 +19,5 @@
     @include meta.load-css("scss/components/forms");
     @include meta.load-css("scss/components/item_list");
     @include meta.load-css("scss/components/tabs");
-    @include meta.load-css("scss/components/talents");
+    @include meta.load-css("scss/components/talent_rank_equation");
 }

src/lang/de.json

@@ -143,6 +143,7 @@
     "DS4.TalentRankMax": "Maximaler Rang",
     "DS4.TalentRankMod": "Zusätzlicher Rang",
     "DS4.TalentRankTotal": "Gesamter Rang",
+    "DS4.TalentRankOf": "von",
     "DS4.CharacterLanguageLanguages": "Sprachen",
     "DS4.CharacterLanguageAlphabets": "Schriftzeichen",
     "DS4.SpecialCreatureAbilityExperiencePoints": "Erfahrungspunkte",

src/lang/en.json

@@ -143,6 +143,7 @@
     "DS4.TalentRankMax": "Maximum Ranks",
     "DS4.TalentRankMod": "Additional Ranks",
     "DS4.TalentRankTotal": "Total Ranks",
+    "DS4.TalentRankOf": "of",
     "DS4.CharacterLanguageLanguages": "Languages",
     "DS4.CharacterLanguageAlphabets": "Alphabets",
     "DS4.SpecialCreatureAbilityExperiencePoints": "Experience Points",

src/module/ds4.ts

@@ -63,6 +63,7 @@ async function registerHandlebarsPartials() {
         "systems/ds4/templates/actor/partials/special-creature-abilities-overview.hbs",
         "systems/ds4/templates/actor/partials/character-inventory.hbs",
         "systems/ds4/templates/actor/partials/creature-inventory.hbs",
+        "systems/ds4/templates/actor/partials/talent-rank-equation.hbs",
     ];
     return loadTemplates(templatePaths);
 }

src/scss/components/_item_list.scss

@@ -24,17 +24,25 @@
         grid-template-columns: $row-height $row-height 3ch 3fr 1fr 1fr 3ch 5fr 4ch;
     }
     &--shield {
-        grid-template-columns: $row-height $row-height 3ch 3fr 3ch 5fr 4ch;
+        grid-template-columns: $row-height $row-height 3ch 1fr 3ch 3fr 4ch;
     }
     &--equipment {
-        grid-template-columns: $row-height $row-height 3ch 3fr 10ch 5fr 4ch;
+        grid-template-columns: $row-height $row-height 3ch 1fr 10ch 3fr 4ch;
     }
     &--loot {
-        grid-template-columns: $row-height 3ch 3fr 10ch 5fr 4ch;
+        grid-template-columns: $row-height 3ch 1fr 10ch 3fr 4ch;
     }
     &--spell {
         grid-template-columns: $row-height $row-height 2fr $row-height 1fr 1fr 1fr 1fr 4ch;
     }
+    &--talent {
+        grid-template-columns: $row-height 1fr 1fr 3fr 4ch;
+    }
+    &--racial-ability,
+    &--language,
+    &--alphabet {
+        grid-template-columns: $row-height 1fr 3fr 4ch;
+    }
 
     &__row {
         grid-column: 1/-1;

src/scss/components/_tabs.scss

@@ -6,6 +6,7 @@ nav.tabs {
     border-bottom: variables.$border-groove;
     .item {
         font-weight: bold;
+        white-space: nowrap;
     }
 
     .item.active {

src/scss/components/_talent_rank_equation.scss

@@ -0,0 +1,11 @@
+.ds4-talent-rank-equation {
+    display: flex;
+    gap: 0.5em;
+    &__value {
+        height: auto;
+        border: 0;
+        padding: 0;
+        background-color: transparent;
+        text-align: center;
+    }
+}

src/scss/components/_talents.scss

@@ -1,3 +0,0 @@
-.talent-ranks-equation {
-    text-align: center;
-}

src/templates/actor/partials/talent-rank-equation.hbs

@@ -0,0 +1,33 @@
+{{!--
+!-- Render an input element for a rank value property of an item.
+!-- @param talentRank: The talentRank
+!-- @param property: The key of the property in item.data (if 'base', the max value is set automatically)
+!-- @param disabled: If given, is placed plainly into the input as HTML property; meant to be set to "disabled" to
+disable the input element
+!-- @param localizeString: The string to use as key for the localized tooltip
+--}}
+{{#*inline "talentRankValue"}}
+<input class="ds4-talent-rank-equation__value item-change" data-dtype="Number" type="number" min="0" step="1" {{#if (eq
+    property 'base' ) }}max="{{talentRank.max}}" {{/if}} {{disabled}} data-property="data.rank.{{property}}"
+    value="{{lookup talentRank property}}" title="{{localize localizeString}}" />
+{{/inline}}
+
+
+{{!--
+!-- Render an input element for a rank value property of an item.
+!-- @param talentRank: The talent rank
+--}}
+<div class="ds4-talent-rank-equation">
+    {{!-- acquired rank --}}
+    {{> talentRankValue talentRank=talentRank property='base' localizeString='DS4.TalentRankBase'}}
+    <div> ( {{localize "DS4.TalentRankOf"}} </div>
+    {{!-- maximum acquirable rank --}}
+    {{> talentRankValue talentRank=talentRank property='max' localizeString='DS4.TalentRankMax'}}
+    <div>) + </div>
+    {{!-- additional ranks --}}
+    {{> talentRankValue talentRank=talentRank property='mod' localizeString='DS4.TalentRankMod'}}
+    <div> = </div>
+    {{!-- derived total rank --}}
+    {{> talentRankValue talentRank=talentRank property='total' localizeString='DS4.TalentRankTotal'
+    disabled='disabled'}}
+</div>

src/templates/actor/partials/talents-abilities-overview.hbs

@@ -20,21 +20,6 @@
 {{/inline}}
 
 
-{{!--
-!-- Render an input element for a rank value property of an item.
-!--
-!-- @param item: the item
-!-- @param property: the key of the property in item.data (if 'base', the max value is set automatically)
-!-- @param disabled: if given, is placed plainly into the input as HTML property;
-!-- meant to be set to "disabled" to disable the input element
---}}
-{{#*inline "talentRankValue"}}
-<input class="item-num-val item-change" data-dtype="Number" type="number" min="0" step="1" {{#if (eq property 'base' )
-    }}max="{{item.data.rank.max}}" {{/if}} {{disabled}} data-property="data.rank.{{property}}"
-    value="{{lookup item.data.rank property}}" title="{{localize localizeString}}" />
-{{/inline}}
-
-
 {{!--
 !-- Render a talent list row from a given item.
 !-- It is a flexbox with a child for each item value of interest.
@@ -43,35 +28,41 @@
 !-- @param item: hand over the item to the partial as hash parameter
 --}}
 {{#*inline "talentListEntry"}}
-<li class="item flexrow" data-item-id="{{item._id}}">
+<li class="ds4-item-list__row item" data-item-id="{{item._id}}">
     {{!-- image --}}
-    <div class="flex05 item-image">
+    <div class="ds4-item-list__image" style="background-image: url('{{item.img}}')" title="{{item.name}}"></div>
-        <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
-    </div>
     {{!-- name --}}
-    <input class="flex2 item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
+    <input class="ds4-item-list__editable item-change" type="text" value="{{item.name}}" data-dtype="String"
         data-property="name" title="{{htmlToPlainText item.data.description}}">
-    <div class="flex3 flexrow talent-ranks-equation">
+    {{!-- talent tank equation --}}
-        {{!-- acquired rank --}}
+    {{> systems/ds4/templates/actor/partials/talent-rank-equation.hbs talentRank=item.data.rank}}
-        {{> talentRankValue item=item property='base' localizeString='DS4.TalentRankBase'}}
-        <span> ( of </span>
-        {{!-- maximum acquirable rank --}}
-        {{> talentRankValue item=item property='max' localizeString='DS4.TalentRankMax'}}
-        <span>) + </span>
-        {{!-- additional ranks --}}
-        {{> talentRankValue item=item property='mod' localizeString='DS4.TalentRankMod'}}
-        <span> = </span>
-        {{!-- derived total rank --}}
-        {{> talentRankValue item=item property='total' localizeString='DS4.TalentRankTotal' disabled='disabled'}}
-    </div>
     {{!-- description --}}
-    <div class="flex4 item-description" title="{{htmlToPlainText item.data.description}}">
+    <div class="ds4-item-list__description" title="{{htmlToPlainText item.data.description}}">
         {{{item.data.description}}}</div>
     {{!-- control buttons --}}
     {{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }}
 </li>
 {{/inline}}
 
+{{!--
+!-- Render a list header for a base item list entry from a given item.
+!-- The partial assumes a variable dataType to be given in the context.
+--}}
+{{#*inline "talentListHeader"}}
+<li class="ds4-item-list__row ds4-item-list__row--header">
+    {{!-- image --}}
+    <div></div>
+    {{!-- name --}}
+    <div>{{localize 'DS4.ItemName'}}</div>
+    {{!-- rank info --}}
+    <div>{{localize 'DS4.TalentRank'}}</div>
+    {{!-- description --}}
+    <div>{{localize 'DS4.Description'}}</div>
+    {{!-- control buttons placeholder --}}
+    <div></div>
+</li>
+{{/inline}}
+
 
 {{!--
 !-- Render a list row for a base item from a given item.
@@ -82,17 +73,15 @@
 !-- @param item: hand over the item to the partial as hash parameter
 --}}
 {{#*inline "baseItemListEntry"}}
-<li class="item flexrow" data-item-id="{{item._id}}">
+<li class="ds4-item-list__row item" data-item-id="{{item._id}}">
     {{!-- image --}}
-    <div class="flex05 item-image">
+    <div class="ds4-item-list__image" style="background-image: url('{{item.img}}')" title="{{item.name}}"></div>
-        <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
-    </div>
     {{!-- name --}}
-    <input class="flex1 item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
+    <input class="ds4-item-list__editable item-change" type="text" value="{{item.name}}" data-dtype="String"
-        data-property="name" title="{{htmlToPlainText item.data.description}}"">
+        data-property="name" title="{{htmlToPlainText item.data.description}}">
     {{!-- description --}}
-    <div class=" flex3 item-description" title="{{htmlToPlainText item.data.description}}">
+    <div class="ds4-item-list__description" title="{{htmlToPlainText item.data.description}}">
-    {{{item.data.description}}}</div>
+        {{{item.data.description}}}</div>
     {{!-- control buttons --}}
     {{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }}
 </li>
@@ -101,72 +90,57 @@
 {{!--
 !-- Render a list header for a base item list entry from a given item.
 !-- The partial assumes a variable dataType to be given in the context.
-!--
-!-- @param dataType: the string item type for the list
 --}}
 {{#*inline "baseItemListHeader"}}
-<li class="item flexrow item-header">
+<li class="ds4-item-list__row ds4-item-list__row--header">
     {{!-- image --}}
-    <div class="flex05 item-image"></div>
+    <div></div>
     {{!-- name --}}
-    <div class="flex1 item-name">{{localize 'DS4.ItemName'}}</div>
+    <div>{{localize 'DS4.ItemName'}}</div>
     {{!-- description --}}
-    <div class="flex3">{{localize 'DS4.Description'}}</div>
+    <div>{{localize 'DS4.Description'}}</div>
     {{!-- control buttons placeholder --}}
     <div></div>
 </li>
 {{/inline}}
 
-
 {{!-- ======================================================================== --}}
 
-
 <div class="tab talents-abilities" data-group="primary" data-tab="talents-abilities">
-    <h4 class="items-list-title">{{localize 'DS4.ItemTypeTalentPlural'}}</h4>
+    <h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeTalentPlural'}}</h4>
     {{#> ifHasItemOfType itemsArray=itemsByType.talent dataType='talent' }}
-    <ol class="items-list">
+    <ol class="ds4-item-list ds4-item-list--talent item-list">
-        <li class="item flexrow item-header">
+        {{> talentListHeader}}
-            {{!-- image --}}
-            <div class="flex05 item-image"></div>
-            {{!-- name --}}
-            <div class="flex2 item-name">{{localize 'DS4.ItemName'}}</div>
-            {{!-- rank info --}}
-            <div class="flex3">{{localize 'DS4.TalentRank'}}</div>
-            {{!-- description --}}
-            <div class="flex4">{{localize 'DS4.Description'}}</div>
-            {{!-- control buttons placeholder --}}
-            <div></div>
-        </li>
         {{#each itemsByType.talent as |item id|}}
         {{> talentListEntry item=item}}
         {{/each}}
     </ol>
     {{/ifHasItemOfType}}
 
-    <h4 class="items-list-title">{{localize 'DS4.ItemTypeRacialAbilityPlural'}}</h4>
+    <h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeRacialAbilityPlural'}}</h4>
     {{#> ifHasItemOfType itemsArray=itemsByType.racialAbility dataType='racialAbility' }}
-    <ol class="items-list">
+    <ol class="ds4-item-list ds4-item-list--racial-ability item-list">
-        {{> baseItemListHeader dataType='racialAbility' }}
+        {{> baseItemListHeader}}
         {{#each itemsByType.racialAbility as |item id|}}
         {{> baseItemListEntry item=item}}
         {{/each}}
     </ol>
     {{/ifHasItemOfType}}
 
-    <h4 class="items-list-title">{{localize 'DS4.ItemTypeLanguagePlural'}}</h4>
+    <h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeLanguagePlural'}}</h4>
     {{#> ifHasItemOfType itemsArray=itemsByType.language dataType='language' }}
-    <ol class="items-list">
+    <ol class="ds4-item-list ds4-item-list--language item-list">
-        {{> baseItemListHeader dataType='language' }}
+        {{> baseItemListHeader}}
         {{#each itemsByType.language as |item id|}}
         {{> baseItemListEntry item=item}}
         {{/each}}
     </ol>
     {{/ifHasItemOfType}}
 
-    <h4 class="items-list-title">{{localize 'DS4.ItemTypeAlphabetPlural'}}</h4>
+    <h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeAlphabetPlural'}}</h4>
     {{#> ifHasItemOfType itemsArray=itemsByType.alphabet dataType='alphabet' }}
-    <ol class="items-list">
+    <ol class="ds4-item-list ds4-item-list--alphabet item-list">
-        {{> baseItemListHeader dataType='alphabet' }}
+        {{> baseItemListHeader}}
         {{#each itemsByType.alphabet as |item id|}}
         {{> baseItemListEntry item=item}}
         {{/each}}