mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-07-22 02:19:54 +02:00
[UI/UX] Reduce width of adversary sidebar (#2055)
* Reduce width of adversary sidebar * Fix pips
This commit is contained in:
Carlos Fernandez
GitHub
parent
c25c4d63f7
commit
489f62a379
6 changed files with 136 additions and 138 deletions
|
|
@ -7,7 +7,7 @@ export default class AdversarySheet extends DHBaseActorSheet {
|
||||||
/** @inheritDoc */
|
/** @inheritDoc */
|
||||||
static DEFAULT_OPTIONS = {
|
static DEFAULT_OPTIONS = {
|
||||||
classes: ['adversary'],
|
classes: ['adversary'],
|
||||||
position: { width: 660, height: 766 },
|
position: { width: 645, height: 760 },
|
||||||
window: { resizable: true },
|
window: { resizable: true },
|
||||||
actions: {
|
actions: {
|
||||||
toggleHitPoints: AdversarySheet.#toggleHitPoints,
|
toggleHitPoints: AdversarySheet.#toggleHitPoints,
|
||||||
|
|
|
||||||
|
|
@ -59,7 +59,6 @@
|
||||||
.slot-value {
|
.slot-value {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 0 5px;
|
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
|
@import './sheet.less';
|
||||||
@import './features.less';
|
@import './features.less';
|
||||||
@import './header.less';
|
@import './header.less';
|
||||||
@import './sheet.less';
|
|
||||||
@import './sidebar.less';
|
@import './sidebar.less';
|
||||||
@import './effects.less';
|
@import './effects.less';
|
||||||
@import './notes.less';
|
@import './notes.less';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,35 +2,37 @@
|
||||||
@import '../../../utils/fonts.less';
|
@import '../../../utils/fonts.less';
|
||||||
|
|
||||||
.application.sheet.daggerheart.actor.dh-style.adversary {
|
.application.sheet.daggerheart.actor.dh-style.adversary {
|
||||||
|
--sidebar-width: 260px;
|
||||||
|
|
||||||
.window-content {
|
.window-content {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 275px 1fr;
|
grid-template-columns: var(--sidebar-width) 1fr;
|
||||||
grid-template-rows: auto 1fr;
|
grid-template-rows: auto 1fr;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.adversary-sidebar-sheet {
|
.adversary-sidebar-sheet {
|
||||||
grid-row: 1 / span 2;
|
grid-row: 1 / span 2;
|
||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adversary-header-sheet {
|
||||||
|
grid-row: 1;
|
||||||
|
grid-column: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
grid-row: 2;
|
||||||
|
grid-column: 2;
|
||||||
|
&.active {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.adversary-header-sheet {
|
|
||||||
grid-row: 1;
|
|
||||||
grid-column: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab {
|
|
||||||
grid-row: 2;
|
|
||||||
grid-column: 2;
|
|
||||||
&.active {
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -22,8 +22,8 @@
|
||||||
|
|
||||||
.application.sheet.daggerheart.actor.dh-style.adversary {
|
.application.sheet.daggerheart.actor.dh-style.adversary {
|
||||||
.adversary-sidebar-sheet {
|
.adversary-sidebar-sheet {
|
||||||
width: 275px;
|
width: var(--sidebar-width);
|
||||||
min-width: 275px;
|
min-width: var(--sidebar-width);
|
||||||
border-right: 1px solid light-dark(@dark-blue, @golden);
|
border-right: 1px solid light-dark(@dark-blue, @golden);
|
||||||
|
|
||||||
.portrait {
|
.portrait {
|
||||||
|
|
@ -52,7 +52,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 275px;
|
height: var(--sidebar-width);
|
||||||
}
|
}
|
||||||
|
|
||||||
.death-roll-btn {
|
.death-roll-btn {
|
||||||
|
|
@ -63,7 +63,7 @@
|
||||||
.threshold-section {
|
.threshold-section {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 7px;
|
||||||
background-color: light-dark(transparent, @dark-blue);
|
background-color: light-dark(transparent, @dark-blue);
|
||||||
color: @color-text-emphatic;
|
color: @color-text-emphatic;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
|
|
@ -107,7 +107,7 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
top: -20px;
|
top: -20px;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin-bottom: -10px;
|
margin-bottom: -16px;
|
||||||
|
|
||||||
&.pip-display {
|
&.pip-display {
|
||||||
top: -15px;
|
top: -15px;
|
||||||
|
|
@ -185,8 +185,8 @@
|
||||||
|
|
||||||
.shortcut-items-section {
|
.shortcut-items-section {
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
padding-top: 10px;
|
padding: 10px 0;
|
||||||
padding-bottom: 20px;
|
flex: 1;
|
||||||
scrollbar-gutter: stable;
|
scrollbar-gutter: stable;
|
||||||
.with-scroll-shadows();
|
.with-scroll-shadows();
|
||||||
|
|
||||||
|
|
@ -214,8 +214,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.experience-section {
|
.experience-section {
|
||||||
margin-bottom: 20px;
|
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
|
|
@ -232,21 +230,21 @@
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
align-items: center;
|
align-items: stretch;
|
||||||
|
padding: 0 4px 0 12px;
|
||||||
|
|
||||||
.experience-row {
|
.experience-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
width: 250px;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.experience-name {
|
.experience-name {
|
||||||
width: 180px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: start;
|
text-align: start;
|
||||||
font-size: var(--font-size-14);
|
font-size: var(--font-size-14);
|
||||||
|
flex: 1;
|
||||||
color: light-dark(@dark, @beige);
|
color: light-dark(@dark, @beige);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -271,9 +269,7 @@
|
||||||
|
|
||||||
.reaction-section {
|
.reaction-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0 10px;
|
margin: 10px;
|
||||||
margin-top: 20px;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
button {
|
button {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
|
|
||||||
|
|
@ -1,100 +1,102 @@
|
||||||
<aside class="adversary-sidebar-sheet">
|
<aside class="adversary-sidebar-sheet">
|
||||||
<div class="portrait {{#if (and source.system.resources.hitPoints.max (gte source.system.resources.hitPoints.value source.system.resources.hitPoints.max))}}death-roll{{/if}}">
|
<div class="portrait {{#if (and source.system.resources.hitPoints.max (gte source.system.resources.hitPoints.value source.system.resources.hitPoints.max))}}death-roll{{/if}}">
|
||||||
<img src="{{source.img}}" alt="{{source.name}}" data-action='editImage' data-edit="img">
|
<img src="{{source.img}}" alt="{{source.name}}" data-action='editImage' data-edit="img">
|
||||||
<a class="death-roll-btn"><i class="fa-solid fa-skull death-save"></i></a>
|
<a class="death-roll-btn"><i class="fa-solid fa-skull death-save"></i></a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="info-section {{#if useResourcePips}}pip-display{{/if}}">
|
<div class="info-section {{#if useResourcePips}}pip-display{{/if}}">
|
||||||
<div class="resources-section">
|
<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.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" }}
|
{{> "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>
|
||||||
<div class="status-section">
|
<div class="status-section">
|
||||||
<div class="status-number">
|
<div class="status-number">
|
||||||
<div class='status-value armor-slots'>
|
<div class='status-value armor-slots'>
|
||||||
{{#if source.system.difficulty}}
|
{{#if source.system.difficulty}}
|
||||||
<p>{{source.system.difficulty}}</p>
|
<p>{{source.system.difficulty}}</p>
|
||||||
{{else}}
|
{{else}}
|
||||||
<p>-</p>
|
<p>-</p>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
<div class="status-label">
|
<div class="status-label">
|
||||||
<h4>{{localize "DAGGERHEART.GENERAL.difficulty"}}</h4>
|
<h4>{{localize "DAGGERHEART.GENERAL.difficulty"}}</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="status-number">
|
<div class="status-number">
|
||||||
<div class='status-value armor-slots'>
|
<div class='status-value armor-slots'>
|
||||||
{{#if source.system.attack.roll.bonus includeZero=true}}
|
{{#if source.system.attack.roll.bonus includeZero=true}}
|
||||||
<p>{{numberFormat source.system.attack.roll.bonus sign=true}}</p>
|
<p>{{numberFormat source.system.attack.roll.bonus sign=true}}</p>
|
||||||
{{else}}
|
{{else}}
|
||||||
<p>-</p>
|
<p>-</p>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
<div class="status-label">
|
<div class="status-label">
|
||||||
<h4>{{localize "DAGGERHEART.GENERAL.attack"}}</h4>
|
<h4>{{localize "DAGGERHEART.GENERAL.attack"}}</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{#if (lt source.system.criticalThreshold 20)}}
|
{{#if (lt source.system.criticalThreshold 20)}}
|
||||||
<div class="status-number">
|
<div class="status-number">
|
||||||
<div class='status-value armor-slots'>
|
<div class='status-value armor-slots'>
|
||||||
<p>{{source.system.criticalThreshold}}+</p>
|
<p>{{source.system.criticalThreshold}}+</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="status-label">
|
<div class="status-label">
|
||||||
<h4>{{localize "DAGGERHEART.GENERAL.criticalShort"}}</h4>
|
<h4>{{localize "DAGGERHEART.GENERAL.criticalShort"}}</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
<div class="status-section">
|
<div class="status-section">
|
||||||
<div class="threshold-section">
|
<div class="threshold-section">
|
||||||
<h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.minor"}}</h4>
|
<h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.minor"}}</h4>
|
||||||
<h4 class="threshold-value">{{document.system.damageThresholds.major}}</h4>
|
<h4 class="threshold-value">{{document.system.damageThresholds.major}}</h4>
|
||||||
<h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.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-value">{{document.system.damageThresholds.severe}}</h4>
|
||||||
<h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.severe"}}</h4>
|
<h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.severe"}}</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="shortcut-items-section">
|
<div class="shortcut-items-section">
|
||||||
<div class="attack-section">
|
<div class="attack-section">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<side-line-div class="invert"></side-line-div>
|
<side-line-div class="invert"></side-line-div>
|
||||||
<h3>{{localize "DAGGERHEART.GENERAL.attack"}}</h3>
|
<h3>{{localize "DAGGERHEART.GENERAL.attack"}}</h3>
|
||||||
<side-line-div></side-line-div>
|
<side-line-div></side-line-div>
|
||||||
</div>
|
</div>
|
||||||
<ul class="items-sidebar-list">
|
<ul class="items-sidebar-list">
|
||||||
{{> 'daggerheart.inventory-item-compact'
|
{{> 'daggerheart.inventory-item-compact'
|
||||||
item=document.system.attack
|
item=document.system.attack
|
||||||
type='attack'
|
type='attack'
|
||||||
noCompendiumEdit=true
|
noCompendiumEdit=true
|
||||||
}}
|
}}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="experience-section">
|
<div class="experience-section">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<side-line-div class="invert"></side-line-div>
|
<side-line-div class="invert"></side-line-div>
|
||||||
<h3>{{localize "DAGGERHEART.GENERAL.experience.plural"}}</h3>
|
<h3>{{localize "DAGGERHEART.GENERAL.experience.plural"}}</h3>
|
||||||
<side-line-div></side-line-div>
|
<side-line-div></side-line-div>
|
||||||
</div>
|
</div>
|
||||||
<div class="experience-list">
|
<div class="experience-list">
|
||||||
{{#each source.system.experiences as |experience id|}}
|
{{#each source.system.experiences as |experience id|}}
|
||||||
<div class="experience-row" data-tooltip-text="{{experience.description}}">
|
<div class="experience-row" data-tooltip-text="{{experience.description}}">
|
||||||
<span class="experience-value">
|
<span class="experience-value">
|
||||||
+{{experience.value}}
|
+{{experience.value}}
|
||||||
</span>
|
</span>
|
||||||
<span class="experience-name">{{experience.name}}</span>
|
<span class="experience-name">{{experience.name}}</span>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<a data-action="sendExpToChat" data-id="{{id}}">
|
<a data-action="sendExpToChat" data-id="{{id}}">
|
||||||
<i class="fa-regular fa-message"></i>
|
<i class="fa-regular fa-message"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<line-div></line-div>
|
</div>
|
||||||
<div class="reaction-section">
|
<div class="reaction-section">
|
||||||
<button type="button" data-action="reactionRoll">{{localize "DAGGERHEART.GENERAL.Roll.reaction"}}</button>
|
<button type="button" data-action="reactionRoll">
|
||||||
</div>
|
<i class="fa-solid fa-dice"></i>
|
||||||
</div>
|
{{localize "DAGGERHEART.GENERAL.Roll.reaction"}}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue