From 276a70a70ad88ef5a16f1b4d7d7413d38c009c4e Mon Sep 17 00:00:00 2001
From: Johannes Loher <johannes.loher@fg4f.de>
Date: Thu, 25 Feb 2021 22:38:35 +0100
Subject: [PATCH] Use grid for special creature abilities
---
src/scss/components/_item_list.scss | 3 +-
.../special-creature-abilities-overview.hbs | 33 ++++++++-----------
2 files changed, 16 insertions(+), 20 deletions(-)
diff --git a/src/scss/components/_item_list.scss b/src/scss/components/_item_list.scss
index 3ee39861..d652db4d 100644
--- a/src/scss/components/_item_list.scss
+++ b/src/scss/components/_item_list.scss
@@ -40,7 +40,8 @@
}
&--racial-ability,
&--language,
- &--alphabet {
+ &--alphabet,
+ &--special-creature-ability {
grid-template-columns: $row-height 1fr 3fr 4ch;
}
diff --git a/src/templates/actor/partials/special-creature-abilities-overview.hbs b/src/templates/actor/partials/special-creature-abilities-overview.hbs
index 8b9f5195..de109620 100644
--- a/src/templates/actor/partials/special-creature-abilities-overview.hbs
+++ b/src/templates/actor/partials/special-creature-abilities-overview.hbs
@@ -12,18 +12,16 @@
!--
!-- @param item: hand over the item to the partial as hash parameter
--}}
-{{#*inline "baseItemListEntry"}}
-<li class="item flexrow" data-item-id="{{item._id}}">
+{{#*inline "itemListEntry"}}
+<li class="ds4-item-list__row item " data-item-id="{{item._id}}">
{{!-- image --}}
- <div class="flex05 item-image">
- <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
- </div>
+ <div class="ds4-item-list__image" style="background-image: url('{{item.img}}')" title="{{item.name}}"></div>
{{!-- name --}}
- <input class="flex1 item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
- data-property="name" title="{{htmlToPlainText item.data.data.description}}">
+ <input class="ds4-item-list__editable item-change" type="text" value="{{item.name}}" data-dtype="String"
+ data-property="name" title="{{htmlToPlainText item.data.description}}" />
{{!-- description --}}
- <div class="flex3 item-description" title="{{htmlToPlainText item.data.data.description}}">
- {{{item.data.data.description}}}</div>
+ <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>
@@ -31,16 +29,13 @@
{{!--
!-- Render a list header for a base item list entries 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">
+{{#*inline "itemListHeader"}}
+<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>
{{!-- control buttons placeholder --}}
@@ -53,10 +48,10 @@
<div class="tab special-creature-abilities" data-group="primary" data-tab="special-creature-abilities">
- <ol class="items-list">
- {{> baseItemListHeader dataType='specialCreatureAbility' }}
+ <ol class="ds4-item-list ds4-item-list--special-creature-ability item-list">
+ {{> itemListHeader }}
{{#each itemsByType.specialCreatureAbility as |item id|}}
- {{> baseItemListEntry item=item}}
+ {{> itemListEntry item=item}}
{{/each}}
</ol>
{{> systems/ds4/templates/actor/partials/overview-add-button.hbs dataType='specialCreatureAbility' }}