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