TOOLTIPS: wallet tokens refactor — .token-tooltip → .tt + child classes
- _applet-wallet-tokens.html: all 6 token blocks (pass, coin, free×2, tithe×2)
updated to .tt wrapper + .tt-title / .tt-description / .tt-shoptalk / .tt-expiry
child classes; small→p.tt-shoptalk, p.expiry→p.tt-expiry
- wallet.js: querySelector('.token-tooltip') → querySelector('.tt') in initWalletTooltips
13 FTs green (trinket_carte_blanche + game_kit + gameboard)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -69,7 +69,7 @@ function initWalletTooltips() {
|
||||
if (!portal) return;
|
||||
|
||||
document.querySelectorAll('.wallet-tokens .token').forEach(token => {
|
||||
const tooltip = token.querySelector('.token-tooltip');
|
||||
const tooltip = token.querySelector('.tt');
|
||||
if (!tooltip) return;
|
||||
|
||||
token.addEventListener('mouseenter', () => {
|
||||
|
||||
@@ -7,25 +7,25 @@
|
||||
{% if pass_token %}
|
||||
<div id="id_pass_token" class="token">
|
||||
<i class="fa-solid fa-clipboard"></i>
|
||||
<div class="token-tooltip">
|
||||
<h4>{{ pass_token.tooltip_name }}</h4>
|
||||
<p>{{ pass_token.tooltip_description }}</p>
|
||||
<div class="tt">
|
||||
<h4 class="tt-title">{{ pass_token.tooltip_name }}</h4>
|
||||
<p class="tt-description">{{ pass_token.tooltip_description }}</p>
|
||||
{% if pass_token.tooltip_shoptalk %}
|
||||
<small><em>{{ pass_token.tooltip_shoptalk }}</em></small>
|
||||
<p class="tt-shoptalk"><em>{{ pass_token.tooltip_shoptalk }}</em></p>
|
||||
{% endif %}
|
||||
<p class="expiry">{{ pass_token.tooltip_expiry }}</p>
|
||||
<p class="tt-expiry">{{ pass_token.tooltip_expiry }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% elif coin %}
|
||||
<div id="id_coin_on_a_string" class="token">
|
||||
<i class="fa-solid fa-medal"></i>
|
||||
<div class="token-tooltip">
|
||||
<h4>{{ coin.tooltip_name }}</h4>
|
||||
<p>{{ coin.tooltip_description }}</p>
|
||||
<div class="tt">
|
||||
<h4 class="tt-title">{{ coin.tooltip_name }}</h4>
|
||||
<p class="tt-description">{{ coin.tooltip_description }}</p>
|
||||
{% if coin.tooltip_shoptalk %}
|
||||
<small><em>{{ coin.tooltip_shoptalk }}</em></small>
|
||||
<p class="tt-shoptalk"><em>{{ coin.tooltip_shoptalk }}</em></p>
|
||||
{% endif %}
|
||||
<p class="expiry">{{ coin.tooltip_expiry }}</p>
|
||||
<p class="tt-expiry">{{ coin.tooltip_expiry }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -33,23 +33,23 @@
|
||||
{% with free_tokens.0 as token %}
|
||||
<div id="id_free_token" class="token">
|
||||
<i class="fa-solid fa-coins"></i>
|
||||
<div class="token-tooltip">
|
||||
<h4>{{ token.tooltip_name }}{% if free_count > 1 %} <span class="token-count">(×{{ free_count }})</span>{% endif %}</h4>
|
||||
<p>{{ token.tooltip_description }}</p>
|
||||
<div class="tt">
|
||||
<h4 class="tt-title">{{ token.tooltip_name }}{% if free_count > 1 %} <span class="token-count">(×{{ free_count }})</span>{% endif %}</h4>
|
||||
<p class="tt-description">{{ token.tooltip_description }}</p>
|
||||
{% if token.tooltip_shoptalk %}
|
||||
<small><em>{{ token.tooltip_shoptalk }}</em></small>
|
||||
<p class="tt-shoptalk"><em>{{ token.tooltip_shoptalk }}</em></p>
|
||||
{% endif %}
|
||||
<p class="expiry">{{ token.tooltip_expiry }}</p>
|
||||
<p class="tt-expiry">{{ token.tooltip_expiry }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endwith %}
|
||||
{% else %}
|
||||
<div id="id_free_token_empty" class="token token--empty">
|
||||
<i class="fa-solid fa-coins"></i>
|
||||
<div class="token-tooltip">
|
||||
<h4>Free Token</h4>
|
||||
<p>0 owned</p>
|
||||
<p class="expiry">find one around</p>
|
||||
<div class="tt">
|
||||
<h4 class="tt-title">Free Token</h4>
|
||||
<p class="tt-description">0 owned</p>
|
||||
<p class="tt-expiry">find one around</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -57,20 +57,20 @@
|
||||
{% with tithe_tokens.0 as token %}
|
||||
<div id="id_tithe_token" class="token">
|
||||
<i class="fa-solid fa-piggy-bank"></i>
|
||||
<div class="token-tooltip">
|
||||
<h4>{{ token.tooltip_name }}{% if tithe_count > 1 %} <span class="token-count">(×{{ tithe_count }})</span>{% endif %}</h4>
|
||||
<p>{{ token.tooltip_description }}</p>
|
||||
<p class="expiry">{{ token.tooltip_expiry }}</p>
|
||||
<div class="tt">
|
||||
<h4 class="tt-title">{{ token.tooltip_name }}{% if tithe_count > 1 %} <span class="token-count">(×{{ tithe_count }})</span>{% endif %}</h4>
|
||||
<p class="tt-description">{{ token.tooltip_description }}</p>
|
||||
<p class="tt-expiry">{{ token.tooltip_expiry }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endwith %}
|
||||
{% else %}
|
||||
<div id="id_tithe_token_empty" class="token token--empty">
|
||||
<i class="fa-solid fa-piggy-bank"></i>
|
||||
<div class="token-tooltip">
|
||||
<h4>Tithe Token</h4>
|
||||
<p>0 owned</p>
|
||||
<p class="expiry">purchase one above</p>
|
||||
<div class="tt">
|
||||
<h4 class="tt-title">Tithe Token</h4>
|
||||
<p class="tt-description">0 owned</p>
|
||||
<p class="tt-expiry">purchase one above</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user