0bcc7567bb
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
- .btn-xl removed; .btn-primary absorbs 4rem sizing (same as PICK SIGS/PICK ROLES) - Landscape navbar .btn-primary: 3rem → 4rem to match base; XL stays 4rem (consistent) - _button-pad.scss XL: base .btn ×1.2 (2.4rem); .btn-xl block deleted - _tray.scss XL (≥1800px): portrait-style tray (slides from right, z-95) - tray.js: _isLandscape() returns false at ≥1800px; portrait code paths run throughout - Footer sidebar: background-color added so opaque footer masks tray sliding behind it - Copyright .footer-container: bottom → top in landscape sidebar - #id_room_menu: right: 2.5rem override in _room.scss XL block (cascade fix) - navbar-text XL: 0.65rem × 1.2 = 0.78rem - All landscape media queries: max-width: 1440px cutoff removed (already done prior) - btn-xl class stripped from all 5 templates; test_navbar.py assertion updated Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
90 lines
4.3 KiB
HTML
90 lines
4.3 KiB
HTML
<div
|
|
id="id_gate_wrapper"
|
|
data-gate-status-url="{% url 'epic:gate_status' room.id %}"
|
|
>
|
|
<div class="gate-backdrop"></div>
|
|
<div class="gate-overlay">
|
|
<div class="gate-modal" role="dialog" aria-label="Gatekeeper">
|
|
|
|
<div class="gate-title-panel">
|
|
<header class="gate-header">
|
|
<h1>{{ room.name }}</h1>
|
|
<div class="gate-status-wrap">
|
|
<span class="gate-status-text">{{ room.get_gate_status_display }}</span>
|
|
<span class="status-dots" aria-hidden="true">
|
|
<span></span><span></span><span></span><span></span>
|
|
</span>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
|
|
<div class="gate-top-row">
|
|
<div class="gate-main-panel">
|
|
<div class="token-slot{% if can_drop %} active{% elif user_reserved_slot %} pending{% elif user_filled_slot or carte_active %} claimed{% elif token_depleted %} depleted{% else %} locked{% endif %}">
|
|
{% if can_drop %}
|
|
<form method="POST" action="{% url 'epic:drop_token' room.id %}" style="display:contents">
|
|
{% csrf_token %}
|
|
<button type="submit" class="token-rails" aria-label="Insert token to play">
|
|
<span class="rail"></span>
|
|
<span class="rail"></span>
|
|
</button>
|
|
</form>
|
|
{% else %}
|
|
<div class="token-rails">
|
|
<span class="rail"></span>
|
|
<span class="rail"></span>
|
|
</div>
|
|
{% endif %}
|
|
<div class="token-panel">
|
|
<div class="token-denomination">1</div>
|
|
<span class="token-insert-label">INSERT TOKEN TO PLAY</span>
|
|
<span class="token-return-label">PUSH TO RETURN</span>
|
|
</div>
|
|
{% if user_can_reject %}
|
|
<form method="POST" action="{% url 'epic:return_token' room.id %}" style="display:contents">
|
|
{% csrf_token %}
|
|
<button type="submit" class="token-return-btn" aria-label="Push to return"></button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gate-roles-panel">
|
|
{% if room.gate_status == 'OPEN' %}
|
|
<form method="POST" action="{% url 'epic:pick_roles' room.id %}" style="display:contents">
|
|
{% csrf_token %}
|
|
<button type="submit" class="launch-game-btn btn btn-primary">PICK ROLES</button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{% if request.user == room.owner %}
|
|
<div class="gate-invite-panel">
|
|
<h3>Invite Friend</h3>
|
|
<form method="POST" action="{% url 'epic:invite_gamer' room.id %}" style="display:flex; gap:0.5rem; align-items:center;">
|
|
{% csrf_token %}
|
|
<input type="email" name="invitee_email" id="id_invite_email" class="form-control form-control-lg" placeholder="friend@example.com" style="flex:1; min-width:0;" hx-preserve>
|
|
<button type="submit" id="id_invite_btn" class="btn btn-confirm">OK</button>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
(function () {
|
|
clearInterval(window._gateDots);
|
|
var wrap = document.querySelector('.status-dots');
|
|
if (!wrap) return;
|
|
var dots = wrap.querySelectorAll('span');
|
|
var n = 0;
|
|
window._gateDots = setInterval(function () {
|
|
if (!document.contains(wrap)) { clearInterval(window._gateDots); return; }
|
|
dots.forEach(function (d, i) { d.textContent = i < n ? '.' : ''; });
|
|
n = (n + 1) % 5;
|
|
}, 400);
|
|
}());
|
|
</script>
|