Fill the empty space in the actor sheet header
The header was one flex row — identity, then vitals pinned to the top right. The identity column is tall (name, rank, marksmanship, the two style hints, two age fields) and the vitals row is short, so everything under the vitals was empty blue: roughly a third of the header. Split it into two columns and stack the status column: vitals, then the derived numbers, then the readied weapons. Both of those already existed as full-width bands directly below, so nothing new is on screen — it is the same content arranged to use the space, and it puts damage modifier and readied weapons next to hit points, which is where they are read during a fight. Two sizing traps, both found by measuring rather than looking: The status column is an auto track, so its width came from max-content — the readied-weapons line, whose length is whatever the weapon names happen to be. That crushed identity into a 190px gutter with the name truncated to "Marta Hollow". width:0 + min-width:100% keeps those panels out of the measurement so the column is sized by the vitals and they stretch to match. The vitals row is wide enough on its own to do the same thing, so the columns are proportional (1fr / 1.6fr) and the vitals now wrap. Measured at 1020px: header 367px tall before, 266px after, columns 241 and 235 so they end level. At 1400px: 214px tall, columns 189 and 158, vitals unwrapped. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
slaguru666
co-authored by
Claude Opus 5
Claude Opus 5
parent
c15b13c3b9
commit
4101221eb1
+26
-2
@@ -139,12 +139,36 @@
|
||||
Header — identity
|
||||
============================================================ */
|
||||
|
||||
/* Two columns: who they are on the left, how they are on the right.
|
||||
The vitals row is the widest thing in the right column, so the derived numbers
|
||||
and the readied weapons stack underneath it and take their width from it. That
|
||||
is what fills the header — it used to be one flex row with the vitals pinned to
|
||||
the top, which left the whole area under them empty. It also puts damage
|
||||
modifier and readied weapons next to hit points, where they are actually read. */
|
||||
.rb-header {
|
||||
display: flex; gap: 14px; align-items: flex-start;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(320px, 1fr) minmax(0, 1.6fr);
|
||||
gap: 10px 14px; align-items: start;
|
||||
padding: 12px 14px 10px;
|
||||
background: transparent;
|
||||
border-bottom: 3px solid var(--rb-yellow);
|
||||
}
|
||||
.rb-ident { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
|
||||
.rb-status { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
|
||||
/* Inside the header these two are panels, not full-width bands, so they lose the
|
||||
page-width padding and rule and gain a border of their own. */
|
||||
.rb-status > .rb-derived,
|
||||
.rb-status > .rb-weaponstrip {
|
||||
padding: 6px 10px; border: 1px solid var(--rb-hairline);
|
||||
/* width:0 + min-width:100% keeps these OUT of the auto track's max-content
|
||||
measurement, so the column is sized by the vitals row and these stretch to
|
||||
match it. Without it the readied-weapons line — which is as long as the
|
||||
weapon names happen to be — sets the column width and crushes the portrait
|
||||
and name into a 190px gutter. */
|
||||
width: 0; min-width: 100%;
|
||||
}
|
||||
.rb-status > .rb-derived { gap: 14px; }
|
||||
.rb-status > .rb-weaponstrip { gap: 12px; }
|
||||
.rb-portrait {
|
||||
width: 84px; height: 84px; flex: 0 0 84px; object-fit: cover;
|
||||
border: 1px solid var(--rb-line); background: var(--rb-void);
|
||||
@@ -179,7 +203,7 @@
|
||||
}
|
||||
|
||||
/* --- vitals: HP reads as one expression --- */
|
||||
.rb-vitals { display: flex; gap: 8px; align-items: stretch; }
|
||||
.rb-vitals { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
|
||||
.rb-vitals > div {
|
||||
min-width: 78px; padding: 6px 10px; text-align: center;
|
||||
background: var(--rb-void); border: 1px solid var(--rb-line);
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<form class="ringbrp-sheet" autocomplete="off">
|
||||
|
||||
<header class="rb-header">
|
||||
<div class="rb-ident">
|
||||
<img class="rb-portrait" src="{{actor.img}}" data-edit="img" title="{{actor.name}}"/>
|
||||
<div class="rb-headline">
|
||||
<input class="rb-name" name="name" type="text" value="{{actor.name}}" placeholder="{{localize 'RINGBRP.Sheet.Name'}}"/>
|
||||
@@ -26,7 +27,9 @@
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rb-status">
|
||||
<div class="rb-vitals">
|
||||
<div class="rb-hp">
|
||||
<span class="rb-vital-label">{{localize "RINGBRP.Sheet.HP"}}</span>
|
||||
@@ -76,6 +79,39 @@
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<section class="rb-derived">
|
||||
<div class="rb-derived-group">
|
||||
<span class="rb-dl">{{localize "RINGBRP.Sheet.DamageMod"}}</span><span class="rb-dv">{{sys.damageModifier}}</span>
|
||||
</div>
|
||||
<div class="rb-derived-group">
|
||||
<span class="rb-dl">{{localize "RINGBRP.Sheet.MOV"}}</span><span class="rb-dv">{{sys.mov}}</span>
|
||||
</div>
|
||||
<div class="rb-derived-group">
|
||||
<span class="rb-dl">{{localize "RINGBRP.Sheet.Carry"}}</span>
|
||||
<span class="rb-dv {{#if sys.encumbrance.steps}}rb-warn{{/if}}">{{sys.carriedKg}} / {{sys.freeCarryKg}} kg</span>
|
||||
</div>
|
||||
<div class="rb-rolls">
|
||||
<button type="button" data-action="roll-attribute" data-attribute="stamina">{{localize "RINGBRP.Roll.stamina"}} {{sys.rolls.stamina}}</button>
|
||||
<button type="button" data-action="roll-attribute" data-attribute="idea">{{localize "RINGBRP.Roll.idea"}} {{sys.rolls.idea}}</button>
|
||||
<button type="button" data-action="roll-attribute" data-attribute="luck">{{localize "RINGBRP.Roll.luck"}} {{sys.rolls.luck}}</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="rb-weaponstrip">
|
||||
<span class="rb-strip-label">{{localize "RINGBRP.Sheet.Readied"}}</span>
|
||||
{{#each equippedWeapons as |w|}}
|
||||
<span class="rb-strip-weapon" data-item-id="{{w.id}}">
|
||||
<a data-action="roll-attack">{{w.name}}</a>
|
||||
<span class="rb-strip-dmg" data-action="roll-damage">{{#if (rbEq w.system.damage.mode "byBand")}}{{w.system.damage.short}}/{{w.system.damage.medium}}/{{w.system.damage.long}}{{else}}{{w.system.damage.formula}}{{/if}}</span>
|
||||
{{#if w.system.rangeSummary}}<span class="rb-strip-range">{{w.system.rangeSummary}}</span>{{/if}}
|
||||
{{#if w.system.ammo.capacity}}<span class="rb-strip-ammo">{{w.system.ammo.loaded}}/{{w.system.ammo.capacity}}</span>{{/if}}
|
||||
</span>
|
||||
{{else}}
|
||||
<span class="rb-strip-empty">{{localize "RINGBRP.Sheet.NothingReadied"}}</span>
|
||||
{{/each}}
|
||||
</section>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="rb-characteristics">
|
||||
@@ -90,38 +126,6 @@
|
||||
{{/each}}
|
||||
</section>
|
||||
|
||||
<section class="rb-derived">
|
||||
<div class="rb-derived-group">
|
||||
<span class="rb-dl">{{localize "RINGBRP.Sheet.DamageMod"}}</span><span class="rb-dv">{{sys.damageModifier}}</span>
|
||||
</div>
|
||||
<div class="rb-derived-group">
|
||||
<span class="rb-dl">{{localize "RINGBRP.Sheet.MOV"}}</span><span class="rb-dv">{{sys.mov}}</span>
|
||||
</div>
|
||||
<div class="rb-derived-group">
|
||||
<span class="rb-dl">{{localize "RINGBRP.Sheet.Carry"}}</span>
|
||||
<span class="rb-dv {{#if sys.encumbrance.steps}}rb-warn{{/if}}">{{sys.carriedKg}} / {{sys.freeCarryKg}} kg</span>
|
||||
</div>
|
||||
<div class="rb-rolls">
|
||||
<button type="button" data-action="roll-attribute" data-attribute="stamina">{{localize "RINGBRP.Roll.stamina"}} {{sys.rolls.stamina}}</button>
|
||||
<button type="button" data-action="roll-attribute" data-attribute="idea">{{localize "RINGBRP.Roll.idea"}} {{sys.rolls.idea}}</button>
|
||||
<button type="button" data-action="roll-attribute" data-attribute="luck">{{localize "RINGBRP.Roll.luck"}} {{sys.rolls.luck}}</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="rb-weaponstrip">
|
||||
<span class="rb-strip-label">{{localize "RINGBRP.Sheet.Readied"}}</span>
|
||||
{{#each equippedWeapons as |w|}}
|
||||
<span class="rb-strip-weapon" data-item-id="{{w.id}}">
|
||||
<a data-action="roll-attack">{{w.name}}</a>
|
||||
<span class="rb-strip-dmg" data-action="roll-damage">{{#if (rbEq w.system.damage.mode "byBand")}}{{w.system.damage.short}}/{{w.system.damage.medium}}/{{w.system.damage.long}}{{else}}{{w.system.damage.formula}}{{/if}}</span>
|
||||
{{#if w.system.rangeSummary}}<span class="rb-strip-range">{{w.system.rangeSummary}}</span>{{/if}}
|
||||
{{#if w.system.ammo.capacity}}<span class="rb-strip-ammo">{{w.system.ammo.loaded}}/{{w.system.ammo.capacity}}</span>{{/if}}
|
||||
</span>
|
||||
{{else}}
|
||||
<span class="rb-strip-empty">{{localize "RINGBRP.Sheet.NothingReadied"}}</span>
|
||||
{{/each}}
|
||||
</section>
|
||||
|
||||
<div class="rb-main">
|
||||
|
||||
<nav class="sheet-tabs rb-tabs" data-group="primary">
|
||||
|
||||
Reference in New Issue
Block a user