Merge branch '018_item_list_refactoring' into 'master'

018 item list refactoring

See merge request dungeonslayers/ds4!17

src/module/ds4.ts

@@ -36,7 +36,7 @@ async function registerHandlebarsPartials() {
         "systems/ds4/templates/item/partials/details.hbs",
         "systems/ds4/templates/item/partials/effects.hbs",
         "systems/ds4/templates/item/partials/body.hbs",
-        "systems/ds4/templates/actor/partials/items.hbs",
+        "systems/ds4/templates/actor/partials/items-overview.hbs",
     ];
     return loadTemplates(templatePaths);
 }

src/scss/components/_description.scss

@@ -1,16 +1,18 @@
 .side-properties {
-    flex: 0 0 50%;
+    flex: 0;
+    min-width: fit-content;
+    max-width: 50%;
     margin: 5px 5px 5px 0;
     padding-right: 5px;
     border-right: 2px groove $c-border-groove;
 
     .side-property {
         margin: 2px 0;
-        display: flex;
+        display: grid;
-        flex-direction: row;
+        grid-template-columns: 40% auto;
+        justify-content: left;
 
         label {
-            flex: 1;
             line-height: 26px;
             font-weight: bold;
         }
@@ -18,9 +20,14 @@
         input,
         select {
             text-align: left;
-            flex: 1.5 1.5 0px;
             width: calc(100% - 2px);
         }
+
+        input[type="checkbox"] {
+            width: auto;
+            height: 100%;
+            margin: 0px;
+        }
     }
 }
 

src/scss/global/_flex.scss

@@ -32,6 +32,10 @@
     }
 }
 
+.flexnowrap {
+    flex-wrap: nowrap;
+}
+
 .flexcol {
     display: flex;
     flex-direction: column;

src/templates/actor/actor-sheet.hbs

@@ -246,6 +246,6 @@
         </div>
 
         {{!-- Items Tab --}}
-        {{> systems/ds4/templates/actor/partials/items.hbs}}
+        {{> systems/ds4/templates/actor/partials/items-overview.hbs}}
     </section>
 </form>

src/templates/actor/partials/items-overview.hbs

@@ -0,0 +1,196 @@
+{{!-- TODO: For items list: only show header, if list is not empty --}}
+
+
+{{!-- ======================================================================== --}}
+{{!-- INLINE PARTIAL DEFINITIONS --}}
+{{!-- ======================================================================== --}}
+
+{{!--
+!-- Render an "add" button for a given data type.
+!--
+!-- @param datType: hand over the dataType to the partial as hash parameter
+--}}
+{{#*inline "addItemButton"}}
+    <div class="item-controls">
+        <a class="item-control item-create" title="Create item" data-type="{{dataType}}" {{!-- SPECIFIC --}}>
+            <i class="fas fa-plus"></i>
+            {{localize 'DS4.UserInteractionAddItem'}}</a>
+    </div>
+{{/inline}}
+{{!--
+!-- Render a group of an "edit" and a "delete" button for the current item.
+!-- The current item is defined by the data-item-id HTML property of the parent li element.
+--}}
+{{#*inline "itemControlButtons"}}
+    <div class="item-controls">
+        <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
+        <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
+    </div>
+{{/inline}}
+
+
+{{!--
+!-- Render a header row for a given data type.
+!-- It is a flexbox with a child for each column head.
+!-- An "equipped" heading is rendered except for the case dataType==='equipment'.
+!-- The partial assumes a variable dataType to be given in the context.
+!-- If the partial is called with a partial block, the partial block
+!-- content is inserted before the description heading.
+
+!-- @param datType: hand over the dataType to the partial as hash parameter
+!-- @param partial-block: hand over custom children of the flexbox in the partial block.
+--}}
+{{#*inline "itemListHeader" }}
+    <li class="item flexrow item-header">
+        {{!-- equipped --}}
+        {{#if (ne dataType 'equipment')}}
+            <div title="{{localize 'DS4.ItemEquipped'}}" class="flex05">E</div>
+        {{/if}}
+        {{!-- image --}}
+        <div class="item-image" class="flex05"></div>
+        {{!-- amount --}}
+        <div class="item-num-val" title="{{localize 'DS4.Quantity'}}" class="flex05">#</div>
+        {{!-- name --}}
+        <div class="item-name flex3">{{localize 'DS4.ItemName'}}</div>
+        {{!-- item type specifics --}}
+        {{> @partial-block }}
+        {{!-- description --}}
+        <div class="flex4">{{localize 'DS4.Description'}}</div>
+        {{!-- add button --}}
+        {{> addItemButton dataType=dataType }}
+    </li>
+{{/inline}}
+
+{{!--
+!-- Render a list row from a given item.
+!-- It is a flexbox with a child for each item value of interest.
+!-- An equipped checkbox is rendered if item.data.data.equipped is defined.
+!-- The partial assumes a variable item to be given in the context.
+!-- If the partial is called with a partial block, the partial block 
+!-- content is inserted before the description.
+
+!-- @param item: hand over the item to the partial as hash parameter
+!-- @param partial-block: hand over custom children of the flexbox in the partial block.
+--}}
+{{#*inline "itemListEntry"}}
+    <li class="item flexrow" data-item-id="{{item._id}}">
+        {{!-- equipped --}}
+        {{#if (ne item.data.data.equipped undefined)}}
+            {{#if item.data.data.equipped}}<i class="fas fa-check-square flex05"></i>
+            {{else}}<i class="far fa-square flex05"></i>
+            {{/if}}
+        {{/if}}
+        <div class="flexrow flexnowrap flex15">
+            {{!-- image --}}
+            <div class="item-image">
+                <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
+            </div>
+            {{!-- amount --}}
+            <div class="item-num-val">{{item.data.data.quantity}}</div>
+        </div>
+        {{!-- name --}}
+        <h4 class="item-name flex3">{{item.name}}</h4>
+        {{!-- item type specifics --}}
+        {{> @partial-block}}
+        {{!-- description --}}
+        <div class="flex4 item-description">{{{item.data.data.description}}}</div>
+        {{!-- control buttons --}}
+        {{> itemControlButtons}}
+    </li>
+{{/inline}}
+
+
+{{!-- ======================================================================== --}}
+
+
+<div class="tab items" data-group="primary" data-tab="items">
+
+    {{!-- WEAPONS --}}
+    <h4 class="items-list-title">{{localize 'DS4.ItemTypeWeapon'}}</h4>
+    <ol class="items-list">
+        {{#> itemListHeader dataType='weapon'}}
+            <div title="{{localize 'DS4.AttackType'}}" class="flex05">{{localize 'DS4.AttackTypeAbbr'}}</div>
+            <div class="item-num-val flex05" title="{{localize 'DS4.WeaponBonus'}}">
+                {{localize 'DS4.WeaponBonusAbbr'}}
+            </div>
+            <div class="item-num-val flex05" title="{{localize 'DS4.OpponentDefense'}}">
+                {{localize 'DS4.OpponentDefenseAbbr'}}
+            </div>
+        {{/itemListHeader}}
+        {{#each itemsByType.weapon as |item id|}}
+            {{#> itemListEntry item=item}}
+                <div class="flex05">
+                    <img src="{{lookup ../../config.attackTypesIcons  item.data.data.attackType}}"
+                        title="{{lookup ../../config.attackTypes  item.data.data.attackType}}" width="24" height="24" />
+                </div>
+                <div class="item-num-val flex05">{{ item.data.data.weaponBonus}}</div>
+                <div class="item-num-val flex05">{{ item.data.data.opponentDefense}}</div>
+            {{/itemListEntry}}
+        {{/each}}
+    </ol>
+
+    {{!-- ARMOR --}}
+    <h4 class="items-list-title">{{localize 'DS4.ItemTypeArmor'}}</h4>
+    <ol class="items-list">
+        {{#> itemListHeader dataType='armor'}}
+            <div title="{{localize 'DS4.ArmorMaterialType'}}">{{localize 'DS4.ArmorMaterialTypeAbbr'}}</div>
+            <div title="{{localize 'DS4.ArmorType'}}">{{localize 'DS4.ArmorTypeAbbr'}}</div>
+            <div class="flex05 item-num-val" title="{{localize 'DS4.ArmorValue'}}">
+                {{localize 'DS4.ArmorValueAbbr'}}
+            </div>
+        {{/itemListHeader}}
+        {{#each itemsByType.armor as |item id|}}
+            {{#> itemListEntry item=item }}
+                <div title="{{lookup ../../config.armorMaterialTypes  item.data.data.armorMaterialType}}">
+                    {{lookup ../../config.armorMaterialTypesAbbr  item.data.data.armorMaterialType}}
+                </div>
+                <div title="{{lookup ../../config.armorTypes  item.data.data.armorType}}">
+                    {{lookup ../../config.armorTypesAbbr  item.data.data.armorType}}
+                </div>
+                <div class="flex05 item-num-val">{{ item.data.data.armorValue}}</div>
+            {{/itemListEntry}}
+        {{/each}}
+    </ol>
+
+
+    {{!-- SHIELD --}}
+    <h4 class="items-list-title">{{localize 'DS4.ItemTypeShield'}}</h4> {{!-- SPECIFIC --}}
+    <ol class="items-list">
+        {{#> itemListHeader dataType='shield' }}
+            <div class="flex05 item-num-val" title="{{localize 'DS4.ArmorValue'}}">
+                {{localize 'DS4.ArmorValueAbbr'}}
+            </div>
+        {{/itemListHeader}}
+        {{#each itemsByType.shield as |item id|}}
+            {{#> itemListEntry item=item }}
+                <div class="flex05 item-num-val">{{item.data.data.armorValue}}</div> {{!-- SPECIFIC --}}
+            {{/itemListEntry}}
+        {{/each}}
+    </ol>
+
+    {{!-- TRINKET --}}
+    <h4 class="items-list-title">{{localize 'DS4.ItemTypeTrinket'}}</h4>
+    <ol class="items-list">
+        {{#> itemListHeader dataType='trinket'}}
+            <div class="flex2">{{localize 'DS4.StorageLocation'}}</div>
+        {{/itemListHeader}}
+        {{#each itemsByType.trinket as |item id|}}
+            {{#> itemListEntry item=item }}
+                <div class="flex2">{{{item.data.data.storageLocation}}}</div>
+            {{/itemListEntry}}
+        {{/each}}
+    </ol>
+
+    {{!-- EQUIPMENT --}}
+    <h4 class="items-list-title">{{localize 'DS4.ItemTypeEquipment'}}</h4>
+    <ol class="items-list">
+        {{#> itemListHeader dataType='equipment'}}
+            <div class="flex2">{{localize 'DS4.StorageLocation'}}</div>
+        {{/itemListHeader}}
+        {{#each itemsByType.equipment as |item id|}}
+            {{#> itemListEntry item=item }}
+                <div class="flex2">{{{item.data.data.storageLocation}}}</div>
+            {{/itemListEntry}}
+        {{/each}}
+    </ol>
+</div>

src/templates/actor/partials/items.hbs

@@ -1,277 +0,0 @@
-{{!-- TODO: For items list: only show header, if list is not empty --}}
-{{!-- TODO: Reduce code duplications --}}
-{{!-- TODO: Change from flex layout to grid layout --}}
-{{!-- Tab with overview and quick-actions on owned items --}}
-<div class="tab items" data-group="primary" data-tab="items">
-
-    {{!-- WEAPONS --}}
-    <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 title="{{localize 'DS4.ItemEquipped'}}">E</div> {{!-- equipped --}} {{!-- SPECIFIC --}}
-                <div class="item-image"></div>
-                <div class="item-num-val" title="{{localize 'DS4.Quantity'}}">#</div> {{!-- amount --}}
-            </div>
-            <div class="item-name flex3">{{localize 'DS4.ItemName'}}</div>
-            <div title="{{localize 'DS4.AttackType'}}">{{localize 'DS4.AttackTypeAbbr'}}</div> {{!-- SPECIFIC --}}
-            <div class="flexrow flex15">
-                <div class="item-num-val" title="{{localize 'DS4.WeaponBonus'}}">{{localize 'DS4.WeaponBonusAbbr'}}
-                </div> {{!-- SPECIFIC --}}
-                <div class="item-num-val" title="{{localize 'DS4.OpponentDefense'}}">{{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" {{!-- SPECIFIC --}}>
-                    <i class="fas fa-plus"></i>
-                    {{localize 'DS4.UserInteractionAddItem'}}</a>
-            </div>
-        </li>
-        {{#each itemsByType.weapon as |item id|}} {{!-- SPECIFIC --}}
-        {{#with item.data.data as |itemData|}}
-        <li class="item flexrow" data-item-id="{{item._id}}">
-            <div class="flexrow flex15">
-                {{!-- equipped? --}}
-                {{#if itemData.equipped}}<i class="fas fa-check-square"></i>
-                {{else}}<i class="far fa-square"></i>
-                {{/if}} {{!--SPECIFIC --}}
-                {{!-- image --}}
-                <div class="item-image">
-                    <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
-                </div>
-                {{!-- amount --}}
-                <div class="item-num-val">{{itemData.quantity}}</div>
-            </div>
-            {{!-- name --}}
-            <h4 class="item-name flex3">{{item.name}}</h4>
-            {{!-- item specifics --}}
-            <div>
-                <img src="{{lookup ../../config.attackTypesIcons itemData.attackType}}"
-                    title="{{lookup ../../config.attackTypes itemData.attackType}}" width="24" height="24" />
-            </div> {{!-- SPECIFIC --}}
-            <div class="flexrow flex15">
-                <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>
-            {{!-- edit & delete buttons --}}
-            <div class="item-controls">
-                <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
-                <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
-            </div>
-        </li>
-        {{/with}}
-        {{/each}}
-    </ol>
-
-    {{!-- ARMOR --}}
-    <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 title="{{localize 'DS4.ItemEquipped'}}">E</div> {{!-- equipped --}} {{!-- SPECIFIC --}}
-                <div class="item-image"></div>
-                <div class="item-num-val" title="{{localize 'DS4.Quantity'}}">#</div> {{!-- amount --}}
-            </div>
-            <div class="item-name flex3">{{localize 'DS4.ItemName'}}</div>
-            <div title="{{localize 'DS4.ArmorMaterialType'}}">{{localize 'DS4.ArmorMaterialTypeAbbr'}}</div> {{!--
-            SPECIFIC --}}
-            <div title="{{localize 'DS4.ArmorType'}}">{{localize 'DS4.ArmorTypeAbbr'}}</div> {{!-- SPECIFIC --}}
-            <div class="flex05 item-num-val" title="{{localize 'DS4.ArmorValue'}}">
-                {{localize 'DS4.ArmorValueAbbr'}}
-            </div> {{!-- SPECIFIC --}}
-            <div class="flex3">{{localize 'DS4.Description'}}</div>
-            {{!-- add button --}}
-            <div class="item-controls"> {{!-- SPECIFIC --}}
-                <a class="item-control item-create" title="Create item" data-type="armor" {{!-- SPECIFIC --}}>
-                    <i class="fas fa-plus"></i>
-                    {{localize 'DS4.UserInteractionAddItem'}}</a>
-            </div>
-        </li>
-        {{#each itemsByType.armor as |item id|}} {{!-- SPECIFIC --}}
-        {{#with item.data.data as |itemData|}}
-        <li class="item flexrow" data-item-id="{{item._id}}">
-            <div class="flexrow flex15">
-                {{!-- equipped? --}}
-                {{#if itemData.equipped}}<i class="fas fa-check-square"></i>
-                {{else}}<i class="far fa-square"></i>
-                {{/if}} {{!--SPECIFIC --}}
-                {{!-- image --}}
-                <div class="item-image">
-                    <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
-                </div>
-                {{!-- amount --}}
-                <div class="item-num-val">{{itemData.quantity}}</div>
-            </div>
-            {{!-- name --}}
-            <h4 class="item-name flex3">{{item.name}}</h4>
-            {{!-- item specifics --}}
-            <div title="{{lookup ../../config.armorMaterialTypes itemData.armorMaterialType}}">
-                {{lookup ../../config.armorMaterialTypesAbbr itemData.armorMaterialType}}
-            </div> {{!-- SPECIFIC --}}
-            <div title="{{lookup ../../config.armorTypes itemData.armorType}}">
-                {{lookup ../../config.armorTypesAbbr itemData.armorType}}
-            </div> {{!-- SPECIFIC --}}
-            <div class="flex05 item-num-val">{{itemData.armorValue}}</div> {{!-- SPECIFIC --}}
-            {{!-- description --}}
-            <div class="flex3 item-description">{{{itemData.description}}}</div>
-            {{!-- edit & delete buttons --}}
-            <div class="item-controls">
-                <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
-                <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
-            </div>
-        </li>
-        {{/with}}
-        {{/each}}
-    </ol>
-
-
-    {{!-- SHIELD --}}
-    <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 title="{{localize 'DS4.ItemEquipped'}}">E</div> {{!-- equipped --}} {{!-- SPECIFIC --}}
-                <div class="item-image"></div>
-                <div class="item-num-val" title="{{localize 'DS4.Quantity'}}">#</div> {{!-- amount --}}
-            </div>
-            <div class="item-name flex3">{{localize 'DS4.ItemName'}}</div>
-            <div class="flex05 item-num-val" title="{{localize 'DS4.ArmorValue'}}">{{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" {{!-- SPECIFIC --}}>
-                    <i class="fas fa-plus"></i>
-                    {{localize 'DS4.UserInteractionAddItem'}}</a>
-            </div>
-        </li>
-        {{#each itemsByType.shield as |item id|}} {{!-- SPECIFIC --}}
-        {{#with item.data.data as |itemData|}}
-        <li class="item flexrow" data-item-id="{{item._id}}">
-            <div class="flexrow flex15">
-                {{!-- equipped? --}}
-                {{#if itemData.equipped}}<i class="fas fa-check-square"></i>
-                {{else}}<i class="far fa-square"></i>
-                {{/if}} {{!--SPECIFIC --}}
-                {{!-- image --}}
-                <div class="item-image">
-                    <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
-                </div>
-                {{!-- amount --}}
-                <div class="item-num-val">{{itemData.quantity}}</div>
-            </div>
-            {{!-- name --}}
-            <h4 class="item-name flex3">{{item.name}}</h4>
-            {{!-- item specifics --}}
-            <div class="flex05 item-num-val">{{itemData.armorValue}}</div> {{!-- SPECIFIC --}}
-            {{!-- description --}}
-            <div class="flex4 item-description">{{{itemData.description}}}</div>
-            {{!-- edit & delete buttons --}}
-            <div class="item-controls">
-                <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
-                <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
-            </div>
-        </li>
-        {{/with}}
-        {{/each}}
-    </ol>
-
-    {{!-- TRINKET --}}
-    <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 title="{{localize 'DS4.ItemEquipped'}}">E</div> {{!-- equipped --}} {{!-- SPECIFIC --}}
-                <div class="item-image"></div>
-                <div class="item-num-val" title="{{localize 'DS4.Quantity'}}">#</div> {{!-- amount --}}
-            </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" {{!-- SPECIFIC --}}>
-                    <i class="fas fa-plus"></i>
-                    {{localize 'DS4.UserInteractionAddItem'}}</a>
-            </div>
-        </li>
-        {{#each itemsByType.trinket as |item id|}} {{!-- SPECIFIC --}}
-        {{#with item.data.data as |itemData|}}
-        <li class="item flexrow" data-item-id="{{item._id}}">
-            <div class="flexrow flex15">
-                {{!-- equipped? --}}
-                {{#if itemData.equipped}}<i class="fas fa-check-square"></i>
-                {{else}}<i class="far fa-square"></i>
-                {{/if}} {{!--SPECIFIC --}}
-                {{!-- image --}}
-                <div class="item-image">
-                    <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
-                </div>
-                {{!-- amount --}}
-                <div class="item-num-val">{{itemData.quantity}}</div>
-            </div>
-            {{!-- name --}}
-            <h4 class="item-name flex3">{{item.name}}</h4>
-            {{!-- storage location --}}
-            <div class="flex2">{{{itemData.storageLocation}}}</div> {{!-- SPECIFIC --}}
-            {{!-- description --}}
-            <div class="flex4 item-description">{{{itemData.description}}}</div>
-            {{!-- edit & delete buttons --}}
-            <div class="item-controls">
-                <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
-                <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
-            </div>
-        </li>
-        {{/with}}
-        {{/each}}
-    </ol>
-
-    {{!-- EQUIPMENT --}}
-    <h4 class="items-list-title">{{localize 'DS4.ItemTypeEquipment'}}</h4> {{!-- SPECIFIC --}}
-    <ol class="items-list">
-        <li class="item flexrow item-header">
-            <div class="flexrow flex15">
-                <div class="item-image"></div>
-                <div class="item-num-val" title="{{localize 'DS4.Quantity'}}">#</div> {{!-- amount --}}
-            </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="equipment" {{!-- SPECIFIC --}}>
-                    <i class="fas fa-plus"></i>
-                    {{localize 'DS4.UserInteractionAddItem'}}</a>
-            </div>
-        </li>
-        {{#each itemsByType.equipment as |item id|}} {{!-- SPECIFIC --}}
-        {{#with item.data.data as |itemData|}}
-        <li class="item flexrow" data-item-id="{{item._id}}">
-            <div class="flexrow flex15">
-                {{!-- image --}}
-                <div class="item-image">
-                    <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
-                </div>
-                {{!-- amount --}}
-                <div class="item-num-val">{{itemData.quantity}}</div>
-            </div>
-            {{!-- name --}}
-            <h4 class="item-name flex3">{{item.name}}</h4>
-            {{!-- storage location --}}
-            <div class="flex2">{{{itemData.storageLocation}}}</div> {{!-- SPECIFIC --}}
-            {{!-- description --}}
-            <div class="flex4 item-description">{{{itemData.description}}}</div>
-            {{!-- edit & delete buttons --}}
-            <div class="item-controls">
-                <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
-                <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
-            </div>
-        </li>
-        {{/with}}
-        {{/each}}
-    </ol>
-</div>

src/templates/item/partials/description.hbs

@@ -1,16 +1,16 @@
 <div class="tab flexrow" data-group="primary" data-tab="description">
     <div class="side-properties">
         {{#if isOwned}}
-        <div class="side-property">
-            <label for="data.actor">{{localize 'DS4.ItemOwner'}}</label>
-            <a class="entity-link" draggable="true" data-entity="Actor" data-id="{{actor._id}}"><i
-                    class="fas fa-user"></i>{{actor.name}}</a>
-        </div>
         {{#if (ne data.equipped undefined)}}<div class="side-property">
             <label for="data.equipped">{{localize 'DS4.ItemEquipped'}}</label>
             <input type="checkbox" name="data.equipped" data-dtype="Boolean" {{checked data.equipped}} title="{{localize 'DS4.ItemEquipped'}}">
         </div>
         {{/if}}
+        <div class="side-property">
+            <label for="data.actor">{{localize 'DS4.ItemOwner'}}</label>
+            <a class="entity-link" draggable="true" data-entity="Actor" data-id="{{actor._id}}"><i
+                    class="fas fa-user"></i>{{actor.name}}</a>
+        </div>
         <div class="side-property">
             <label for="data.quantity">{{localize 'DS4.Quantity'}}</label>
             <input type="number" data-dtype="Number" name="data.quantity" value="{{data.quantity}}" />