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

centering of num item values in char sheet

Browse source 
Changes:
- number values of items in the items overview of a char sheet
  are now horizontally centered
- description content is now vertically correctly aligned
This commit is contained in:
Gesina Schwalbe 2020-12-29 22:01:40 +01:00
parent 3184de0e7a
commit 4f5e6a5ebc
2 changed files with 46 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/scss/components/_items.scss
View file

@ -33,6 +33,10 @@
text-align: right;
}
.item-num-val {
text-align: center;
}
.item-description {
font-size: 75%;
white-space: nowrap;
@ -42,6 +46,11 @@
text-overflow: ellipsis;
overflow: hidden;
}
p:first-child {
margin-top: 0px;
padding-top: 0px;
}
}
}

69
src/templates/actor/partials/items.hbs
View file

@ -4,25 +4,26 @@
<div class="tab items" data-group="primary" data-tab="items">
{{!-- WEAPONS --}}
<h4 class="items-list-title">{{localize "DS4.ItemTypeWeapon"}}</h4> {{!-- SPECIFIC --}}
<h4 class="items-list-title">{{localize "DS4.ItemTypeWeapon"}}</h4> {{!-- SPECIFIC --}}
<ol class="items-list">
<li class="item flexrow item-header">
<div class="flexrow flex15">
<div></div> {{!-- equipped --}} {{!-- SPECIFIC --}}
<div class="item-image"></div>
<div>#</div> {{!-- amount --}}
<div class="item-num-val">#</div> {{!-- amount --}}
</div>
<div class="item-name flex2">{{localize "DS4.ItemName"}}</div>
<div class="item-name flex3">{{localize "DS4.ItemName"}}</div>
<div>{{localize "DS4.AttackTypeAbbr"}}</div> {{!-- SPECIFIC --}}
<div class="flexrow flex15">
<div>{{localize "DS4.WeaponBonusAbbr"}}</div> {{!-- SPECIFIC --}}
<div>{{localize "DS4.OpponentDefenseAbbr"}}</div> {{!-- SPECIFIC --}}
<div class="item-num-val">{{localize "DS4.WeaponBonusAbbr"}}</div> {{!-- SPECIFIC --}}
<div class="item-num-val">{{localize "DS4.OpponentDefenseAbbr"}}</div> {{!-- SPECIFIC --}}
</div>
<div class="flex4">{{localize "DS4.Description"}}</div>
{{!-- add button --}}
<div class="item-controls"> {{!-- SPECIFIC --}}
<a class="item-control item-create" title="Create item" data-type="weapon"><i class="fas fa-plus"></i>
{{localize "DS4.ActionAddItem"}}</a> {{!-- SPECIFIC --}}
<a class="item-control item-create" title="Create item" data-type="weapon"{{!-- SPECIFIC --}}>
<i class="fas fa-plus"></i>
{{localize "DS4.ActionAddItem"}}</a>
</div>
</li>
{{#each itemsByType.weapon as |item id|}} {{!-- SPECIFIC --}}
@ -38,15 +39,15 @@
<img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
</div>
{{!-- amount --}}
<div>{{itemData.quantity}}</div>
<div class="item-num-val">{{itemData.quantity}}</div>
</div>
{{!-- name --}}
<h4 class="item-name flex2">{{item.name}}</h4>
<h4 class="item-name flex3">{{item.name}}</h4>
{{!-- item specifics --}}
<div>{{lookup ../../config.attackTypes itemData.attackType}}</div> {{!-- SPECIFIC --}}
<div class="flexrow flex15">
<div>{{itemData.weaponBonus}}</div> {{!-- SPECIFIC --}}
<div>{{itemData.opponentDefense}}</div> {{!-- SPECIFIC --}}
<div class="item-num-val">{{itemData.weaponBonus}}</div> {{!-- SPECIFIC --}}
<div class="item-num-val">{{itemData.opponentDefense}}</div> {{!-- SPECIFIC --}}
</div>
{{!-- description --}}
<div class="flex4 item-description">{{{itemData.description}}}</div>
@ -61,23 +62,24 @@
</ol>
{{!-- ARMOR --}}
<h4 class="items-list-title">{{localize "DS4.ItemTypeArmor"}}</h4> {{!-- SPECIFIC --}}
<h4 class="items-list-title">{{localize "DS4.ItemTypeArmor"}}</h4> {{!-- SPECIFIC --}}
<ol class="items-list">
<li class="item flexrow item-header">
<div class="flexrow flex15">
<div></div> {{!-- equipped --}} {{!-- SPECIFIC --}}
<div class="item-image"></div>
<div>#</div> {{!-- amount --}}
<div class="item-num-val">#</div> {{!-- amount --}}
</div>
<div class="item-name flex2">{{localize "DS4.ItemName"}}</div>
<div class="item-name flex3">{{localize "DS4.ItemName"}}</div>
<div>{{localize "DS4.ArmorMaterialTypeAbbr"}}</div> {{!-- SPECIFIC --}}
<div>{{localize "DS4.ArmorTypeAbbr"}}</div> {{!-- SPECIFIC --}}
<div class="flex05">{{localize "DS4.ArmorValueAbbr"}}</div> {{!-- SPECIFIC --}}
<div class="flex05 item-num-val">{{localize "DS4.ArmorValueAbbr"}}</div> {{!-- SPECIFIC --}}
<div class="flex4">{{localize "DS4.Description"}}</div>
{{!-- add button --}}
<div class="item-controls"> {{!-- SPECIFIC --}}
<a class="item-control item-create" title="Create item" data-type="armor"><i class="fas fa-plus"></i>
{{localize "DS4.ActionAddItem"}}</a> {{!-- SPECIFIC --}}
<a class="item-control item-create" title="Create item" data-type="armor"{{!-- SPECIFIC --}}>
<i class="fas fa-plus"></i>
{{localize "DS4.ActionAddItem"}}</a>
</div>
</li>
{{#each itemsByType.armor as |item id|}} {{!-- SPECIFIC --}}
@ -96,11 +98,11 @@
<div>{{itemData.quantity}}</div>
</div>
{{!-- name --}}
<h4 class="item-name flex2">{{item.name}}</h4>
<h4 class="item-name flex3">{{item.name}}</h4>
{{!-- item specifics --}}
<div>{{lookup ../../config.armorMaterialTypes itemData.armorMaterialType}}</div> {{!-- SPECIFIC --}}
<div>{{lookup ../../config.armorTypes itemData.armorType}}</div> {{!-- SPECIFIC --}}
<div class="flex05">{{itemData.armorValue}}</div> {{!-- SPECIFIC --}}
<div class="flex05 item-num-val">{{itemData.armorValue}}</div> {{!-- SPECIFIC --}}
{{!-- description --}}
<div class="flex4 item-description">{{{itemData.description}}}</div>
{{!-- edit & delete buttons --}}
@ -115,21 +117,22 @@
{{!-- SHIELD --}}
<h4 class="items-list-title">{{localize "DS4.ItemTypeShield"}}</h4> {{!-- SPECIFIC --}}
<h4 class="items-list-title">{{localize "DS4.ItemTypeShield"}}</h4> {{!-- SPECIFIC --}}
<ol class="items-list">
<li class="item flexrow item-header">
<div class="flexrow flex15">
<div></div> {{!-- equipped --}} {{!-- SPECIFIC --}}
<div class="item-image"></div>
<div>#</div> {{!-- amount --}}
<div class="item-num-val">#</div> {{!-- amount --}}
</div>
<div class="item-name flex2">{{localize "DS4.ItemName"}}</div>
<div class="flex05">{{localize "DS4.ArmorValueAbbr"}}</div> {{!-- SPECIFIC --}}
<div class="item-name flex3">{{localize "DS4.ItemName"}}</div>
<div class="flex05 item-num-val">{{localize "DS4.ArmorValueAbbr"}}</div> {{!-- SPECIFIC --}}
<div class="flex4">{{localize "DS4.Description"}}</div>
{{!-- add button --}}
<div class="item-controls"> {{!-- SPECIFIC --}}
<a class="item-control item-create" title="Create item" data-type="shield"><i class="fas fa-plus"></i>
{{localize "DS4.ActionAddItem"}}</a> {{!-- SPECIFIC --}}
<a class="item-control item-create" title="Create item" data-type="shield"{{!-- SPECIFIC --}}>
<i class="fas fa-plus"></i>
{{localize "DS4.ActionAddItem"}}</a>
</div>
</li>
{{#each itemsByType.shield as |item id|}} {{!-- SPECIFIC --}}
@ -148,9 +151,9 @@
<div>{{itemData.quantity}}</div>
</div>
{{!-- name --}}
<h4 class="item-name flex2">{{item.name}}</h4>
<h4 class="item-name flex3">{{item.name}}</h4>
{{!-- item specifics --}}
<div class="flex05">{{itemData.armorValue}}</div> {{!-- SPECIFIC --}}
<div class="flex05 item-num-val">{{itemData.armorValue}}</div> {{!-- SPECIFIC --}}
{{!-- description --}}
<div class="flex4 item-description">{{{itemData.description}}}</div>
{{!-- edit & delete buttons --}}
@ -164,20 +167,22 @@
</ol>
{{!-- TRINKET --}}
<h4 class="items-list-title">{{localize "DS4.ItemTypeTrinket"}}</h4> {{!-- SPECIFIC --}}
<h4 class="items-list-title">{{localize "DS4.ItemTypeTrinket"}}</h4> {{!-- SPECIFIC --}}
<ol class="items-list">
<li class="item flexrow item-header">
<div class="flexrow flex15">
<div></div> {{!-- equipped --}} {{!-- SPECIFIC --}}
<div class="item-image"></div>
<div>#</div> {{!-- amount --}}
<div class="item-num-val">#</div> {{!-- amount --}}
</div>
<div class="item-name flex2">{{localize "DS4.ItemName"}}</div>
<div class="item-name flex3">{{localize "DS4.ItemName"}}</div>
<div class="flex2">{{localize "DS4.StorageLocation"}}</div> {{!-- SPECIFIC --}}
<div class="flex4">{{localize "DS4.Description"}}</div>
{{!-- add button --}}
<div class="item-controls"> {{!-- SPECIFIC --}}
<a class="item-control item-create" title="Create item" data-type="trinket"><i class="fas fa-plus"></i>
{{localize "DS4.ActionAddItem"}}</a> {{!-- SPECIFIC --}}
<a class="item-control item-create" title="Create item" data-type="trinket"{{!-- SPECIFIC --}}>
<i class="fas fa-plus"></i>
{{localize "DS4.ActionAddItem"}}</a>
</div>
</li>
{{#each itemsByType.trinket as |item id|}} {{!-- SPECIFIC --}}