diff --git a/src/module/ds4.ts b/src/module/ds4.ts index ba0d3017..18e066a5 100644 --- a/src/module/ds4.ts +++ b/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); } diff --git a/src/scss/components/_description.scss b/src/scss/components/_description.scss index 5f507f7f..71028e1b 100644 --- a/src/scss/components/_description.scss +++ b/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; - flex-direction: row; + display: grid; + 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; + } } } diff --git a/src/scss/global/_flex.scss b/src/scss/global/_flex.scss index ca8ae406..271c64b3 100644 --- a/src/scss/global/_flex.scss +++ b/src/scss/global/_flex.scss @@ -32,6 +32,10 @@ } } +.flexnowrap { + flex-wrap: nowrap; +} + .flexcol { display: flex; flex-direction: column; diff --git a/src/templates/actor/actor-sheet.hbs b/src/templates/actor/actor-sheet.hbs index 99de9e32..4f0c21f5 100644 --- a/src/templates/actor/actor-sheet.hbs +++ b/src/templates/actor/actor-sheet.hbs @@ -246,6 +246,6 @@ {{!-- Items Tab --}} - {{> systems/ds4/templates/actor/partials/items.hbs}} + {{> systems/ds4/templates/actor/partials/items-overview.hbs}} \ No newline at end of file diff --git a/src/templates/actor/partials/items-overview.hbs b/src/templates/actor/partials/items-overview.hbs new file mode 100644 index 00000000..f0840f59 --- /dev/null +++ b/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"}} +
+ + + {{localize 'DS4.UserInteractionAddItem'}} +
+{{/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"}} +
+ + +
+{{/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" }} +
  • + {{!-- equipped --}} + {{#if (ne dataType 'equipment')}} +
    E
    + {{/if}} + {{!-- image --}} +
    + {{!-- amount --}} +
    #
    + {{!-- name --}} +
    {{localize 'DS4.ItemName'}}
    + {{!-- item type specifics --}} + {{> @partial-block }} + {{!-- description --}} +
    {{localize 'DS4.Description'}}
    + {{!-- add button --}} + {{> addItemButton dataType=dataType }} +
    • +{{/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"}} +
  • + {{!-- equipped --}} + {{#if (ne item.data.data.equipped undefined)}} + {{#if item.data.data.equipped}} + {{else}} + {{/if}} + {{/if}} +
    + {{!-- image --}} +
    + +
    + {{!-- amount --}} +
    {{item.data.data.quantity}}
    +
    + {{!-- name --}} +

    {{item.name}}

    + {{!-- item type specifics --}} + {{> @partial-block}} + {{!-- description --}} +
    {{{item.data.data.description}}}
    + {{!-- control buttons --}} + {{> itemControlButtons}} +
    • +{{/inline}} + + +{{!-- ======================================================================== --}} + + +
    + + {{!-- WEAPONS --}} +

    {{localize 'DS4.ItemTypeWeapon'}}

    +
      + {{#> itemListHeader dataType='weapon'}} +
      {{localize 'DS4.AttackTypeAbbr'}}
      +
      + {{localize 'DS4.WeaponBonusAbbr'}} +
      +
      + {{localize 'DS4.OpponentDefenseAbbr'}} +
      + {{/itemListHeader}} + {{#each itemsByType.weapon as |item id|}} + {{#> itemListEntry item=item}} +
      + +
      +
      {{ item.data.data.weaponBonus}}
      +
      {{ item.data.data.opponentDefense}}
      + {{/itemListEntry}} + {{/each}} +
    + + {{!-- ARMOR --}} +

    {{localize 'DS4.ItemTypeArmor'}}

    +
      + {{#> itemListHeader dataType='armor'}} +
      {{localize 'DS4.ArmorMaterialTypeAbbr'}}
      +
      {{localize 'DS4.ArmorTypeAbbr'}}
      +
      + {{localize 'DS4.ArmorValueAbbr'}} +
      + {{/itemListHeader}} + {{#each itemsByType.armor as |item id|}} + {{#> itemListEntry item=item }} +
      + {{lookup ../../config.armorMaterialTypesAbbr item.data.data.armorMaterialType}} +
      +
      + {{lookup ../../config.armorTypesAbbr item.data.data.armorType}} +
      +
      {{ item.data.data.armorValue}}
      + {{/itemListEntry}} + {{/each}} +
    + + + {{!-- SHIELD --}} +

    {{localize 'DS4.ItemTypeShield'}}

    {{!-- SPECIFIC --}} +
      + {{#> itemListHeader dataType='shield' }} +
      + {{localize 'DS4.ArmorValueAbbr'}} +
      + {{/itemListHeader}} + {{#each itemsByType.shield as |item id|}} + {{#> itemListEntry item=item }} +
      {{item.data.data.armorValue}}
      {{!-- SPECIFIC --}} + {{/itemListEntry}} + {{/each}} +
    + + {{!-- TRINKET --}} +

    {{localize 'DS4.ItemTypeTrinket'}}

    +
      + {{#> itemListHeader dataType='trinket'}} +
      {{localize 'DS4.StorageLocation'}}
      + {{/itemListHeader}} + {{#each itemsByType.trinket as |item id|}} + {{#> itemListEntry item=item }} +
      {{{item.data.data.storageLocation}}}
      + {{/itemListEntry}} + {{/each}} +
    + + {{!-- EQUIPMENT --}} +

    {{localize 'DS4.ItemTypeEquipment'}}

    +
      + {{#> itemListHeader dataType='equipment'}} +
      {{localize 'DS4.StorageLocation'}}
      + {{/itemListHeader}} + {{#each itemsByType.equipment as |item id|}} + {{#> itemListEntry item=item }} +
      {{{item.data.data.storageLocation}}}
      + {{/itemListEntry}} + {{/each}} +
    +
    \ No newline at end of file diff --git a/src/templates/actor/partials/items.hbs b/src/templates/actor/partials/items.hbs deleted file mode 100644 index 28f8be43..00000000 --- a/src/templates/actor/partials/items.hbs +++ /dev/null @@ -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 --}} -
    - - {{!-- WEAPONS --}} -

    {{localize 'DS4.ItemTypeWeapon'}}

    {{!-- SPECIFIC --}} -
      -
    1. -
      -
      E
      {{!-- equipped --}} {{!-- SPECIFIC --}} -
      -
      #
      {{!-- amount --}} -
      -
      {{localize 'DS4.ItemName'}}
      -
      {{localize 'DS4.AttackTypeAbbr'}}
      {{!-- SPECIFIC --}} -
      -
      {{localize 'DS4.WeaponBonusAbbr'}} -
      {{!-- SPECIFIC --}} -
      {{localize - 'DS4.OpponentDefenseAbbr'}}
      {{!-- SPECIFIC --}} -
      -
      {{localize 'DS4.Description'}}
      - {{!-- add button --}} -
      {{!-- SPECIFIC --}} - - - {{localize 'DS4.UserInteractionAddItem'}} -
      -
      2. - {{#each itemsByType.weapon as |item id|}} {{!-- SPECIFIC --}} - {{#with item.data.data as |itemData|}} -
    2. -
      - {{!-- equipped? --}} - {{#if itemData.equipped}} - {{else}} - {{/if}} {{!--SPECIFIC --}} - {{!-- image --}} -
      - -
      - {{!-- amount --}} -
      {{itemData.quantity}}
      -
      - {{!-- name --}} -

      {{item.name}}

      - {{!-- item specifics --}} -
      - -
      {{!-- SPECIFIC --}} -
      -
      {{itemData.weaponBonus}}
      {{!-- SPECIFIC --}} -
      {{itemData.opponentDefense}}
      {{!-- SPECIFIC --}} -
      - {{!-- description --}} -
      {{{itemData.description}}}
      - {{!-- edit & delete buttons --}} -
      - - -
      -
      3. - {{/with}} - {{/each}} -
    - - {{!-- ARMOR --}} -

    {{localize 'DS4.ItemTypeArmor'}}

    {{!-- SPECIFIC --}} -
      -
    1. -
      -
      E
      {{!-- equipped --}} {{!-- SPECIFIC --}} -
      -
      #
      {{!-- amount --}} -
      -
      {{localize 'DS4.ItemName'}}
      -
      {{localize 'DS4.ArmorMaterialTypeAbbr'}}
      {{!-- - SPECIFIC --}} -
      {{localize 'DS4.ArmorTypeAbbr'}}
      {{!-- SPECIFIC --}} -
      - {{localize 'DS4.ArmorValueAbbr'}} -
      {{!-- SPECIFIC --}} -
      {{localize 'DS4.Description'}}
      - {{!-- add button --}} -
      {{!-- SPECIFIC --}} - - - {{localize 'DS4.UserInteractionAddItem'}} -
      -
      2. - {{#each itemsByType.armor as |item id|}} {{!-- SPECIFIC --}} - {{#with item.data.data as |itemData|}} -
    2. -
      - {{!-- equipped? --}} - {{#if itemData.equipped}} - {{else}} - {{/if}} {{!--SPECIFIC --}} - {{!-- image --}} -
      - -
      - {{!-- amount --}} -
      {{itemData.quantity}}
      -
      - {{!-- name --}} -

      {{item.name}}

      - {{!-- item specifics --}} -
      - {{lookup ../../config.armorMaterialTypesAbbr itemData.armorMaterialType}} -
      {{!-- SPECIFIC --}} -
      - {{lookup ../../config.armorTypesAbbr itemData.armorType}} -
      {{!-- SPECIFIC --}} -
      {{itemData.armorValue}}
      {{!-- SPECIFIC --}} - {{!-- description --}} -
      {{{itemData.description}}}
      - {{!-- edit & delete buttons --}} -
      - - -
      -
      3. - {{/with}} - {{/each}} -
    - - - {{!-- SHIELD --}} -

    {{localize 'DS4.ItemTypeShield'}}

    {{!-- SPECIFIC --}} -
      -
    1. -
      -
      E
      {{!-- equipped --}} {{!-- SPECIFIC --}} -
      -
      #
      {{!-- amount --}} -
      -
      {{localize 'DS4.ItemName'}}
      -
      {{localize 'DS4.ArmorValueAbbr'}} -
      {{!-- SPECIFIC --}} -
      {{localize 'DS4.Description'}}
      - {{!-- add button --}} -
      {{!-- SPECIFIC --}} - - - {{localize 'DS4.UserInteractionAddItem'}} -
      -
      2. - {{#each itemsByType.shield as |item id|}} {{!-- SPECIFIC --}} - {{#with item.data.data as |itemData|}} -
    2. -
      - {{!-- equipped? --}} - {{#if itemData.equipped}} - {{else}} - {{/if}} {{!--SPECIFIC --}} - {{!-- image --}} -
      - -
      - {{!-- amount --}} -
      {{itemData.quantity}}
      -
      - {{!-- name --}} -

      {{item.name}}

      - {{!-- item specifics --}} -
      {{itemData.armorValue}}
      {{!-- SPECIFIC --}} - {{!-- description --}} -
      {{{itemData.description}}}
      - {{!-- edit & delete buttons --}} -
      - - -
      -
      3. - {{/with}} - {{/each}} -
    - - {{!-- TRINKET --}} -

    {{localize 'DS4.ItemTypeTrinket'}}

    {{!-- SPECIFIC --}} -
      -
    1. -
      -
      E
      {{!-- equipped --}} {{!-- SPECIFIC --}} -
      -
      #
      {{!-- amount --}} -
      -
      {{localize 'DS4.ItemName'}}
      -
      {{localize 'DS4.StorageLocation'}}
      {{!-- SPECIFIC --}} -
      {{localize 'DS4.Description'}}
      - {{!-- add button --}} -
      {{!-- SPECIFIC --}} - - - {{localize 'DS4.UserInteractionAddItem'}} -
      -
      2. - {{#each itemsByType.trinket as |item id|}} {{!-- SPECIFIC --}} - {{#with item.data.data as |itemData|}} -
    2. -
      - {{!-- equipped? --}} - {{#if itemData.equipped}} - {{else}} - {{/if}} {{!--SPECIFIC --}} - {{!-- image --}} -
      - -
      - {{!-- amount --}} -
      {{itemData.quantity}}
      -
      - {{!-- name --}} -

      {{item.name}}

      - {{!-- storage location --}} -
      {{{itemData.storageLocation}}}
      {{!-- SPECIFIC --}} - {{!-- description --}} -
      {{{itemData.description}}}
      - {{!-- edit & delete buttons --}} -
      - - -
      -
      3. - {{/with}} - {{/each}} -
    - - {{!-- EQUIPMENT --}} -

    {{localize 'DS4.ItemTypeEquipment'}}

    {{!-- SPECIFIC --}} -
      -
    1. -
      -
      -
      #
      {{!-- amount --}} -
      -
      {{localize 'DS4.ItemName'}}
      -
      {{localize 'DS4.StorageLocation'}}
      {{!-- SPECIFIC --}} -
      {{localize 'DS4.Description'}}
      - {{!-- add button --}} -
      {{!-- SPECIFIC --}} - - - {{localize 'DS4.UserInteractionAddItem'}} -
      -
      2. - {{#each itemsByType.equipment as |item id|}} {{!-- SPECIFIC --}} - {{#with item.data.data as |itemData|}} -
    2. -
      - {{!-- image --}} -
      - -
      - {{!-- amount --}} -
      {{itemData.quantity}}
      -
      - {{!-- name --}} -

      {{item.name}}

      - {{!-- storage location --}} -
      {{{itemData.storageLocation}}}
      {{!-- SPECIFIC --}} - {{!-- description --}} -
      {{{itemData.description}}}
      - {{!-- edit & delete buttons --}} -
      - - -
      -
      3. - {{/with}} - {{/each}} -
    -
    \ No newline at end of file diff --git a/src/templates/item/partials/description.hbs b/src/templates/item/partials/description.hbs index fdfe6754..96b24106 100644 --- a/src/templates/item/partials/description.hbs +++ b/src/templates/item/partials/description.hbs @@ -1,16 +1,16 @@
    {{#if isOwned}} -
    - - {{actor.name}} -
    {{#if (ne data.equipped undefined)}}
    {{/if}} +
    + + {{actor.name}} +