Finish the Skills Card redesign (closes #11)

This commit is contained in:
Oliver-Akins 2025-04-12 00:09:45 -06:00
parent 1bf1b2cd91
commit 5b74fd6beb
3 changed files with 112 additions and 47 deletions

View file

@ -104,46 +104,6 @@
{{/each}}
</ol>
<div class="ammo pill with-icon">
<rc-icon
class="ammo-info-icon"
name="icons/info-circle"
var:size="16px"
var:fill="currentColor"
></rc-icon>
<div class="label">
{{ rc-i18n "RipCrypt.common.ammo"}}
</div>
<div class="input">
{{ ammo }}
</div>
</div>
{{#each favouriteAmmo as | data |}}
{{#if data}}
<div
class="pill fav-ammo"
data-item-id="{{data.uuid}}"
>
<div>
{{data.name}}
</div>
<input
type="number"
id="{{@root.meta.idp}}-{{data.uuid}}-quantity"
value="{{data.quantity}}"
aria-label="Quantity of {{data.name}}"
data-foreign-update-on="change,blur"
data-foreign-uuid="{{data.uuid}}"
data-foreign-name="system.quantity"
>
</div>
{{else}}
<div class="pill" style="opacity: 0.5; background: var(--alt-row-background);">
{{ rc-i18n "RipCrypt.Apps.starred-ammo-placeholder" }}
</div>
{{/if}}
{{/each}}
{{!-- * Currencies --}}
<div class="currencies">
<div class="currency pill">
@ -180,4 +140,63 @@
>
</div>
</div>
</div>
{{!-- * Ammo Summary & Stars --}}
<ul class="ammo-list">
<li>
<div class="ammo pill with-icon">
<rc-icon
class="ammo-info-icon"
name="icons/info-circle"
var:size="16px"
var:fill="currentColor"
></rc-icon>
<div class="label">
{{ rc-i18n "RipCrypt.common.ammo"}}
</div>
<div class="input">
{{ ammo }}
</div>
</div>
</li>
{{#each favouriteAmmo as | data |}}
<li>
{{#if data}}
<div
class="pill fav-ammo"
data-item-id="{{data.uuid}}"
>
<div>
{{data.name}}
</div>
<input
type="number"
id="{{@root.meta.idp}}-{{data.uuid}}-quantity"
value="{{data.quantity}}"
aria-label="Quantity of {{data.name}}"
data-foreign-update-on="change,blur"
data-foreign-uuid="{{data.uuid}}"
data-foreign-name="system.quantity"
>
</div>
{{else}}
<div class="pill" style="opacity: 0.5; background: var(--alt-row-background);">
{{ rc-i18n "RipCrypt.Apps.starred-ammo-placeholder" }}
</div>
{{/if}}
</li>
{{/each}}
</ul>
{{!-- * Aura Size --}}
{{#if aura}}
<div class="aura-size dual-pill">
<span class="label" aria-hidden="true">{{rc-i18n "RipCrypt.common.aura"}}</span>
<div class="values">
<span class="value" data-tooltip="RipCrypt.tooltips.auras.normal">{{aura.normal}}</span>
<span class="slash" aria-hidden="true"></span>
<span class="value" data-tooltip="RipCrypt.tooltips.auras.heavy">{{aura.heavy}}</span>
</div>
</div>
{{/if}}
</div>