mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-07-22 02:19:54 +02:00
Refactor styling of sidebar resources (#2050)
Some checks are pending
Project CI / build (24.x) (push) Waiting to run
Some checks are pending
Project CI / build (24.x) (push) Waiting to run
This commit is contained in:
Carlos Fernandez
GitHub
parent
70388dbd73
commit
1af86d87bb
10 changed files with 767 additions and 1039 deletions
|
|
@ -1,152 +1,152 @@
|
|||
<aside class="character-sidebar-sheet">
|
||||
<div class="portrait {{#if isDeath}}death-roll{{/if}}">
|
||||
<img src="{{document.img}}" alt="{{document.name}}" data-action='editImage' data-edit="img">
|
||||
<a class="death-roll-btn" data-tooltip="DAGGERHEART.UI.Tooltip.makeDeathMove" {{#if
|
||||
isDeath}}data-action="makeDeathMove" {{/if}}><i class="fa-solid fa-skull death-save"></i></a>
|
||||
</div>
|
||||
<div class="info-section {{#if useResourcePips}}pip-display{{/if}}">
|
||||
<div class="resources-section">
|
||||
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.hitPoints label="DAGGERHEART.GENERAL.HitPoints.short" key="system.resources.hitPoints.value" action="toggleHitPoints" }}
|
||||
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.stress label="DAGGERHEART.GENERAL.stress" key="system.resources.stress.value" action="toggleStress" }}
|
||||
</div>
|
||||
<div class="status-section {{#if useResourcePips}}pip-display{{/if}}">
|
||||
<div class="status-number">
|
||||
<div class='status-value'>
|
||||
<p>{{document.system.evasion}}</p>
|
||||
</div>
|
||||
<div class="status-label">
|
||||
<h4>{{localize "DAGGERHEART.GENERAL.evasion"}}</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if document.system.armorScore.max}}
|
||||
<div class="status-bar armor-slots">
|
||||
{{#if useResourcePips}}
|
||||
<div class='slot-value'>
|
||||
<div class="slot-bar">
|
||||
{{#times document.system.armorScore.max}}
|
||||
<a class='armor-slot' data-action='toggleArmor' data-value="{{add this 1}}">
|
||||
{{#if (gte ../document.system.armorScore.value (add this 1))}}
|
||||
<i class="fa-solid fa-shield"></i>
|
||||
{{else}}
|
||||
<i class="fa-solid fa-shield-halved"></i>
|
||||
{{/if}}
|
||||
</a>
|
||||
{{/times}}
|
||||
</div>
|
||||
<a class="slot-label" data-action="toggleArmorMangement" {{disabled (not @root.editable)}}>
|
||||
<span class="label">{{localize "DAGGERHEART.GENERAL.armorSlots"}}</span>
|
||||
<div class="slot-value-container">
|
||||
<span class="value">{{document.system.armorScore.value}} / {{document.system.armorScore.max}}</span>
|
||||
{{#if @root.editable}}<i class="fa-solid fa-gear" inert></i>{{/if}}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class='status-value'>
|
||||
<input class="bar-input armor-marks-input" value="{{document.system.armorScore.value}}" type="number" id="{{document.uuid}}-armor-slots">
|
||||
<span>/</span>
|
||||
<span class="bar-label">{{document.system.armorScore.max}}</span>
|
||||
</div>
|
||||
<progress
|
||||
class='progress-bar stress-color'
|
||||
value='{{document.system.armorScore.value}}'
|
||||
max='{{document.system.armorScore.max}}'
|
||||
></progress>
|
||||
<a class="status-label" data-action="toggleArmorMangement" {{disabled (not @root.editable)}}>
|
||||
<h4>{{localize "DAGGERHEART.GENERAL.armorSlots"}}</h4>
|
||||
{{#if @root.editable}}<i class="fa-solid fa-gear" inert></i>{{/if}}
|
||||
</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="status-number armor-slots">
|
||||
<div class='status-value'>
|
||||
<p>-</p>
|
||||
</div>
|
||||
<div class="status-label">
|
||||
<h4>{{localize "DAGGERHEART.GENERAL.armorSlots"}}</h4>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="status-number">
|
||||
<div class='status-value'>
|
||||
<p>{{document.system.proficiency}}</p>
|
||||
</div>
|
||||
<div class="status-label">
|
||||
<h4>{{localize "DAGGERHEART.GENERAL.proficiency"}}</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="threshold-section">
|
||||
<h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.minor"}}</h4>
|
||||
<h4 class="threshold-value">{{document.system.damageThresholds.major}}</h4>
|
||||
<h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.major"}}</h4>
|
||||
<h4 class="threshold-value">{{document.system.damageThresholds.severe}}</h4>
|
||||
<h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.severe"}}</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shortcut-items-section">
|
||||
<div class="equipment-section">
|
||||
<div class="title">
|
||||
<side-line-div class="invert"></side-line-div>
|
||||
<h3>{{localize "DAGGERHEART.GENERAL.equipment"}}</h3>
|
||||
<side-line-div></side-line-div>
|
||||
</div>
|
||||
<ul class="items-sidebar-list">
|
||||
{{#if document.system.usedUnarmed}}
|
||||
{{> 'daggerheart.inventory-item-compact'
|
||||
item=document.system.usedUnarmed
|
||||
type='attack'
|
||||
}}
|
||||
{{/if}}
|
||||
{{#each equippedItems as |item|}}
|
||||
{{> 'daggerheart.inventory-item-compact'
|
||||
item=item
|
||||
type=item.type
|
||||
}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="loadout-section">
|
||||
<div class="title">
|
||||
<side-line-div class="invert"></side-line-div>
|
||||
<h3>{{localize "DAGGERHEART.GENERAL.loadout"}}</h3>
|
||||
<side-line-div></side-line-div>
|
||||
</div>
|
||||
<ul class="items-sidebar-list">
|
||||
{{#each document.system.domainCards.loadout as |card|}}
|
||||
{{> 'daggerheart.inventory-item-compact'
|
||||
item=card
|
||||
type='domainCard'
|
||||
}}
|
||||
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="experience-section">
|
||||
<div class="title">
|
||||
<side-line-div class="invert"></side-line-div>
|
||||
<h3>{{localize "DAGGERHEART.GENERAL.experience.single"}}</h3>
|
||||
<side-line-div></side-line-div>
|
||||
</div>
|
||||
<div class="experience-list">
|
||||
{{#each document.system.experiences as |experience id|}}
|
||||
<div class="experience-row" data-tooltip-text="{{experience.description}}">
|
||||
<span class="experience-value">
|
||||
{{numberFormat experience.value sign=true}}
|
||||
</span>
|
||||
<span class="experience-name">{{experience.name}}</span>
|
||||
<div class="controls">
|
||||
<a data-action="sendExpToChat" data-type="experience" data-id="{{id}}">
|
||||
<i class="fa-regular fa-message"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="character-sidebar-sheet">
|
||||
<div class="portrait {{#if isDeath}}death-roll{{/if}}">
|
||||
<img src="{{document.img}}" alt="{{document.name}}" data-action='editImage' data-edit="img">
|
||||
<a class="death-roll-btn" data-tooltip="DAGGERHEART.UI.Tooltip.makeDeathMove" {{#if
|
||||
isDeath}}data-action="makeDeathMove" {{/if}}><i class="fa-solid fa-skull death-save"></i></a>
|
||||
</div>
|
||||
<div class="info-section {{#if useResourcePips}}pip-display{{/if}}">
|
||||
<div class="resources-section">
|
||||
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.hitPoints label="DAGGERHEART.GENERAL.HitPoints.short" key="system.resources.hitPoints.value" action="toggleHitPoints" }}
|
||||
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.stress label="DAGGERHEART.GENERAL.stress" key="system.resources.stress.value" action="toggleStress" }}
|
||||
</div>
|
||||
<div class="status-section {{#if useResourcePips}}pip-display{{/if}}">
|
||||
<div class="status-number">
|
||||
<div class='status-value'>
|
||||
<p>{{document.system.evasion}}</p>
|
||||
</div>
|
||||
<div class="status-label">
|
||||
<h4>{{localize "DAGGERHEART.GENERAL.evasion"}}</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if document.system.armorScore.max}}
|
||||
<div class="status-bar armor-slots">
|
||||
{{#if useResourcePips}}
|
||||
<div class='slot-value'>
|
||||
<div class="slot-bar armor">
|
||||
{{#times document.system.armorScore.max}}
|
||||
<a class="slot" data-action="toggleArmor" data-value="{{add this 1}}">
|
||||
{{#if (gte ../document.system.armorScore.value (add this 1))}}
|
||||
<i class="fa-solid fa-shield"></i>
|
||||
{{else}}
|
||||
<i class="fa-solid fa-shield-halved"></i>
|
||||
{{/if}}
|
||||
</a>
|
||||
{{/times}}
|
||||
</div>
|
||||
<a class="slot-label" data-action="toggleArmorMangement" {{disabled (not @root.editable)}}>
|
||||
<span class="label">{{localize "DAGGERHEART.GENERAL.armorSlots"}}</span>
|
||||
<div class="slot-value-container">
|
||||
<span class="value">{{document.system.armorScore.value}} / {{document.system.armorScore.max}}</span>
|
||||
{{#if @root.editable}}<i class="fa-solid fa-gear" inert></i>{{/if}}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class='status-value'>
|
||||
<progress
|
||||
class='progress-bar stress-color'
|
||||
value='{{document.system.armorScore.value}}'
|
||||
max='{{document.system.armorScore.max}}'
|
||||
></progress>
|
||||
<input class="bar-input armor-marks-input" value="{{document.system.armorScore.value}}" type="number" id="{{document.uuid}}-armor-slots">
|
||||
<span>/</span>
|
||||
<span class="bar-label">{{document.system.armorScore.max}}</span>
|
||||
</div>
|
||||
<a class="status-label" data-action="toggleArmorMangement" {{disabled (not @root.editable)}}>
|
||||
<h4>{{localize "DAGGERHEART.GENERAL.armorSlots"}}</h4>
|
||||
{{#if @root.editable}}<i class="fa-solid fa-gear" inert></i>{{/if}}
|
||||
</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="status-number armor-slots">
|
||||
<div class='status-value'>
|
||||
<p>-</p>
|
||||
</div>
|
||||
<div class="status-label">
|
||||
<h4>{{localize "DAGGERHEART.GENERAL.armorSlots"}}</h4>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="status-number">
|
||||
<div class='status-value'>
|
||||
<p>{{document.system.proficiency}}</p>
|
||||
</div>
|
||||
<div class="status-label">
|
||||
<h4>{{localize "DAGGERHEART.GENERAL.proficiency"}}</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="threshold-section">
|
||||
<h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.minor"}}</h4>
|
||||
<h4 class="threshold-value">{{document.system.damageThresholds.major}}</h4>
|
||||
<h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.major"}}</h4>
|
||||
<h4 class="threshold-value">{{document.system.damageThresholds.severe}}</h4>
|
||||
<h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.severe"}}</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shortcut-items-section">
|
||||
<div class="equipment-section">
|
||||
<div class="title">
|
||||
<side-line-div class="invert"></side-line-div>
|
||||
<h3>{{localize "DAGGERHEART.GENERAL.equipment"}}</h3>
|
||||
<side-line-div></side-line-div>
|
||||
</div>
|
||||
<ul class="items-sidebar-list">
|
||||
{{#if document.system.usedUnarmed}}
|
||||
{{> 'daggerheart.inventory-item-compact'
|
||||
item=document.system.usedUnarmed
|
||||
type='attack'
|
||||
}}
|
||||
{{/if}}
|
||||
{{#each equippedItems as |item|}}
|
||||
{{> 'daggerheart.inventory-item-compact'
|
||||
item=item
|
||||
type=item.type
|
||||
}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="loadout-section">
|
||||
<div class="title">
|
||||
<side-line-div class="invert"></side-line-div>
|
||||
<h3>{{localize "DAGGERHEART.GENERAL.loadout"}}</h3>
|
||||
<side-line-div></side-line-div>
|
||||
</div>
|
||||
<ul class="items-sidebar-list">
|
||||
{{#each document.system.domainCards.loadout as |card|}}
|
||||
{{> 'daggerheart.inventory-item-compact'
|
||||
item=card
|
||||
type='domainCard'
|
||||
}}
|
||||
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="experience-section">
|
||||
<div class="title">
|
||||
<side-line-div class="invert"></side-line-div>
|
||||
<h3>{{localize "DAGGERHEART.GENERAL.experience.single"}}</h3>
|
||||
<side-line-div></side-line-div>
|
||||
</div>
|
||||
<div class="experience-list">
|
||||
{{#each document.system.experiences as |experience id|}}
|
||||
<div class="experience-row" data-tooltip-text="{{experience.description}}">
|
||||
<span class="experience-value">
|
||||
{{numberFormat experience.value sign=true}}
|
||||
</span>
|
||||
<span class="experience-name">{{experience.name}}</span>
|
||||
<div class="controls">
|
||||
<a data-action="sendExpToChat" data-type="experience" data-id="{{id}}">
|
||||
<i class="fa-regular fa-message"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
Loading…
Add table
Add a link
Reference in a new issue