various styling & structural changes to unify site themes; token-drop interaction changes across epic urls & views
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
This commit is contained in:
@@ -6,6 +6,7 @@
|
||||
>
|
||||
<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">
|
||||
@@ -14,44 +15,62 @@
|
||||
<span></span><span></span><span></span><span></span>
|
||||
</span>
|
||||
</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>
|
||||
</header>
|
||||
|
||||
<div class="token-slot{% if can_drop %} active{% elif user_reserved_slot %} pending{% elif user_filled_slot %} claimed{% 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-reject-label">PUSH TO REJECT</span>
|
||||
</div>
|
||||
{% if user_can_reject %}
|
||||
<form method="POST" action="{% url 'epic:reject_token' room.id %}" style="display:contents">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="token-reject-overlay" aria-label="Push to reject"></button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="gate-slots">
|
||||
{% for slot in slots %}
|
||||
<div
|
||||
class="gate-slot{% if slot.status == 'EMPTY' %} empty{% elif slot.status == 'FILLED' %} filled{% endif %}"
|
||||
class="gate-slot{% if slot.status == 'EMPTY' %} empty{% elif slot.status == 'FILLED' %} filled{% elif slot.status == 'RESERVED' %} reserved{% endif %}"
|
||||
data-slot="{{ slot.slot_number }}"
|
||||
>
|
||||
<span class="slot-number">{{ slot.slot_number }}</span>
|
||||
{% if slot.gamer %}
|
||||
<span class="slot-gamer">{{ slot.gamer.email }}</span>
|
||||
|
||||
{% else %}
|
||||
<span class="slot-gamer">empty</span>
|
||||
{% endif %}
|
||||
{% if slot.status == 'EMPTY' and request.user.is_authenticated and not user_has_slot %}
|
||||
<form method="POST" action="{% url "epic:drop_token" room.id slot.slot_number %}">
|
||||
{% if slot.status == 'RESERVED' and slot.gamer == request.user %}
|
||||
<form method="POST" action="{% url 'epic:confirm_token' room.id %}">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="btn drop-token-btn btn-primary btn-xl">Drop Token</button>
|
||||
{% if is_last_slot %}
|
||||
<button type="submit" class="btn btn-primary btn-xl">PICK ROLES</button>
|
||||
{% else %}
|
||||
<button type="submit" class="btn btn-confirm">OK</button>
|
||||
{% endif %}
|
||||
</form>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if request.user == room.owner %}
|
||||
<form method="POST" action="{% url 'epic:invite_gamer' room.id %}">
|
||||
{% csrf_token %}
|
||||
@@ -59,6 +78,21 @@
|
||||
<button type="submit" id="id_invite_btn" class="btn btn-primary btn-xl">Invite</button>
|
||||
</form>
|
||||
{% 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>
|
||||
|
||||
Reference in New Issue
Block a user