Foundry/ripcrypt
1
0
Fork 0
Code Issues 22 Pull requests Releases Activity Actions

Redesign the Hero Summary Card to match the book

Browse source
This commit is contained in:
Oliver-Akins 2025-04-11 21:46:49 -06:00
parent 0135ca1124
commit 524ddee9d4
5 changed files with 36 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

2
langs/en-ca.json
View file

@ -156,7 +156,7 @@
} }
}, },
"Apps": { "Apps": {
"traits-range": "@RipCrypt.common.traits • @RipCrypt.common.range", "traits-range": "@RipCrypt.common.traits / @RipCrypt.common.range",
"grit-skills": "@RipCrypt.common.abilities.grit Skills", "grit-skills": "@RipCrypt.common.abilities.grit Skills",
"gait-skills": "@RipCrypt.common.abilities.gait Skills", "gait-skills": "@RipCrypt.common.abilities.gait Skills",
"grip-skills": "@RipCrypt.common.abilities.grip Skills", "grip-skills": "@RipCrypt.common.abilities.grip Skills",

46
templates/Apps/HeroSummaryCardV1/content.hbs
View file

@ -2,7 +2,7 @@
{{!-- * Header --}} {{!-- * Header --}}
<div class="header"> <div class="header">
<div class="image">Logo Image</div> <div class="image">Logo Image</div>
<label class="row-alt" for="{{meta.idp}}-name"> <label class="row-alt left-pill" for="{{meta.idp}}-name">
Hero Hero
</label> </label>
<div> <div>
@ -19,7 +19,7 @@
{{!-- * Armour --}} {{!-- * Armour --}}
<div class="armour"> <div class="armour">
<div class="section-header label row-alt"> <div class="section-header label row-alt right-pill">
{{ rc-i18n "RipCrypt.common.armour" }} {{ rc-i18n "RipCrypt.common.armour" }}
</div> </div>
<div class="person"> <div class="person">
@ -56,41 +56,41 @@
</div> </div>
<ul class="armour-items"> <ul class="armour-items">
<li <li
class="row-alt" class="row-alt right-pill"
data-ctx-menu="armour" data-ctx-menu="armour"
data-item-id="{{armours.head.uuid}}" data-item-id="{{armours.head.uuid}}"
> >
<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.head" }}</span> <span class="label small">{{ rc-i18n "RipCrypt.common.anatomy.head" }}</span>
<span class="value ellipses">{{ armours.head.name }}</span> <span class="value ellipses">{{ armours.head.name }}</span>
</li> </li>
<li <li
data-ctx-menu="armour" data-ctx-menu="armour"
data-item-id="{{armours.body.uuid}}" data-item-id="{{armours.body.uuid}}"
> >
<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.body" }}</span> <span class="label small">{{ rc-i18n "RipCrypt.common.anatomy.body" }}</span>
<span class="value ellipses">{{ armours.body.name }}</span> <span class="value ellipses">{{ armours.body.name }}</span>
</li> </li>
<li <li
class="row-alt" class="row-alt full-pill"
data-ctx-menu="armour" data-ctx-menu="armour"
data-item-id="{{armours.arms.uuid}}" data-item-id="{{armours.arms.uuid}}"
> >
<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.arms" }}</span> <span class="label small">{{ rc-i18n "RipCrypt.common.anatomy.arms" }}</span>
<span class="value ellipses">{{ armours.arms.name }}</span> <span class="value ellipses">{{ armours.arms.name }}</span>
</li> </li>
<li <li
data-ctx-menu="armour" data-ctx-menu="armour"
data-item-id="{{armours.legs.uuid}}" data-item-id="{{armours.legs.uuid}}"
> >
<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.legs" }}</span> <span class="label small">{{ rc-i18n "RipCrypt.common.anatomy.legs" }}</span>
<span class="value ellipses">{{ armours.legs.name }}</span> <span class="value ellipses">{{ armours.legs.name }}</span>
</li> </li>
<li <li
class="row-alt" class="row-alt full-pill"
data-ctx-menu="armour" data-ctx-menu="armour"
data-item-id="{{shield.uuid}}" data-item-id="{{shield.uuid}}"
> >
<span class="label">{{ rc-i18n "RipCrypt.common.shield" }}</span> <span class="label small">{{ rc-i18n "RipCrypt.common.shield" }}</span>
<span class="value ellipses">{{ shield.name }}</span> <span class="value ellipses">{{ shield.name }}</span>
</li> </li>
</ul> </ul>
@ -98,11 +98,11 @@
{{!-- * Fate & Advancement --}} {{!-- * Fate & Advancement --}}
<div class="fate"> <div class="fate">
<label for="{{meta.idp}}-fate-path" class="col-header"> <label for="{{meta.idp}}-fate-path" class="col-header left-pill fate-label">
{{ rc-i18n "RipCrypt.common.fate" }} {{ rc-i18n "RipCrypt.common.fate" }}
</label> </label>
<select <select
class="row-alt" class="row-alt left-pill fate-value"
id="{{meta.idp}}-fate-path" id="{{meta.idp}}-fate-path"
name="system.fate" name="system.fate"
> >
@ -172,7 +172,7 @@
<{{{ifThen meta.editable "label" "div"}}} <{{{ifThen meta.editable "label" "div"}}}
id="{{meta.idp}}-rank-label" id="{{meta.idp}}-rank-label"
for="{{meta.idp}}-rank" for="{{meta.idp}}-rank"
class="rank-label label col-header" class="rank-label label col-header right-pill"
> >
{{ rc-i18n "RipCrypt.common.rank" }} {{ rc-i18n "RipCrypt.common.rank" }}
</{{{ifThen meta.editable "label" "div"}}}> </{{{ifThen meta.editable "label" "div"}}}>
@ -180,7 +180,7 @@
<select <select
id="{{meta.idp}}-rank" id="{{meta.idp}}-rank"
name="system.level.rank" name="system.level.rank"
class="rank row-alt" class="rank row-alt right-pill"
> >
{{ rc-options level.rank.selected level.rank.options localize=true }} {{ rc-options level.rank.selected level.rank.options localize=true }}
</select> </select>
@ -197,10 +197,10 @@
<table class="weapons"> <table class="weapons">
<thead> <thead>
<tr> <tr>
<th class="label col-header">{{ rc-i18n "RipCrypt.common.weapon.plural" }}</th> <th class="label col-header left-pill">{{ rc-i18n "RipCrypt.common.weapon.singular" }}</th>
<th class="label col-header">{{ rc-i18n "RipCrypt.Apps.traits-range" }}</th> <th class="label col-header">{{ rc-i18n "RipCrypt.Apps.traits-range" }}</th>
<th class="label col-header">{{ rc-i18n "RipCrypt.common.wear" }}</th> <th class="label col-header">{{ rc-i18n "RipCrypt.common.wear" }}</th>
<th class="label col-header">{{ rc-i18n "RipCrypt.common.damage" }}</th> <th class="label col-header right-pill">{{ rc-i18n "RipCrypt.common.damage" }}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -211,10 +211,10 @@
class="{{slot.class}}" class="{{slot.class}}"
aria-hidden="true" aria-hidden="true"
> >
<td>{{ rc-i18n "RipCrypt.common.empty" }}</td> <td class="left-pill">{{ rc-i18n "RipCrypt.common.empty" }}</td>
<td></td>
<td></td> <td></td>
<td></td> <td></td>
<td {{#unless @last}}class="right-pill"{{/unless}}></td>
</tr> </tr>
{{else}} {{else}}
<tr <tr
@ -223,7 +223,7 @@
data-ctx-menu="weapon" data-ctx-menu="weapon"
data-item-id="{{ slot.data.uuid }}" data-item-id="{{ slot.data.uuid }}"
> >
<td> <td class="left-pill">
{{!-- ? NOTE: Disabled for now to see what user feedback spawns {{!-- ? NOTE: Disabled for now to see what user feedback spawns
<rc-icon <rc-icon
var:size="1rem" var:size="1rem"
@ -246,7 +246,7 @@
<td> <td>
{{ slot.data.system.wear.value }} / {{ slot.data.system.wear.max }} {{ slot.data.system.wear.value }} / {{ slot.data.system.wear.max }}
</td> </td>
<td> <td {{#unless @last}}class="right-pill"{{/unless}}>
{{ slot.data.system.damage }} {{ slot.data.system.damage }}
</td> </td>
</tr> </tr>
@ -291,13 +291,13 @@
</div> </div>
{{#unless ability.readonly}} {{#unless ability.readonly}}
<label <label
class="col-header" class="col-header {{#if @first}}left-pill{{/if}}"
for="{{@root.meta.idp}}-{{ability.id}}-input" for="{{@root.meta.idp}}-{{ability.id}}-input"
> >
{{ ability.name }} {{ ability.name }}
</label> </label>
{{else}} {{else}}
<div class="col-header label"> <div class="col-header label {{#if @first}}left-pill{{/if}}">
{{ ability.name }} {{ ability.name }}
</div> </div>
{{/unless}} {{/unless}}
@ -350,7 +350,7 @@
<span class="value">{{speed.move}}</span> <span class="value">{{speed.move}}</span>
<span class="max">{{speed.run}}</span> <span class="max">{{speed.run}}</span>
</div> </div>
<div aria-hidden="true" class="col-header label"> <div aria-hidden="true" class="col-header label right-pill">
{{ rc-i18n "RipCrypt.common.move" }} {{ rc-i18n "RipCrypt.common.move" }}
</div> </div>
</div> </div>

6
templates/Apps/HeroSummaryCardV1/style.css
View file

@ -24,7 +24,6 @@
box-sizing: border-box; box-sizing: border-box;
padding: 2px 4px; padding: 2px 4px;
text-transform: uppercase; text-transform: uppercase;
font-size: var(--font-size-14);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-weight: bold; font-weight: bold;
@ -84,6 +83,9 @@
display: grid; display: grid;
grid-template-rows: subgrid; grid-template-rows: subgrid;
} }
.fate-value {
padding-left: 2px;
}
.weapons { .weapons {
grid-column: 1 / span 4; grid-column: 1 / span 4;
@ -258,7 +260,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: nowrap; flex-wrap: nowrap;
padding: 0 2px; padding: 0 4px;
gap: 4px; gap: 4px;
min-width: 0; min-width: 0;
} }

7
templates/css/elements/generic.css Normal file
View file

@ -0,0 +1,7 @@
.ripcrypt.popover.frameless,
.ripcrypt.hud,
.ripcrypt > .window-content {
.left-pill { border-radius: 999px 0 0 999px; }
.right-pill { border-radius: 0 999px 999px 0; }
.full-pill { border-radius: 999px; }
}

1
templates/css/main.css
View file

@ -8,6 +8,7 @@
@import url("./themes/dark.css") layer(themes); @import url("./themes/dark.css") layer(themes);
/* Elements */ /* Elements */
@import url("./elements/generic.css") layer(elements);
@import url("./elements/button.css") layer(elements); @import url("./elements/button.css") layer(elements);
@import url("./elements/input.css") layer(elements); @import url("./elements/input.css") layer(elements);
@import url("./elements/lists.css") layer(elements); @import url("./elements/lists.css") layer(elements);