From 0e282b4c6e1750ffc1f54ad9d049f3109e2ba970 Mon Sep 17 00:00:00 2001 From: Gesina Schwalbe Date: Fri, 1 Jan 2021 21:21:22 +0100 Subject: [PATCH 1/4] some minor improvements to side-properties style - checkboxes now properly left-aligned - adaptive width of side-properties: take minimum width now - side properties are aligned now in any case (each is a grid) --- src/scss/components/_description.scss | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) 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; + } } } From f52a491f73a815340adfd657be3895453207649b Mon Sep 17 00:00:00 2001 From: Gesina Schwalbe Date: Fri, 1 Jan 2021 21:24:13 +0100 Subject: [PATCH 2/4] swapped owner and equipped in item desc --- src/templates/item/partials/description.hbs | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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}} +
From 6fe95d10db9a8257cc3e7a1f062cb79a66359b35 Mon Sep 17 00:00:00 2001 From: Gesina Schwalbe Date: Sat, 2 Jan 2021 01:01:41 +0100 Subject: [PATCH 3/4] refactored items list to use handlebars partials Additions: - added flexnowrap CSS class -> no strange wrapping of item lines Changes: - reduced most of the non-maintainable HTML-code repitition - made item list entries as flat as possible --- src/scss/global/_flex.scss | 4 + src/templates/actor/partials/items.hbs | 397 ++++++++++--------------- 2 files changed, 162 insertions(+), 239 deletions(-) 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/partials/items.hbs b/src/templates/actor/partials/items.hbs index 28f8be43..792891f4 100644 --- a/src/templates/actor/partials/items.hbs +++ b/src/templates/actor/partials/items.hbs @@ -1,130 +1,154 @@ {{!-- 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 --}} + + +{{!-- ======================================================================== --}} +{{!-- 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 "addButton"}} +
+ + + {{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 "listHeader" }} +
  • + {{!-- equipped --}} + {{#if (ne dataType 'equipment')}} +
    E
    + {{/if}} + {{!-- image --}} +
    + {{!-- amount --}} +
    #
    + {{!-- name --}} +
    {{localize 'DS4.ItemName'}}
    + {{!-- item type specifics --}} + {{> @partial-block }} + {{!-- description --}} +
    {{localize 'DS4.Description'}}
    + {{!-- add button --}} + {{> addButton 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 "listEntry"}} +
  • + {{!-- 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'}}

    {{!-- SPECIFIC --}} +

    {{localize 'DS4.ItemTypeWeapon'}}

      -
    1. -
      -
      E
      {{!-- equipped --}} {{!-- SPECIFIC --}} -
      -
      #
      {{!-- amount --}} + {{#> listHeader dataType='weapon'}} +
      {{localize 'DS4.AttackTypeAbbr'}}
      +
      + {{localize 'DS4.WeaponBonusAbbr'}}
      -
      {{localize 'DS4.ItemName'}}
      -
      {{localize 'DS4.AttackTypeAbbr'}}
      {{!-- SPECIFIC --}} -
      -
      {{localize 'DS4.WeaponBonusAbbr'}} -
      {{!-- SPECIFIC --}} -
      {{localize - 'DS4.OpponentDefenseAbbr'}}
      {{!-- SPECIFIC --}} +
      + {{localize 'DS4.OpponentDefenseAbbr'}}
      -
      {{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 --}} -
      - + {{/listHeader}} + {{#each itemsByType.weapon as |item id|}} + {{#> listEntry item=item}} +
      +
      - {{!-- amount --}} -
      {{itemData.quantity}}
      -
      - {{!-- name --}} -

      {{item.name}}

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

    {{localize 'DS4.ItemTypeArmor'}}

    {{!-- SPECIFIC --}} +

    {{localize 'DS4.ItemTypeArmor'}}

      -
    1. -
      -
      E
      {{!-- equipped --}} {{!-- SPECIFIC --}} -
      -
      #
      {{!-- amount --}} -
      -
      {{localize 'DS4.ItemName'}}
      -
      {{localize 'DS4.ArmorMaterialTypeAbbr'}}
      {{!-- - SPECIFIC --}} -
      {{localize 'DS4.ArmorTypeAbbr'}}
      {{!-- SPECIFIC --}} + {{#> listHeader dataType='armor'}} +
      {{localize 'DS4.ArmorMaterialTypeAbbr'}}
      +
      {{localize 'DS4.ArmorTypeAbbr'}}
      {{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 --}} -
      - + {{/listHeader}} + {{#each itemsByType.armor as |item id|}} + {{#> listEntry item=item }} +
      + {{lookup ../../config.armorMaterialTypesAbbr item.data.data.armorMaterialType}}
      - {{!-- 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}} +
      + {{lookup ../../config.armorTypesAbbr item.data.data.armorType}} +
      +
      {{ item.data.data.armorValue}}
      + {{/listEntry}} {{/each}}
    @@ -132,146 +156,41 @@ {{!-- SHIELD --}}

    {{localize 'DS4.ItemTypeShield'}}

    {{!-- SPECIFIC --}}
      -
    1. -
      -
      E
      {{!-- equipped --}} {{!-- SPECIFIC --}} -
      -
      #
      {{!-- amount --}} + {{#> listHeader dataType='shield' }} +
      + {{localize 'DS4.ArmorValueAbbr'}}
      -
      {{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}} + {{/listHeader}} + {{#each itemsByType.shield as |item id|}} + {{#> listEntry item=item }} +
      {{item.data.data.armorValue}}
      {{!-- SPECIFIC --}} + {{/listEntry}} {{/each}}
    {{!-- TRINKET --}} -

    {{localize 'DS4.ItemTypeTrinket'}}

    {{!-- SPECIFIC --}} +

    {{localize 'DS4.ItemTypeTrinket'}}

      -
    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}} + {{#> listHeader dataType='trinket'}} +
      {{localize 'DS4.StorageLocation'}}
      + {{/listHeader}} + {{#each itemsByType.trinket as |item id|}} + {{#> listEntry item=item }} +
      {{{item.data.data.storageLocation}}}
      + {{/listEntry}} {{/each}}
    {{!-- EQUIPMENT --}} -

    {{localize 'DS4.ItemTypeEquipment'}}

    {{!-- SPECIFIC --}} +

    {{localize 'DS4.ItemTypeEquipment'}}

      -
    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}} + {{#> listHeader dataType='equipment'}} +
      {{localize 'DS4.StorageLocation'}}
      + {{/listHeader}} + {{#each itemsByType.equipment as |item id|}} + {{#> listEntry item=item }} +
      {{{item.data.data.storageLocation}}}
      + {{/listEntry}} {{/each}}
    \ No newline at end of file From c9b41e2d3ffcd58b6e37c94c153e62ef87ed5337 Mon Sep 17 00:00:00 2001 From: Gesina Schwalbe Date: Sun, 3 Jan 2021 00:08:21 +0100 Subject: [PATCH 4/4] renamed item list templates More precise names for: - item overview list template for actor sheet - inline templates in item overview list template --- src/module/ds4.ts | 2 +- src/templates/actor/actor-sheet.hbs | 2 +- .../{items.hbs => items-overview.hbs} | 48 +++++++++---------- 3 files changed, 26 insertions(+), 26 deletions(-) rename src/templates/actor/partials/{items.hbs => items-overview.hbs} (89%) 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/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.hbs b/src/templates/actor/partials/items-overview.hbs similarity index 89% rename from src/templates/actor/partials/items.hbs rename to src/templates/actor/partials/items-overview.hbs index 792891f4..f0840f59 100644 --- a/src/templates/actor/partials/items.hbs +++ b/src/templates/actor/partials/items-overview.hbs @@ -10,7 +10,7 @@ !-- !-- @param datType: hand over the dataType to the partial as hash parameter --}} -{{#*inline "addButton"}} +{{#*inline "addItemButton"}}
    @@ -40,7 +40,7 @@ !-- @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 "listHeader" }} +{{#*inline "itemListHeader" }}
  • {{!-- equipped --}} {{#if (ne dataType 'equipment')}} @@ -57,7 +57,7 @@ {{!-- description --}}
    {{localize 'DS4.Description'}}
    {{!-- add button --}} - {{> addButton dataType=dataType }} + {{> addItemButton dataType=dataType }}
    • {{/inline}} @@ -72,7 +72,7 @@ !-- @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 "listEntry"}} +{{#*inline "itemListEntry"}}
  • {{!-- equipped --}} {{#if (ne item.data.data.equipped undefined)}} @@ -108,7 +108,7 @@ {{!-- WEAPONS --}}

    {{localize 'DS4.ItemTypeWeapon'}}

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

    {{localize 'DS4.ItemTypeArmor'}}

      - {{#> listHeader dataType='armor'}} + {{#> itemListHeader dataType='armor'}}
      {{localize 'DS4.ArmorMaterialTypeAbbr'}}
      {{localize 'DS4.ArmorTypeAbbr'}}
      {{localize 'DS4.ArmorValueAbbr'}}
      - {{/listHeader}} + {{/itemListHeader}} {{#each itemsByType.armor as |item id|}} - {{#> listEntry item=item }} + {{#> itemListEntry item=item }}
      {{lookup ../../config.armorMaterialTypesAbbr item.data.data.armorMaterialType}}
      @@ -148,7 +148,7 @@ {{lookup ../../config.armorTypesAbbr item.data.data.armorType}}
    • {{ item.data.data.armorValue}}
    - {{/listEntry}} + {{/itemListEntry}} {{/each}} @@ -156,41 +156,41 @@ {{!-- SHIELD --}}

    {{localize 'DS4.ItemTypeShield'}}

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

    {{localize 'DS4.ItemTypeTrinket'}}

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

    {{localize 'DS4.ItemTypeEquipment'}}

      - {{#> listHeader dataType='equipment'}} + {{#> itemListHeader dataType='equipment'}}
      {{localize 'DS4.StorageLocation'}}
      - {{/listHeader}} + {{/itemListHeader}} {{#each itemsByType.equipment as |item id|}} - {{#> listEntry item=item }} + {{#> itemListEntry item=item }}
      {{{item.data.data.storageLocation}}}
      - {{/listEntry}} + {{/itemListEntry}} {{/each}}
    \ No newline at end of file