Display all of the pinned ammo on the sheet and tweak the list header style.
This commit is contained in:
parent
c495f45015
commit
a7e0fe899a
5 changed files with 32 additions and 25 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue