Display all of the pinned ammo on the sheet and tweak the list header style.

This commit is contained in:
Oliver-Akins 2025-04-05 00:43:44 -06:00
parent c495f45015
commit a7e0fe899a
5 changed files with 32 additions and 25 deletions

View file

@ -104,7 +104,7 @@
{{/each}}
</ol>
<div class="ammo half-pill with-icon">
<div class="ammo pill with-icon">
<rc-icon
class="ammo-info-icon"
name="icons/info-circle"
@ -121,12 +121,12 @@
{{#each favouriteAmmo as | data |}}
{{#if data}}
<div
class="half-pill fav-ammo"
class="pill fav-ammo"
data-item-id="{{data.uuid}}"
>
<label for="{{@root.meta.idp}}-{{data.uuid}}-quantity">
<div>
{{data.name}}
</label>
</div>
<input
type="number"
value="{{data.quantity}}"
@ -134,12 +134,15 @@
>
</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 half-pill">
<div class="currency pill">
<label for="{{meta.idp}}-gold" >
{{ rc-i18n "RipCrypt.common.currency.gold"}}
</label>
@ -150,7 +153,7 @@
value="0"
>
</div>
<div class="currency half-pill">
<div class="currency pill">
<label for="{{meta.idp}}-silver" >
{{ rc-i18n "RipCrypt.common.currency.silver"}}
</label>
@ -161,7 +164,7 @@
value="0"
>
</div>
<div class="currency half-pill">
<div class="currency pill">
<label for="{{meta.idp}}-copper" >
{{ rc-i18n "RipCrypt.common.currency.copper"}}
</label>

View file

@ -36,6 +36,7 @@
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 999px;
}
.skill-list {
display: grid;
@ -107,33 +108,30 @@
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.half-pill {
.pill {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
align-items: center;
background: var(--section-header-background);
border-radius: 0 999px 999px 0;
border-radius: 999px;
color: var(--section-header-text);
padding: 2px 0 2px 4px;
--input-background: var(--base-background);
--input-text: var(--base-text);
&.with-icon {
grid-template-columns: min-content minmax(0, 1.5fr) minmax(0, 1fr);
gap: 4px;
padding: 2px 0 2px 4px;
.label {
padding: 0;
}
}
label, .label {
padding: 0;
white-space: nowrap;
text-overflow: ellipsis;
}
input, .input {
margin: 2px;
margin: 0 2px 0 0;
border-radius: 999px;
text-align: center;
}

View file

@ -1,4 +1,4 @@
<div>
<div data-tooltip-direction="RIGHT">
{{#if ammos}}
<ul>
{{#each ammos as | data |}}
@ -10,7 +10,8 @@
type="button"
class="icon"
data-action="unfavourite"
aria-label="Unpin ammo"
aria-label="{{ rc-i18n "RipCrypt.Apps.AmmoTracker.unstar-button" name=data.ammo.name }}"
data-tooltip="{{ rc-i18n "RipCrypt.Apps.AmmoTracker.unstar-button-tooltip" name=data.ammo.name }}"
>
<rc-icon
name="icons/star"
@ -23,7 +24,8 @@
class="icon"
{{ disabled @root.atFavouriteLimit }}
data-action="favourite"
aria-label="Pin ammo"
aria-label="{{ rc-i18n "RipCrypt.Apps.AmmoTracker.star-button" name=data.ammo.name }}"
data-tooltip="{{ rc-i18n "RipCrypt.Apps.AmmoTracker.star-button-tooltip" name=data.ammo.name }}"
>
<rc-icon
name="icons/star-empty"