feat: shop tooltip price moves to the title row, right-aligned --priGn. The <h4 class="tt-title"> already has display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem (from _tooltips.scss:31-46's .tt block, originally meant for the .token-count chip pattern in Tokens row), so wrapping the name + price as two sibling <span>s inside the h4 auto-spaces: name pinned left, price pinned right, on the same baseline. .tt-price joins .tt-expiry (priRd) + .tt-date (priGn) in the shared %tt-token-fields placeholder at _tooltips.scss:8-19 — same shape (1rem) as both, --priGn coloring to mirror .tt-date's "in the green" semantics for the payment cue. Standalone <p class="tt-price"> line below the description is dropped (price now lives in the title row). 1211 IT/UT still green; no test changes needed — existing FT assertion (assertIn("$1", tithe1_tt)) reads .tt innerHTML which still contains the dollar string in either position
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -11,6 +11,11 @@
|
||||
.tt-shoptalk { font-size: 0.75rem; opacity: 0.75; }
|
||||
.tt-expiry { font-size: 1rem; color: rgba(var(--priRd), 1); }
|
||||
.tt-date { font-size: 1rem; color: rgba(var(--priGn), 1); }
|
||||
// `.tt-price` — wallet Shop tooltip. Same shape as .tt-expiry (size +
|
||||
// semantics) but --priGn for the "in the green" payment cue. Lives
|
||||
// inside the `.tt-title` h4 (which is `display: flex; justify-content:
|
||||
// space-between`) so the price floats top-right opposite the name.
|
||||
.tt-price { font-size: 1rem; color: rgba(var(--priGn), 1); }
|
||||
}
|
||||
|
||||
.token-tooltip,
|
||||
|
||||
@@ -23,12 +23,17 @@
|
||||
{# DRY-reuses the Tokens row's 4-slot tooltip pattern — same #}
|
||||
{# `.tt-title/.tt-description/.tt-shoptalk/.tt-expiry` SCSS #}
|
||||
{# classes so shop + token tooltips render as the same widget.#}
|
||||
<h4 class="tt-title">{{ item.name }}</h4>
|
||||
{# Price lives inside the h4 (which already has flex space- #}
|
||||
{# between for `.token-count`-style chips) so it pins top- #}
|
||||
{# right opposite the name — `.tt-price` styled --priGn. #}
|
||||
<h4 class="tt-title">
|
||||
<span>{{ item.name }}</span>
|
||||
<span class="tt-price">{{ item.price_display }}</span>
|
||||
</h4>
|
||||
<p class="tt-description">{{ item.description }}</p>
|
||||
{% if item.shoptalk %}
|
||||
<p class="tt-shoptalk"><em>{{ item.shoptalk }}</em></p>
|
||||
{% endif %}
|
||||
<p class="tt-price">{{ item.price_display }}</p>
|
||||
<p class="tt-expiry">{{ item.tooltip_expiry }}</p>
|
||||
</div>
|
||||
{% comment %}
|
||||
|
||||
Reference in New Issue
Block a user