dungeonslayers/ds4
dungeonslayers/ds4
3
0
Fork 0
Code Issues 9 Pull requests 7 Projects Releases 10 Packages 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; text-align: right;
} }
.item-num-val {
text-align: center;
}
.item-description { .item-description {
font-size: 75%; font-size: 75%;
white-space: nowrap; white-space: nowrap;
@ -42,6 +46,11 @@
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; 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"> <div class="tab items" data-group="primary" data-tab="items">
{{!-- WEAPONS --}} {{!-- 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"> <ol class="items-list">
<li class="item flexrow item-header"> <li class="item flexrow item-header">
<div class="flexrow flex15"> <div class="flexrow flex15">
<div></div> {{!-- equipped --}} {{!-- SPECIFIC --}} <div></div> {{!-- equipped --}} {{!-- SPECIFIC --}}
<div class="item-image"></div> <div class="item-image"></div>
<div>#</div> {{!-- amount --}} <div class="item-num-val">#</div> {{!-- amount --}}
</div> </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>{{localize "DS4.AttackTypeAbbr"}}</div> {{!-- SPECIFIC --}}
<div class="flexrow flex15"> <div class="flexrow flex15">
<div>{{localize "DS4.WeaponBonusAbbr"}}</div> {{!-- SPECIFIC --}} <div class="item-num-val">{{localize "DS4.WeaponBonusAbbr"}}</div> {{!-- SPECIFIC --}}
<div>{{localize "DS4.OpponentDefenseAbbr"}}</div> {{!-- SPECIFIC --}} <div class="item-num-val">{{localize "DS4.OpponentDefenseAbbr"}}</div> {{!-- SPECIFIC --}}
</div> </div>
<div class="flex4">{{localize "DS4.Description"}}</div> <div class="flex4">{{localize "DS4.Description"}}</div>
{{!-- add button --}} {{!-- add button --}}
<div class="item-controls"> {{!-- SPECIFIC --}} <div class="item-controls"> {{!-- SPECIFIC --}}
<a class="item-control item-create" title="Create item" data-type="weapon"><i class="fas fa-plus"></i> <a class="item-control item-create" title="Create item" data-type="weapon"{{!-- SPECIFIC --}}>
{{localize "DS4.ActionAddItem"}}</a> {{!-- SPECIFIC --}} <i class="fas fa-plus"></i>
{{localize "DS4.ActionAddItem"}}</a>
</div> </div>
</li> </li>
{{#each itemsByType.weapon as |item id|}} {{!-- SPECIFIC --}} {{#each itemsByType.weapon as |item id|}} {{!-- SPECIFIC --}}
@ -38,15 +39,15 @@
<img src="{{item.img}}" title="{{item.name}}" width="24" height="24" /> <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
</div> </div>
{{!-- amount --}} {{!-- amount --}}
<div>{{itemData.quantity}}</div> <div class="item-num-val">{{itemData.quantity}}</div>
</div> </div>
{{!-- name --}} {{!-- name --}}
<h4 class="item-name flex2">{{item.name}}</h4> <h4 class="item-name flex3">{{item.name}}</h4>
{{!-- item specifics --}} {{!-- item specifics --}}
<div>{{lookup ../../config.attackTypes itemData.attackType}}</div> {{!-- SPECIFIC --}} <div>{{lookup ../../config.attackTypes itemData.attackType}}</div> {{!-- SPECIFIC --}}
<div class="flexrow flex15"> <div class="flexrow flex15">
<div>{{itemData.weaponBonus}}</div> {{!-- SPECIFIC --}} <div class="item-num-val">{{itemData.weaponBonus}}</div> {{!-- SPECIFIC --}}
<div>{{itemData.opponentDefense}}</div> {{!-- SPECIFIC --}} <div class="item-num-val">{{itemData.opponentDefense}}</div> {{!-- SPECIFIC --}}
</div> </div>
{{!-- description --}} {{!-- description --}}
<div class="flex4 item-description">{{{itemData.description}}}</div> <div class="flex4 item-description">{{{itemData.description}}}</div>
@ -61,23 +62,24 @@
</ol> </ol>
{{!-- ARMOR --}} {{!-- 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"> <ol class="items-list">
<li class="item flexrow item-header"> <li class="item flexrow item-header">
<div class="flexrow flex15"> <div class="flexrow flex15">
<div></div> {{!-- equipped --}} {{!-- SPECIFIC --}} <div></div> {{!-- equipped --}} {{!-- SPECIFIC --}}
<div class="item-image"></div> <div class="item-image"></div>
<div>#</div> {{!-- amount --}} <div class="item-num-val">#</div> {{!-- amount --}}
</div> </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.ArmorMaterialTypeAbbr"}}</div> {{!-- SPECIFIC --}}
<div>{{localize "DS4.ArmorTypeAbbr"}}</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> <div class="flex4">{{localize "DS4.Description"}}</div>
{{!-- add button --}} {{!-- add button --}}
<div class="item-controls"> {{!-- SPECIFIC --}} <div class="item-controls"> {{!-- SPECIFIC --}}
<a class="item-control item-create" title="Create item" data-type="armor"><i class="fas fa-plus"></i> <a class="item-control item-create" title="Create item" data-type="armor"{{!-- SPECIFIC --}}>
{{localize "DS4.ActionAddItem"}}</a> {{!-- SPECIFIC --}} <i class="fas fa-plus"></i>
{{localize "DS4.ActionAddItem"}}</a>
</div> </div>
</li> </li>
{{#each itemsByType.armor as |item id|}} {{!-- SPECIFIC --}} {{#each itemsByType.armor as |item id|}} {{!-- SPECIFIC --}}
@ -96,11 +98,11 @@
<div>{{itemData.quantity}}</div> <div>{{itemData.quantity}}</div>
</div> </div>
{{!-- name --}} {{!-- name --}}
<h4 class="item-name flex2">{{item.name}}</h4> <h4 class="item-name flex3">{{item.name}}</h4>
{{!-- item specifics --}} {{!-- item specifics --}}
<div>{{lookup ../../config.armorMaterialTypes itemData.armorMaterialType}}</div> {{!-- SPECIFIC --}} <div>{{lookup ../../config.armorMaterialTypes itemData.armorMaterialType}}</div> {{!-- SPECIFIC --}}
<div>{{lookup ../../config.armorTypes itemData.armorType}}</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 --}} {{!-- description --}}
<div class="flex4 item-description">{{{itemData.description}}}</div> <div class="flex4 item-description">{{{itemData.description}}}</div>
{{!-- edit & delete buttons --}} {{!-- edit & delete buttons --}}
@ -115,21 +117,22 @@
{{!-- SHIELD --}} {{!-- 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"> <ol class="items-list">
<li class="item flexrow item-header"> <li class="item flexrow item-header">
<div class="flexrow flex15"> <div class="flexrow flex15">
<div></div> {{!-- equipped --}} {{!-- SPECIFIC --}} <div></div> {{!-- equipped --}} {{!-- SPECIFIC --}}
<div class="item-image"></div> <div class="item-image"></div>
<div>#</div> {{!-- amount --}} <div class="item-num-val">#</div> {{!-- amount --}}
</div> </div>
<div class="item-name flex2">{{localize "DS4.ItemName"}}</div> <div class="item-name flex3">{{localize "DS4.ItemName"}}</div>
<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> <div class="flex4">{{localize "DS4.Description"}}</div>
{{!-- add button --}} {{!-- add button --}}
<div class="item-controls"> {{!-- SPECIFIC --}} <div class="item-controls"> {{!-- SPECIFIC --}}
<a class="item-control item-create" title="Create item" data-type="shield"><i class="fas fa-plus"></i> <a class="item-control item-create" title="Create item" data-type="shield"{{!-- SPECIFIC --}}>
{{localize "DS4.ActionAddItem"}}</a> {{!-- SPECIFIC --}} <i class="fas fa-plus"></i>
{{localize "DS4.ActionAddItem"}}</a>
</div> </div>
</li> </li>
{{#each itemsByType.shield as |item id|}} {{!-- SPECIFIC --}} {{#each itemsByType.shield as |item id|}} {{!-- SPECIFIC --}}
@ -148,9 +151,9 @@
<div>{{itemData.quantity}}</div> <div>{{itemData.quantity}}</div>
</div> </div>
{{!-- name --}} {{!-- name --}}
<h4 class="item-name flex2">{{item.name}}</h4> <h4 class="item-name flex3">{{item.name}}</h4>
{{!-- item specifics --}} {{!-- item specifics --}}
<div class="flex05">{{itemData.armorValue}}</div> {{!-- SPECIFIC --}} <div class="flex05 item-num-val">{{itemData.armorValue}}</div> {{!-- SPECIFIC --}}
{{!-- description --}} {{!-- description --}}
<div class="flex4 item-description">{{{itemData.description}}}</div> <div class="flex4 item-description">{{{itemData.description}}}</div>
{{!-- edit & delete buttons --}} {{!-- edit & delete buttons --}}
@ -164,20 +167,22 @@
</ol> </ol>
{{!-- TRINKET --}} {{!-- 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"> <ol class="items-list">
<li class="item flexrow item-header"> <li class="item flexrow item-header">
<div class="flexrow flex15"> <div class="flexrow flex15">
<div></div> {{!-- equipped --}} {{!-- SPECIFIC --}} <div></div> {{!-- equipped --}} {{!-- SPECIFIC --}}
<div class="item-image"></div> <div class="item-image"></div>
<div>#</div> {{!-- amount --}} <div class="item-num-val">#</div> {{!-- amount --}}
</div> </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> <div class="flex4">{{localize "DS4.Description"}}</div>
{{!-- add button --}} {{!-- add button --}}
<div class="item-controls"> {{!-- SPECIFIC --}} <div class="item-controls"> {{!-- SPECIFIC --}}
<a class="item-control item-create" title="Create item" data-type="trinket"><i class="fas fa-plus"></i> <a class="item-control item-create" title="Create item" data-type="trinket"{{!-- SPECIFIC --}}>
{{localize "DS4.ActionAddItem"}}</a> {{!-- SPECIFIC --}} <i class="fas fa-plus"></i>
{{localize "DS4.ActionAddItem"}}</a>
</div> </div>
</li> </li>
{{#each itemsByType.trinket as |item id|}} {{!-- SPECIFIC --}} {{#each itemsByType.trinket as |item id|}} {{!-- SPECIFIC --}}