Athemis/ds4
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

use img tags instead of divs with background-image set

Browse source
This commit is contained in:
Johannes Loher 2021-03-04 08:51:13 +01:00
parent 74ad0c7f24
commit ea4f1d3ee7
11 changed files with 92 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/templates/actor/partials/item-list-entry.hbs
View file

@ -17,8 +17,9 @@
{{/if}}
{{!-- image --}}
<div class="ds4-item-list__image{{#if itemData.data.rollable}} ds4-item-list__image--rollable rollable-item{{/if}}"
style="background-image: url('{{itemData.img}}')" title="{{itemData.name}}"></div>
{{> systems/ds4/templates/common/partials/rollable-image.hbs rollable=itemData.data.rollable src=itemData.img
alt=(localize "DS4.EntityImageAltText" name=itemData.name) title=itemData.name rollableTitle=(localize
"DS4.RollableImageRollableTitle" name=itemData.name) rollableClass="rollable-item"}}
{{!-- amount --}}
{{#if hasQuantity}}
@ -42,5 +43,5 @@
{{/unless}}
{{!-- control buttons --}}
{{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }}
{{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs class="ds4-item-list__control-buttons" }}
</li>

6
src/templates/actor/partials/items-overview.hbs
View file

@ -20,10 +20,8 @@
{{#each itemsByType.weapon as |itemData id|}}
{{#> systems/ds4/templates/actor/partials/item-list-entry.hbs itemData=itemData isEquipable=true hasQuantity=true}}
{{!-- attack type --}}
<div class="ds4-item-list__image"
style="background-image: url('{{lookup ../../config.icons.attackTypes itemData.data.attackType}}')"
title="{{lookup ../../config.i18n.attackTypes itemData.data.attackType}}">
</div>
<img class="ds4-item-list__image" src="{{lookup ../../config.icons.attackTypes itemData.data.attackType}}"
title="{{lookup ../../config.i18n.attackTypes itemData.data.attackType}}" />
{{!-- weapon bonus --}}
<div>{{ itemData.data.weaponBonus}}</div>

6
src/templates/actor/partials/overview-control-buttons.hbs
View file

@ -1,8 +1,10 @@
{{!--
!-- 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.
!-- @param class: Additional CSS class(es) for the controls
--}}
<div class="item-controls">
<div class="item-controls {{class}}">
<a class="item-control item-edit" title="{{localize 'DS4.UserInteractionEditItem'}}"><i class="fas fa-edit"></i></a>
<a class="item-control item-delete" title="{{localize 'DS4.UserInteractionDeleteItem'}}"><i class="fas fa-trash"></i></a>
<a class="item-control item-delete" title="{{localize 'DS4.UserInteractionDeleteItem'}}"><i
class="fas fa-trash"></i></a>
</div>

6
src/templates/actor/partials/spells-overview.hbs
View file

@ -60,10 +60,8 @@ titleKey=titleKey}}
{{#> systems/ds4/templates/actor/partials/item-list-entry.hbs itemData=itemData isEquipable=true
hideDescription=true}}
{{!-- spell type --}}
<div class="ds4-item-list__image"
style="background-image: url('{{lookup ../../config.icons.spellTypes itemData.data.spellType}}')"
title="{{lookup ../../config.i18n.spellTypes itemData.data.spellType}}">
</div>
<img class="ds4-item-list__image" src="{{lookup ../../config.icons.spellTypes itemData.data.spellType}}"
title="{{lookup ../../config.i18n.spellTypes itemData.data.spellType}}" />
{{!-- spell bonus --}}
<input class="ds4-item-list__editable item-change" type="text" data-dtype="String" data-property="data.bonus"

17
src/templates/common/partials/rollable-image.hbs Normal file
View file

@ -0,0 +1,17 @@
{{!--
!-- Render an an image that has a dice overlay image.
!-- @param rollable: A flag indicating whether or not the image is actually rollable.
!-- @param rollableClass: The CSS class(es) to add if the image is rollable.
!-- @param title: The title for the rollable image if it is not actually rollable.
!-- @param rollableTitle: The title for the rollable image if it is rollable.
!-- @param src: The path to the image.
!-- @param alt: An alternate text for the image.
--}}
<div class="ds4-rollable-image{{#if rollable}} ds4-rollable-image--rollable {{rollableClass}}{{/if}}"
title="{{#if rollable}}{{rollableTitle}}{{else}}{{title}}{{/if}}">
<img class="ds4-rollable-image__image" alt="{{alt}}" src="{{src}}" />
{{#if rollable}}
<img class="ds4-rollable-image__overlay" alt="{{localize 'DS4.DiceOverlayImageAltText'}}"
src="icons/svg/d20-black.svg" />
{{/if}}
</div>