From ea4f1d3ee7ca9023517a98762f844775979a4a71 Mon Sep 17 00:00:00 2001 From: Johannes Loher Date: Thu, 4 Mar 2021 08:51:13 +0100 Subject: [PATCH] use img tags instead of divs with background-image set --- src/ds4.scss | 1 + src/lang/de.json | 3 ++ src/lang/en.json | 3 ++ src/module/handlebars/handlebars-partials.ts | 1 + src/scss/components/_item_list.scss | 34 +++++++++-------- src/scss/components/_rollable_image.scss | 37 +++++++++++++++++++ .../actor/partials/item-list-entry.hbs | 7 ++-- .../actor/partials/items-overview.hbs | 6 +-- .../partials/overview-control-buttons.hbs | 6 ++- .../actor/partials/spells-overview.hbs | 6 +-- .../common/partials/rollable-image.hbs | 17 +++++++++ 11 files changed, 92 insertions(+), 29 deletions(-) create mode 100644 src/scss/components/_rollable_image.scss create mode 100644 src/templates/common/partials/rollable-image.hbs diff --git a/src/ds4.scss b/src/ds4.scss index 212a180f..9ee0c00f 100644 --- a/src/ds4.scss +++ b/src/ds4.scss @@ -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"); } diff --git a/src/lang/de.json b/src/lang/de.json index e9b88887..d7914d30 100644 --- a/src/lang/de.json +++ b/src/lang/de.json @@ -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", diff --git a/src/lang/en.json b/src/lang/en.json index ec17658e..3f556f42 100644 --- a/src/lang/en.json +++ b/src/lang/en.json @@ -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", diff --git a/src/module/handlebars/handlebars-partials.ts b/src/module/handlebars/handlebars-partials.ts index 98248c33..81945ebc 100644 --- a/src/module/handlebars/handlebars-partials.ts +++ b/src/module/handlebars/handlebars-partials.ts @@ -21,6 +21,7 @@ export default async function registerHandlebarsPartials(): Promise { "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); } diff --git a/src/scss/components/_item_list.scss b/src/scss/components/_item_list.scss index 280a468d..eb4c745f 100644 --- a/src/scss/components/_item_list.scss +++ b/src/scss/components/_item_list.scss @@ -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 { diff --git a/src/scss/components/_rollable_image.scss b/src/scss/components/_rollable_image.scss new file mode 100644 index 00000000..ae814f8a --- /dev/null +++ b/src/scss/components/_rollable_image.scss @@ -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%; + } +} diff --git a/src/templates/actor/partials/item-list-entry.hbs b/src/templates/actor/partials/item-list-entry.hbs index 46caecf5..ca08d0fc 100644 --- a/src/templates/actor/partials/item-list-entry.hbs +++ b/src/templates/actor/partials/item-list-entry.hbs @@ -17,8 +17,9 @@ {{/if}} {{!-- image --}} -
+ {{> 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" }} diff --git a/src/templates/actor/partials/items-overview.hbs b/src/templates/actor/partials/items-overview.hbs index c3544805..094109b1 100644 --- a/src/templates/actor/partials/items-overview.hbs +++ b/src/templates/actor/partials/items-overview.hbs @@ -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 --}} -
-
+ {{!-- weapon bonus --}}
{{ itemData.data.weaponBonus}}
diff --git a/src/templates/actor/partials/overview-control-buttons.hbs b/src/templates/actor/partials/overview-control-buttons.hbs index 2c85899f..ac7177b2 100644 --- a/src/templates/actor/partials/overview-control-buttons.hbs +++ b/src/templates/actor/partials/overview-control-buttons.hbs @@ -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 --}} -
+
- +
diff --git a/src/templates/actor/partials/spells-overview.hbs b/src/templates/actor/partials/spells-overview.hbs index e9861c77..e5f9b008 100644 --- a/src/templates/actor/partials/spells-overview.hbs +++ b/src/templates/actor/partials/spells-overview.hbs @@ -60,10 +60,8 @@ titleKey=titleKey}} {{#> systems/ds4/templates/actor/partials/item-list-entry.hbs itemData=itemData isEquipable=true hideDescription=true}} {{!-- spell type --}} -
-
+ {{!-- spell bonus --}} + {{alt}} + {{#if rollable}} + {{localize 'DS4.DiceOverlayImageAltText'}} + {{/if}} +