From 4f5e6a5ebcf20d3a4a23bee6fa56f72bb517192a Mon Sep 17 00:00:00 2001
From: Gesina Schwalbe <gesina.schwalbe@pheerai.de>
Date: Tue, 29 Dec 2020 22:01:40 +0100
Subject: [PATCH] centering of num item values in char sheet

Changes:
- number values of items in the items overview of a char sheet
  are now horizontally centered
- description content is now vertically correctly aligned
---
 src/scss/components/_items.scss        |  9 ++++
 src/templates/actor/partials/items.hbs | 69 ++++++++++++++------------
 2 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/src/scss/components/_items.scss b/src/scss/components/_items.scss
index edbd0bbe..9c725e83 100644
--- a/src/scss/components/_items.scss
+++ b/src/scss/components/_items.scss
@@ -33,6 +33,10 @@
         text-align: right;
     }
 
+    .item-num-val {
+        text-align: center;
+    }
+
     .item-description {
         font-size: 75%;
         white-space: nowrap;
@@ -42,6 +46,11 @@
             text-overflow: ellipsis;
             overflow: hidden;
         }
+        p:first-child {
+            margin-top: 0px;
+            padding-top: 0px;
+        }
+
     }
 }
 
diff --git a/src/templates/actor/partials/items.hbs b/src/templates/actor/partials/items.hbs
index ffa4ef14..602c9a0e 100644
--- a/src/templates/actor/partials/items.hbs
+++ b/src/templates/actor/partials/items.hbs
@@ -4,25 +4,26 @@
 <div class="tab items" data-group="primary" data-tab="items">
 
     {{!-- WEAPONS --}}
-    <h4 class="items-list-title">{{localize "DS4.ItemTypeWeapon"}}</h4>  {{!-- SPECIFIC --}}
+    <h4 class="items-list-title">{{localize "DS4.ItemTypeWeapon"}}</h4> {{!-- SPECIFIC --}}
     <ol class="items-list">
         <li class="item flexrow item-header">
             <div class="flexrow flex15">
                 <div></div> {{!-- equipped --}} {{!-- SPECIFIC --}}
                 <div class="item-image"></div>
-                <div>#</div> {{!-- amount --}}
+                <div class="item-num-val">#</div> {{!-- amount --}}
             </div>
-            <div class="item-name flex2">{{localize "DS4.ItemName"}}</div>
+            <div class="item-name flex3">{{localize "DS4.ItemName"}}</div>
             <div>{{localize "DS4.AttackTypeAbbr"}}</div> {{!-- SPECIFIC --}}
             <div class="flexrow flex15">
-                <div>{{localize "DS4.WeaponBonusAbbr"}}</div> {{!-- SPECIFIC --}}
-                <div>{{localize "DS4.OpponentDefenseAbbr"}}</div> {{!-- SPECIFIC --}}
+                <div class="item-num-val">{{localize "DS4.WeaponBonusAbbr"}}</div> {{!-- SPECIFIC --}}
+                <div class="item-num-val">{{localize "DS4.OpponentDefenseAbbr"}}</div> {{!-- SPECIFIC --}}
             </div>
             <div class="flex4">{{localize "DS4.Description"}}</div>
             {{!-- add button --}}
             <div class="item-controls"> {{!-- SPECIFIC --}}
-                <a class="item-control item-create" title="Create item" data-type="weapon"><i class="fas fa-plus"></i>
-                    {{localize "DS4.ActionAddItem"}}</a> {{!-- SPECIFIC --}}
+                <a class="item-control item-create" title="Create item" data-type="weapon"{{!-- SPECIFIC --}}>
+                    <i class="fas fa-plus"></i>
+                    {{localize "DS4.ActionAddItem"}}</a>
             </div>
         </li>
         {{#each itemsByType.weapon as |item id|}} {{!-- SPECIFIC --}}
@@ -38,15 +39,15 @@
                     <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
                 </div>
                 {{!-- amount --}}
-                <div>{{itemData.quantity}}</div>
+                <div class="item-num-val">{{itemData.quantity}}</div>
             </div>
             {{!-- name --}}
-            <h4 class="item-name flex2">{{item.name}}</h4>
+            <h4 class="item-name flex3">{{item.name}}</h4>
             {{!-- item specifics --}}
             <div>{{lookup ../../config.attackTypes itemData.attackType}}</div> {{!-- SPECIFIC --}}
             <div class="flexrow flex15">
-                <div>{{itemData.weaponBonus}}</div> {{!-- SPECIFIC --}}
-                <div>{{itemData.opponentDefense}}</div> {{!-- SPECIFIC --}}
+                <div class="item-num-val">{{itemData.weaponBonus}}</div> {{!-- SPECIFIC --}}
+                <div class="item-num-val">{{itemData.opponentDefense}}</div> {{!-- SPECIFIC --}}
             </div>
             {{!-- description --}}
             <div class="flex4 item-description">{{{itemData.description}}}</div>
@@ -61,23 +62,24 @@
     </ol>
 
     {{!-- ARMOR --}}
-    <h4 class="items-list-title">{{localize "DS4.ItemTypeArmor"}}</h4>  {{!-- SPECIFIC --}}
+    <h4 class="items-list-title">{{localize "DS4.ItemTypeArmor"}}</h4> {{!-- SPECIFIC --}}
     <ol class="items-list">
         <li class="item flexrow item-header">
             <div class="flexrow flex15">
                 <div></div> {{!-- equipped --}} {{!-- SPECIFIC --}}
                 <div class="item-image"></div>
-                <div>#</div> {{!-- amount --}}
+                <div class="item-num-val">#</div> {{!-- amount --}}
             </div>
-            <div class="item-name flex2">{{localize "DS4.ItemName"}}</div>
+            <div class="item-name flex3">{{localize "DS4.ItemName"}}</div>
             <div>{{localize "DS4.ArmorMaterialTypeAbbr"}}</div> {{!-- SPECIFIC --}}
             <div>{{localize "DS4.ArmorTypeAbbr"}}</div> {{!-- SPECIFIC --}}
-            <div class="flex05">{{localize "DS4.ArmorValueAbbr"}}</div> {{!-- SPECIFIC --}}
+            <div class="flex05 item-num-val">{{localize "DS4.ArmorValueAbbr"}}</div> {{!-- SPECIFIC --}}
             <div class="flex4">{{localize "DS4.Description"}}</div>
             {{!-- add button --}}
             <div class="item-controls"> {{!-- SPECIFIC --}}
-                <a class="item-control item-create" title="Create item" data-type="armor"><i class="fas fa-plus"></i>
-                    {{localize "DS4.ActionAddItem"}}</a> {{!-- SPECIFIC --}}
+                <a class="item-control item-create" title="Create item" data-type="armor"{{!-- SPECIFIC --}}>
+                    <i class="fas fa-plus"></i>
+                    {{localize "DS4.ActionAddItem"}}</a>
             </div>
         </li>
         {{#each itemsByType.armor as |item id|}} {{!-- SPECIFIC --}}
@@ -96,11 +98,11 @@
                 <div>{{itemData.quantity}}</div>
             </div>
             {{!-- name --}}
-            <h4 class="item-name flex2">{{item.name}}</h4>
+            <h4 class="item-name flex3">{{item.name}}</h4>
             {{!-- item specifics --}}
             <div>{{lookup ../../config.armorMaterialTypes itemData.armorMaterialType}}</div> {{!-- SPECIFIC --}}
             <div>{{lookup ../../config.armorTypes itemData.armorType}}</div> {{!-- SPECIFIC --}}
-            <div class="flex05">{{itemData.armorValue}}</div> {{!-- SPECIFIC --}}
+            <div class="flex05 item-num-val">{{itemData.armorValue}}</div> {{!-- SPECIFIC --}}
             {{!-- description --}}
             <div class="flex4 item-description">{{{itemData.description}}}</div>
             {{!-- edit & delete buttons --}}
@@ -115,21 +117,22 @@
 
 
     {{!-- SHIELD --}}
-    <h4 class="items-list-title">{{localize "DS4.ItemTypeShield"}}</h4>  {{!-- SPECIFIC --}}
+    <h4 class="items-list-title">{{localize "DS4.ItemTypeShield"}}</h4> {{!-- SPECIFIC --}}
     <ol class="items-list">
         <li class="item flexrow item-header">
             <div class="flexrow flex15">
                 <div></div> {{!-- equipped --}} {{!-- SPECIFIC --}}
                 <div class="item-image"></div>
-                <div>#</div> {{!-- amount --}}
+                <div class="item-num-val">#</div> {{!-- amount --}}
             </div>
-            <div class="item-name flex2">{{localize "DS4.ItemName"}}</div>
-            <div class="flex05">{{localize "DS4.ArmorValueAbbr"}}</div> {{!-- SPECIFIC --}}
+            <div class="item-name flex3">{{localize "DS4.ItemName"}}</div>
+            <div class="flex05 item-num-val">{{localize "DS4.ArmorValueAbbr"}}</div> {{!-- SPECIFIC --}}
             <div class="flex4">{{localize "DS4.Description"}}</div>
             {{!-- add button --}}
             <div class="item-controls"> {{!-- SPECIFIC --}}
-                <a class="item-control item-create" title="Create item" data-type="shield"><i class="fas fa-plus"></i>
-                    {{localize "DS4.ActionAddItem"}}</a> {{!-- SPECIFIC --}}
+                <a class="item-control item-create" title="Create item" data-type="shield"{{!-- SPECIFIC --}}>
+                    <i class="fas fa-plus"></i>
+                    {{localize "DS4.ActionAddItem"}}</a>
             </div>
         </li>
         {{#each itemsByType.shield as |item id|}} {{!-- SPECIFIC --}}
@@ -148,9 +151,9 @@
                 <div>{{itemData.quantity}}</div>
             </div>
             {{!-- name --}}
-            <h4 class="item-name flex2">{{item.name}}</h4>
+            <h4 class="item-name flex3">{{item.name}}</h4>
             {{!-- item specifics --}}
-            <div class="flex05">{{itemData.armorValue}}</div> {{!-- SPECIFIC --}}
+            <div class="flex05 item-num-val">{{itemData.armorValue}}</div> {{!-- SPECIFIC --}}
             {{!-- description --}}
             <div class="flex4 item-description">{{{itemData.description}}}</div>
             {{!-- edit & delete buttons --}}
@@ -164,20 +167,22 @@
     </ol>
 
     {{!-- TRINKET --}}
-    <h4 class="items-list-title">{{localize "DS4.ItemTypeTrinket"}}</h4>  {{!-- SPECIFIC --}}
+    <h4 class="items-list-title">{{localize "DS4.ItemTypeTrinket"}}</h4> {{!-- SPECIFIC --}}
     <ol class="items-list">
         <li class="item flexrow item-header">
             <div class="flexrow flex15">
                 <div></div> {{!-- equipped --}} {{!-- SPECIFIC --}}
                 <div class="item-image"></div>
-                <div>#</div> {{!-- amount --}}
+                <div class="item-num-val">#</div> {{!-- amount --}}
             </div>
-            <div class="item-name flex2">{{localize "DS4.ItemName"}}</div>
+            <div class="item-name flex3">{{localize "DS4.ItemName"}}</div>
+            <div class="flex2">{{localize "DS4.StorageLocation"}}</div>  {{!-- SPECIFIC --}}
             <div class="flex4">{{localize "DS4.Description"}}</div>
             {{!-- add button --}}
             <div class="item-controls"> {{!-- SPECIFIC --}}
-                <a class="item-control item-create" title="Create item" data-type="trinket"><i class="fas fa-plus"></i>
-                    {{localize "DS4.ActionAddItem"}}</a> {{!-- SPECIFIC --}}
+                <a class="item-control item-create" title="Create item" data-type="trinket"{{!-- SPECIFIC --}}>
+                    <i class="fas fa-plus"></i>
+                    {{localize "DS4.ActionAddItem"}}</a>
             </div>
         </li>
         {{#each itemsByType.trinket as |item id|}} {{!-- SPECIFIC --}}