dungeonslayers/ds4
dungeonslayers/ds4
3
0
Fork 0
Code Issues 9 Pull requests 7 Projects Releases 10 Packages 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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/ds4.scss
View file

@ -21,4 +21,5 @@
@include meta.load-css("scss/components/tabs");
@include meta.load-css("scss/components/talent_rank_equation");
@include meta.load-css("scss/components/currency");
@include meta.load-css("scss/components/rollable_image");
}

3
src/lang/de.json
View file

@ -5,6 +5,9 @@
"DS4.UserInteractionAddEffect": "Neuer Effekt",
"DS4.UserInteractionEditEffect": "Effekt bearbeiten",
"DS4.UserInteractionDeleteEffect": "Effekt löschen",
"DS4.EntityImageAltText": "Bild von {name}",
"DS4.RollableImageRollableTitle": "Für {name} würfeln",
"DS4.DiceOverlayImageAltText": "Bild eines W20",
"DS4.NotOwned": "Nicht besessen",
"DS4.HeadingBiography": "Biografie",
"DS4.HeadingDetails": "Details",

3
src/lang/en.json
View file

@ -5,6 +5,9 @@
"DS4.UserInteractionAddEffect": "Add Effect",
"DS4.UserInteractionEditEffect": "Edit Effect",
"DS4.UserInteractionDeleteEffect": "Delete Effect",
"DS4.EntityImageAltText": "Image of {name}",
"DS4.RollableImageRollableTitle": "Roll for {name}",
"DS4.DiceOverlayImageAltText": "Image of a d20",
"DS4.NotOwned": "No owner",
"DS4.HeadingBiography": "Biography",
"DS4.HeadingDetails": "Details",

1
src/module/handlebars/handlebars-partials.ts
View file

@ -21,6 +21,7 @@ export default async function registerHandlebarsPartials(): Promise<void> {
"systems/ds4/templates/actor/partials/item-list-header.hbs",
"systems/ds4/templates/actor/partials/item-list-entry.hbs",
"systems/ds4/templates/actor/partials/currency.hbs",
"systems/ds4/templates/common/partials/rollable-image.hbs",
];
await loadTemplates(templatePaths);
}

34
src/scss/components/_item_list.scss
View file

@ -15,31 +15,31 @@
padding: 0;
&--weapon {
grid-template-columns: $row-height $row-height 3ch 3fr $row-height 1fr 3ch 5fr 4ch;
grid-template-columns: $row-height $row-height 3ch 3fr $row-height 1fr 3ch 5fr 5ch;
}
&--armor {
grid-template-columns: $row-height $row-height 3ch 3fr 1fr 1fr 3ch 5fr 4ch;
grid-template-columns: $row-height $row-height 3ch 3fr 1fr 1fr 3ch 5fr 5ch;
}
&--shield {
grid-template-columns: $row-height $row-height 3ch 1fr 3ch 3fr 4ch;
grid-template-columns: $row-height $row-height 3ch 1fr 3ch 3fr 5ch;
}
&--equipment {
grid-template-columns: $row-height $row-height 3ch 1fr 10ch 3fr 4ch;
grid-template-columns: $row-height $row-height 3ch 1fr 10ch 3fr 5ch;
}
&--loot {
grid-template-columns: $row-height 3ch 1fr 10ch 3fr 4ch;
grid-template-columns: $row-height 3ch 1fr 10ch 3fr 5ch;
}
&--spell {
grid-template-columns: $row-height $row-height 2fr $row-height 1fr 1fr 1fr 1fr 4ch;
grid-template-columns: $row-height $row-height 2fr $row-height 1fr 1fr 1fr 1fr 5ch;
}
&--talent {
grid-template-columns: $row-height 1fr 1fr 3fr 4ch;
grid-template-columns: $row-height 1fr 1fr 3fr 5ch;
}
&--racial-ability,
&--language,
&--alphabet,
&--special-creature-ability {
grid-template-columns: $row-height 1fr 3fr 4ch;
grid-template-columns: $row-height 1fr 3fr 5ch;
}
&__row {
@ -53,18 +53,12 @@
height: $row-height;
line-height: $row-height;
white-space: nowrap;
overflow-y: hidden;
}
}
&__image {
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
&--rollable:hover {
background-image: url("../../../icons/svg/d20-black.svg") !important;
cursor: pointer;
}
border: none;
}
&__editable {
@ -94,6 +88,14 @@
text-overflow: ellipsis;
}
}
&__control-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
text-align: center;
width: 100%;
padding: 0 calc(1em / 3);
}
}
.ds4-item-list-title {

37
src/scss/components/_rollable_image.scss Normal file
View file

@ -0,0 +1,37 @@
@use "../utils/colors";
.ds4-rollable-image {
position: relative;
&--rollable {
cursor: pointer;
&:hover {
.ds4-rollable-image__image {
opacity: 0.25;
}
.ds4-rollable-image__overlay {
opacity: 1;
}
}
}
&__image {
border: none;
transition: 0.1s ease;
}
&__overlay {
border: none;
bottom: 0;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition: 0.1s ease;
width: 100%;
}
}

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>