wrapped the _gatekeeper.html partial modal to split each function into four different panels; removed deviant landscape styling to unify it with default styling (much more robust now)
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
Disco DeDisco
2026-04-05 19:10:02 -04:00
parent fecb1fddca
commit a15d91dfe6
2 changed files with 105 additions and 91 deletions

View File

@@ -6,53 +6,61 @@
<div class="gate-overlay">
<div class="gate-modal" role="dialog" aria-label="Gatekeeper">
<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 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 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>
{% 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 %}
</header>
</div>
{% 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 btn-xl">PICK ROLES</button>
</form>
{% endif %}
<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 btn-xl">PICK ROLES</button>
</form>
{% endif %}
</div>
</div>
{% if request.user == room.owner %}
<div class="form-container">
<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 %}