Get the base favourite mechanism working so the items are visible on the skills card

This commit is contained in:
Oliver-Akins 2025-03-22 21:20:02 -06:00
parent 7d39c487dc
commit c495f45015
14 changed files with 165 additions and 27 deletions

View file

@ -1,18 +1,37 @@
<div>
{{#if ammos}}
<ul>
{{#each ammos as | ammo |}}
<div class="ammo" data-item-id="{{ammo.uuid}}">
<span class="name">{{ ammo.name }}</span>
<span class="value">{{ ammo.system.quantity }}</span>
<button
type="button"
{{ disabled @root.canPin }}
data-action="pinAmmo"
>
Pin
</button>
</div>
{{#each ammos as | data |}}
<li class="ammo" data-item-id="{{data.ammo.uuid}}">
<span class="name">{{ data.ammo.name }}</span>
<span class="value">{{ data.ammo.system.quantity }}</span>
{{#if data.favourite}}
<button
type="button"
class="icon"
data-action="unfavourite"
aria-label="Unpin ammo"
>
<rc-icon
name="icons/star"
var:size="1rem"
></rc-icon>
</button>
{{else}}
<button
type="button"
class="icon"
{{ disabled @root.atFavouriteLimit }}
data-action="favourite"
aria-label="Pin ammo"
>
<rc-icon
name="icons/star-empty"
var:size="1rem"
></rc-icon>
</button>
{{/if}}
</li>
{{/each}}
</ul>
{{else}}
@ -20,4 +39,4 @@
{{ rc-i18n "RipCrypt.Apps.no-ammo" }}
</span>
{{/if}}
</div>
</div>

View file

@ -1,8 +1,9 @@
.ripcrypt--AmmoTracker.ripcrypt--AmmoTracker {
color: var(--popover-text);
background: var(--popover-background);
padding: 4px 8px;
padding: 4px;
--row-gap: 4px;
--button-text: var(--header-text);
--button-background: var(--header-background);
@ -11,11 +12,20 @@
}
ul {
&:nth-child(even) {
color: var(--popover-alt-row-text);
background: var(--popover-alt-row-background);
--button-text: unset;
--button-background: unset;
display: flex;
flex-direction: column;
row-gap: var(--row-gap);
> li {
padding: 4px 8px;
border-radius: 999px;
&:nth-child(even) {
color: var(--popover-alt-row-text);
background: var(--popover-alt-row-background);
--button-text: unset;
--button-background: unset;
}
}
}