dungeonslayers/ds4
dungeonslayers/ds4
3
0
Fork 0
Code Issues 9 Pull requests 7 Projects Releases 10 Packages 1 Activity

Use same styling class for effect-list and item-list

Browse source 
Also center some columns in those lists
This commit is contained in:
Johannes Loher 2021-07-23 01:11:42 +02:00
parent 8d47c3d87b
commit bac53c4828
12 changed files with 73 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
src/scss/components/_effect_list.scss
View file

@ -1,68 +0,0 @@
/*
* SPDX-FileCopyrightText: 2021 Johannes Loher
* SPDX-FileCopyrightText: 2021 Gesina Schwalbe
*
* SPDX-License-Identifier: MIT
*/
@use "../utils/mixins";
@use "../utils/variables";
.ds4-effect-list {
@include mixins.mark-invalid-or-disabled-input;
$row-height: 1.75em;
align-items: center;
display: grid;
grid-column-gap: 0.5em;
grid-row-gap: 0.2em;
grid-template-columns: $row-height $row-height 3fr 2fr 5ch;
margin: 0.5em 0;
overflow-y: auto;
padding: 0;
:nth-child(5n + 1) {
justify-self: center;
}
&__row {
display: contents; // TODO: Once chromium supports `grid-template-columns: subgrid` (https://bugs.chromium.org/p/chromium/issues/detail?id=618969), switch to `display: grid; grid: 1/-1; grid-template-columns: subgrid`
&--header {
font-weight: bold;
}
> * {
height: $row-height;
line-height: $row-height;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
&__image {
border: none;
}
&__editable {
background-color: transparent;
border: 0;
padding: 0;
&--checkbox {
width: 100%;
height: 100%;
margin: 0px;
}
}
&__control-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
text-align: center;
width: 100%;
padding: 0 calc(1em / 3);
}
}

38
src/scss/components/_item_list.scss → src/scss/components/_embedded_document_list.scss
View file

@ -8,7 +8,7 @@
@use "../utils/mixins";
@use "../utils/variables";
.ds4-item-list {
.ds4-embedded-document-list {
@include mixins.mark-invalid-or-disabled-input;
$row-height: 1.75em;
@ -23,24 +23,51 @@
&--weapon {
grid-template-columns: $row-height $row-height 3ch 3fr $row-height 1fr 3ch 5fr 5ch;
:nth-child(9n + 1),
:nth-child(9n + 5),
:nth-child(9n + 6),
:nth-child(9n + 7) {
justify-self: center;
}
}
&--armor {
grid-template-columns: $row-height $row-height 3ch 3fr 1fr 1fr 3ch 5fr 5ch;
:nth-child(9n + 1),
:nth-child(9n + 7) {
justify-self: center;
}
}
&--shield {
grid-template-columns: $row-height $row-height 3ch 1fr 3ch 3fr 5ch;
:nth-child(7n + 1),
:nth-child(7n + 5) {
justify-self: center;
}
}
&--equipment {
grid-template-columns: $row-height $row-height 3ch 1fr 10ch 3fr 5ch;
:nth-child(7n + 1) {
justify-self: center;
}
}
&--loot {
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 5ch;
:nth-child(9n + 1),
:nth-child(9n + 4),
:nth-child(9n + 6),
:nth-child(9n + 7),
:nth-child(9n + 8) {
justify-self: center;
}
}
&--talent {
grid-template-columns: $row-height 1fr 21ch 3fr 5ch;
:nth-child(9n + 3) {
justify-self: center;
}
}
&--racial-ability,
&--language,
@ -49,6 +76,13 @@
grid-template-columns: $row-height 1fr 3fr 5ch;
}
&--effect {
grid-template-columns: $row-height $row-height 3fr 2fr 5ch;
:nth-child(5n + 1) {
justify-self: center;
}
}
&__row {
display: contents; // TODO: Once chromium supports `grid-template-columns: subgrid` (https://bugs.chromium.org/p/chromium/issues/detail?id=618969), switch to `display: grid; grid: 1/-1; grid-template-columns: subgrid`
@ -98,7 +132,7 @@
}
}
.ds4-item-list-title {
.ds4-embedded-document-list-title {
border-bottom: variables.$border-groove;
font-weight: bold;
margin-bottom: 0;

3
src/scss/ds4.scss
View file

@ -34,9 +34,8 @@
@include meta.load-css("components/core_values");
@include meta.load-css("components/currency");
@include meta.load-css("components/description");
@include meta.load-css("components/effect_list");
@include meta.load-css("components/embedded_document_list");
@include meta.load-css("components/forms");
@include meta.load-css("components/item_list");
@include meta.load-css("components/profile");
@include meta.load-css("components/rollable_image");
@include meta.load-css("components/sheet_tab_nav");

4
src/templates/sheets/actor/components/effect-list-entry.hbs
View file

@ -9,9 +9,9 @@ SPDX-License-Identifier: MIT
!-- Render an effect list entry row.
!-- @param effectData: The data of the item.
--}}
<li class="ds4-effect-list__row effect" data-id="{{effectData._id}}">
<li class="ds4-embedded-document-list__row effect" data-id="{{effectData._id}}">
{{!-- enabled --}}
<input class="ds4-effect-list__editable ds4-effect-list__editable--checkbox change-effect" type="checkbox" {{checked
<input class="ds4-embedded-document-list__editable ds4-embedded-document-list__editable--checkbox change-effect" type="checkbox" {{checked
(ne effectData.disabled true)}} data-dtype="Boolean" data-property="disabled" data-inverted="true"
title="{{localize 'DS4.EffectEnabled'}}">

2
src/templates/sheets/actor/components/effect-list-header.hbs
View file

@ -8,7 +8,7 @@ SPDX-License-Identifier: MIT
{{!--
!-- Render an effect list header row.
--}}
<li class="ds4-effect-list__row ds4-effect-list__row--header">
<li class="ds4-embedded-document-list__row ds4-embedded-document-list__row--header">
{{!-- enabled --}}
<div title="{{localize 'DS4.EffectEnabled'}}">{{localize 'DS4.EffectEnabledAbbr'}}</div>

10
src/templates/sheets/actor/components/item-list-entry.hbs
View file

@ -15,10 +15,10 @@ SPDX-License-Identifier: MIT
!-- @param hideDescription: A flag to disable the description column.
!-- @param @partial-block: Custom column headers can be passed using the partial block.
--}}
<li class="ds4-item-list__row item" data-id="{{itemData._id}}">
<li class="ds4-embedded-document-list__row item" data-id="{{itemData._id}}">
{{!-- equipped --}}
{{#if isEquipable}}
<input class="ds4-item-list__editable ds4-item-list__editable--checkbox change-item" type="checkbox" {{checked
<input class="ds4-embedded-document-list__editable ds4-embedded-document-list__editable--checkbox change-item" type="checkbox" {{checked
itemData.data.equipped}} data-dtype="Boolean" data-property="data.equipped"
title="{{localize 'DS4.ItemEquipped'}}">
{{/if}}
@ -30,12 +30,12 @@ SPDX-License-Identifier: MIT
{{!-- amount --}}
{{#if hasQuantity}}
<input class="ds4-item-list__editable change-item" type="number" min="0" step="1" value="{{itemData.data.quantity}}"
<input class="ds4-embedded-document-list__editable change-item" type="number" min="0" step="1" value="{{itemData.data.quantity}}"
data-dtype="Number" data-property="data.quantity" title="{{localize 'DS4.Quantity'}}" />
{{/if}}
{{!-- name --}}
<input class="ds4-item-list__editable change-item" type="text" value="{{itemData.name}}" data-dtype="String"
<input class="ds4-embedded-document-list__editable change-item" type="text" value="{{itemData.name}}" data-dtype="String"
data-property="name" title="{{htmlToPlainText itemData.data.description}}" />
{{!-- item type specifics --}}
@ -45,7 +45,7 @@ SPDX-License-Identifier: MIT
{{!-- description --}}
{{#unless hideDescription}}
<div class="ds4-item-list__description" title="{{htmlToPlainText itemData.data.description}}">
<div class="ds4-embedded-document-list__description" title="{{htmlToPlainText itemData.data.description}}">
{{{itemData.data.description}}}</div>
{{/unless}}

2
src/templates/sheets/actor/components/item-list-header.hbs
View file

@ -14,7 +14,7 @@ SPDX-License-Identifier: MIT
!-- @param hideDescription: A flag to disable the description column.
!-- @param @partial-block: Custom column headers can be passed using the partial block.
--}}
<li class="ds4-item-list__row ds4-item-list__row--header">
<li class="ds4-embedded-document-list__row ds4-embedded-document-list__row--header">
{{!-- equipped --}}
{{#if isEquipable}}
<div title="{{localize 'DS4.ItemEquipped'}}">{{localize 'DS4.ItemEquippedAbbr'}}</div>

28
src/templates/sheets/actor/components/items-overview.hbs
View file

@ -7,12 +7,12 @@ SPDX-License-Identifier: MIT
--}}
{{!-- WEAPONS --}}
<h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeWeaponPlural'}}</h4>
<h4 class="ds4-embedded-document-list-title">{{localize 'DS4.ItemTypeWeaponPlural'}}</h4>
{{#unless (isEmpty itemsByType.weapon)}}
<ol class="ds4-item-list ds4-item-list--weapon item-list">
<ol class="ds4-embedded-document-list ds4-embedded-document-list--weapon item-list">
{{#> systems/ds4/templates/sheets/actor/components/item-list-header.hbs isEquipable=true hasQuantity=true}}
{{!-- attack type --}}
<div class="ds4-item-list__image" title="{{localize 'DS4.AttackType'}}">{{localize 'DS4.AttackTypeAbbr'}}</div>
<div class="ds4-embedded-document-list__image" title="{{localize 'DS4.AttackType'}}">{{localize 'DS4.AttackTypeAbbr'}}</div>
{{!-- weapon bonus --}}
<div title="{{localize 'DS4.WeaponBonus'}}">
@ -29,7 +29,7 @@ SPDX-License-Identifier: MIT
{{#> systems/ds4/templates/sheets/actor/components/item-list-entry.hbs itemData=itemData isEquipable=true
hasQuantity=true}}
{{!-- attack type --}}
<img class="ds4-item-list__image" src="{{lookup ../../config.icons.attackTypes itemData.data.attackType}}"
<img class="ds4-embedded-document-list__image" src="{{lookup ../../config.icons.attackTypes itemData.data.attackType}}"
title="{{lookup ../../config.i18n.attackTypes itemData.data.attackType}}" />
{{!-- weapon bonus --}}
@ -45,9 +45,9 @@ SPDX-License-Identifier: MIT
documentType='item' type='weapon'}}
{{!-- ARMOR --}}
<h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeArmorPlural'}}</h4>
<h4 class="ds4-embedded-document-list-title">{{localize 'DS4.ItemTypeArmorPlural'}}</h4>
{{#unless (isEmpty itemsByType.armor)}}
<ol class="ds4-item-list ds4-item-list--armor item-list">
<ol class="ds4-embedded-document-list ds4-embedded-document-list--armor item-list">
{{#> systems/ds4/templates/sheets/actor/components/item-list-header.hbs isEquipable=true hasQuantity=true}}
{{!-- armor material type --}}
<div title="{{localize 'DS4.ArmorMaterialType'}}">{{localize 'DS4.ArmorMaterialTypeAbbr'}}</div>
@ -84,9 +84,9 @@ documentType='item' type='weapon'}}
documentType='item' type='armor'}}
{{!-- SHIELD --}}
<h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeShieldPlural'}}</h4>
<h4 class="ds4-embedded-document-list-title">{{localize 'DS4.ItemTypeShieldPlural'}}</h4>
{{#unless (isEmpty itemsByType.shield)}}
<ol class="ds4-item-list ds4-item-list--shield item-list">
<ol class="ds4-embedded-document-list ds4-embedded-document-list--shield item-list">
{{#> systems/ds4/templates/sheets/actor/components/item-list-header.hbs isEquipable=true hasQuantity=true}}
{{!-- armor value --}}
<div title="{{localize 'DS4.ArmorValue'}}">
@ -106,9 +106,9 @@ documentType='item' type='armor'}}
documentType='item' type='shield'}}
{{!-- EQUIPMENT --}}
<h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeEquipmentPlural'}}</h4>
<h4 class="ds4-embedded-document-list-title">{{localize 'DS4.ItemTypeEquipmentPlural'}}</h4>
{{#unless (isEmpty itemsByType.equipment)}}
<ol class="ds4-item-list ds4-item-list--equipment item-list">
<ol class="ds4-embedded-document-list ds4-embedded-document-list--equipment item-list">
{{#> systems/ds4/templates/sheets/actor/components/item-list-header.hbs isEquipable=true hasQuantity=true}}
{{!-- storage location --}}
<div>{{localize 'DS4.StorageLocation'}}</div>
@ -117,7 +117,7 @@ documentType='item' type='shield'}}
{{#> systems/ds4/templates/sheets/actor/components/item-list-entry.hbs itemData=itemData isEquipable=true
hasQuantity=true}}
{{!-- storage location --}}
<input class="ds4-item-list__editable change-item" type="text" value="{{itemData.data.storageLocation}}"
<input class="ds4-embedded-document-list__editable change-item" type="text" value="{{itemData.data.storageLocation}}"
data-dtype="String" data-property="data.storageLocation" title="{{localize 'DS4.StorageLocation'}}">
{{/systems/ds4/templates/sheets/actor/components/item-list-entry.hbs}}
{{/each}}
@ -127,9 +127,9 @@ documentType='item' type='shield'}}
documentType='item' type='equipment'}}
{{!-- LOOT --}}
<h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeLootPlural'}}</h4>
<h4 class="ds4-embedded-document-list-title">{{localize 'DS4.ItemTypeLootPlural'}}</h4>
{{#unless (isEmpty itemsByType.loot)}}
<ol class="ds4-item-list ds4-item-list--loot item-list">
<ol class="ds4-embedded-document-list ds4-embedded-document-list--loot item-list">
{{#> systems/ds4/templates/sheets/actor/components/item-list-header.hbs hasQuantity=true}}
{{!-- storage location --}}
<div>{{localize 'DS4.StorageLocation'}}</div>
@ -137,7 +137,7 @@ documentType='item' type='equipment'}}
{{#each itemsByType.loot as |itemData id|}}
{{#> systems/ds4/templates/sheets/actor/components/item-list-entry.hbs itemData=itemData hasQuantity=true}}
{{!-- storage location --}}
<input class="ds4-item-list__editable change-item" type="text" value="{{itemData.data.storageLocation}}"
<input class="ds4-embedded-document-list__editable change-item" type="text" value="{{itemData.data.storageLocation}}"
data-dtype="String" data-property="data.storageLocation" title="{{localize 'DS4.StorageLocation'}}">
{{/systems/ds4/templates/sheets/actor/components/item-list-entry.hbs}}
{{/each}}

16
src/templates/sheets/actor/tabs/character-abilities.hbs
View file

@ -7,9 +7,9 @@ SPDX-License-Identifier: MIT
<div class="tab abilities" data-group="primary" data-tab="abilities">
{{!-- TALENT --}}
<h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeTalentPlural'}}</h4>
<h4 class="ds4-embedded-document-list-title">{{localize 'DS4.ItemTypeTalentPlural'}}</h4>
{{#unless (isEmpty itemsByType.talent)}}
<ol class="ds4-item-list ds4-item-list--talent item-list">
<ol class="ds4-embedded-document-list ds4-embedded-document-list--talent item-list">
{{#> systems/ds4/templates/sheets/actor/components/item-list-header.hbs}}
{{!-- rank --}}
<div>{{localize 'DS4.TalentRank'}}</div>
@ -26,9 +26,9 @@ SPDX-License-Identifier: MIT
documentType='item' type='talent'}}
{{!-- RACIAL ABILITY --}}
<h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeRacialAbilityPlural'}}</h4>
<h4 class="ds4-embedded-document-list-title">{{localize 'DS4.ItemTypeRacialAbilityPlural'}}</h4>
{{#unless (isEmpty itemsByType.racialAbility)}}
<ol class="ds4-item-list ds4-item-list--racial-ability item-list">
<ol class="ds4-embedded-document-list ds4-embedded-document-list--racial-ability item-list">
{{> systems/ds4/templates/sheets/actor/components/item-list-header.hbs}}
{{#each itemsByType.racialAbility as |itemData id|}}
{{> systems/ds4/templates/sheets/actor/components/item-list-entry.hbs itemData=itemData}}
@ -39,9 +39,9 @@ SPDX-License-Identifier: MIT
documentType='item' type='racialAbility'}}
{{!-- LANGUAGE --}}
<h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeLanguagePlural'}}</h4>
<h4 class="ds4-embedded-document-list-title">{{localize 'DS4.ItemTypeLanguagePlural'}}</h4>
{{#unless (isEmpty itemsByType.language)}}
<ol class="ds4-item-list ds4-item-list--language item-list">
<ol class="ds4-embedded-document-list ds4-embedded-document-list--language item-list">
{{> systems/ds4/templates/sheets/actor/components/item-list-header.hbs}}
{{#each itemsByType.language as |itemData id|}}
{{> systems/ds4/templates/sheets/actor/components/item-list-entry.hbs itemData=itemData}}
@ -52,9 +52,9 @@ SPDX-License-Identifier: MIT
documentType='item' type='language'}}
{{!-- ALPHABET --}}
<h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeAlphabetPlural'}}</h4>
<h4 class="ds4-embedded-document-list-title">{{localize 'DS4.ItemTypeAlphabetPlural'}}</h4>
{{#unless (isEmpty itemsByType.alphabet)}}
<ol class="ds4-item-list ds4-item-list--alphabet item-list">
<ol class="ds4-embedded-document-list ds4-embedded-document-list--alphabet item-list">
{{> systems/ds4/templates/sheets/actor/components/item-list-header.hbs}}
{{#each itemsByType.alphabet as |itemData id|}}
{{> systems/ds4/templates/sheets/actor/components/item-list-entry.hbs itemData=itemData}}

2
src/templates/sheets/actor/tabs/creature-abilities.hbs
View file

@ -7,7 +7,7 @@ SPDX-License-Identifier: MIT
<div class="tab abilities" data-group="primary" data-tab="abilities">
{{#unless (isEmpty itemsByType.specialCreatureAbility)}}
<ol class="ds4-item-list ds4-item-list--special-creature-ability item-list">
<ol class="ds4-embedded-document-list ds4-embedded-document-list--special-creature-ability item-list">
{{> systems/ds4/templates/sheets/actor/components/item-list-header.hbs}}
{{#each itemsByType.specialCreatureAbility as |itemData id|}}
{{> systems/ds4/templates/sheets/actor/components/item-list-entry.hbs itemData=itemData}}

2
src/templates/sheets/actor/tabs/effects.hbs
View file

@ -7,7 +7,7 @@ SPDX-License-Identifier: MIT
<div class="tab effects" data-group="primary" data-tab="effects">
{{#unless (isEmpty data.effects)}}
<ol class="ds4-effect-list">
<ol class="ds4-embedded-document-list ds4-embedded-document-list--effect">
{{> systems/ds4/templates/sheets/actor/components/effect-list-header.hbs}}
{{#each enrichedEffects as |effectData id| }}
{{> systems/ds4/templates/sheets/actor/components/effect-list-entry.hbs effectData=effectData}}

6
src/templates/sheets/actor/tabs/spells.hbs
View file

@ -51,7 +51,7 @@ titleKey=titleKey}}
<div class="tab spells" data-group="primary" data-tab="spells">
{{#unless (isEmpty itemsByType.spell)}}
<ol class="ds4-item-list ds4-item-list--spell item-list">
<ol class="ds4-embedded-document-list ds4-embedded-document-list--spell item-list">
{{#> systems/ds4/templates/sheets/actor/components/item-list-header.hbs isEquipable=true hideDescription=true}}
{{!-- spell type --}}
<div title="{{localize 'DS4.SpellType'}}">{{localize 'DS4.SpellTypeAbbr'}}</div>
@ -72,11 +72,11 @@ titleKey=titleKey}}
{{#> systems/ds4/templates/sheets/actor/components/item-list-entry.hbs itemData=itemData isEquipable=true
hideDescription=true}}
{{!-- spell type --}}
<img class="ds4-item-list__image" src="{{lookup ../../config.icons.spellTypes itemData.data.spellType}}"
<img class="ds4-embedded-document-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 change-item" type="text" data-dtype="String" data-property="data.bonus"
<input class="ds4-embedded-document-list__editable change-item" type="text" data-dtype="String" data-property="data.bonus"
value="{{itemData.data.bonus}}" title="{{localize 'DS4.SpellBonus'}}" />
{{!-- max. distance --}}