game kit gear menu + login form UX polish; left-side position indicator flip
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
game kit: new Applet model rows (context=game-kit) for Trinkets, Tokens, Card Decks, Dice Sets via applets migration 0008; _game_kit_context() helper in gameboard.views; toggle_game_kit_sections view + URL; new _game_kit_sections.html (HTMX-swappable, visibility-conditional) + _game_kit_applet_menu.html partials; game_kit.html wired to gear btn + menu; Dice Sets now renders _forthcoming.html partial; 16 new green ITs in GameKitViewTest + ToggleGameKitSectionsViewTest login form: .input-group now position:fixed + vertically centred (top:50%) across all breakpoints as default; landscape block reduced to left/right sidebar offsets only; form-control width 24rem, text-align:center; alert block moved below h2 in base.html; alert margin 0.75rem all sides; home.html header switches between Howdy Stranger (anon) and Dashboard (authed) room.html position indicators: slots 3/4/5 (AC/SC/EC) column order flipped via SCSS data-slot selectors so .fa-chair sits table-side and label+status icon sit outward Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -2,7 +2,13 @@
|
||||
{% load lyric_extras %}
|
||||
|
||||
{% block title_text %}Dashboard{% endblock title_text %}
|
||||
{% block header_text %}<span>Dash</span>board{% endblock header_text %}
|
||||
{% block header_text %}
|
||||
{% if user.is_authenticated %}
|
||||
<span>Dash</span>board
|
||||
{% else %}
|
||||
<span>Howdy </span>stranger
|
||||
{% endif %}
|
||||
{% endblock header_text %}
|
||||
|
||||
{% block scripts %}
|
||||
{% include "apps/dashboard/_partials/_scripts.html" %}
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
<div id="id_game_kit_menu" style="display:none;">
|
||||
<form
|
||||
hx-post="{% url "toggle_game_kit_sections" %}"
|
||||
hx-target="#id_gk_sections_container"
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
{% csrf_token %}
|
||||
{% for entry in applets %}
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="applets"
|
||||
value="{{ entry.applet.slug }}"
|
||||
{% if entry.visible %}checked{% endif %}
|
||||
>
|
||||
{{ entry.applet.name }}
|
||||
</label>
|
||||
{% endfor %}
|
||||
<div class="menu-btns">
|
||||
<button type="submit" class="btn btn-confirm">OK</button>
|
||||
<button type="button" class="btn btn-cancel applet-menu-cancel">NVM</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,81 @@
|
||||
<div id="id_gk_sections_container">
|
||||
{% for entry in applets %}
|
||||
{% if entry.applet.slug == 'gk-trinkets' and entry.visible %}
|
||||
<section id="id_gk_trinkets" style="--applet-cols: 6; --applet-rows: 3;">
|
||||
<h2>Trinkets</h2>
|
||||
<div class="gk-items">
|
||||
{% if pass_token %}
|
||||
<div class="gk-trinket-card" data-token-id="{{ pass_token.pk }}">
|
||||
<i class="fa-solid fa-clipboard"></i>
|
||||
<span>{{ pass_token.tooltip_name }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if carte %}
|
||||
<div class="gk-trinket-card" data-token-id="{{ carte.pk }}">
|
||||
<i class="fa-solid fa-money-check"></i>
|
||||
<span>{{ carte.tooltip_name }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if coin %}
|
||||
<div class="gk-trinket-card" data-token-id="{{ coin.pk }}">
|
||||
<i class="fa-solid fa-medal"></i>
|
||||
<span>{{ coin.tooltip_name }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if not pass_token and not carte and not coin %}
|
||||
<p class="gk-empty"><em>No trinkets yet.</em></p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{% if entry.applet.slug == 'gk-tokens' and entry.visible %}
|
||||
<section id="id_gk_tokens" style="--applet-cols: 6; --applet-rows: 3;">
|
||||
<h2>Tokens</h2>
|
||||
<div class="gk-items">
|
||||
{% for token in free_tokens %}
|
||||
<div class="gk-token-card" data-token-id="{{ token.pk }}">
|
||||
<i class="fa-solid fa-coins"></i>
|
||||
<span>{{ token.tooltip_name }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% for token in tithe_tokens %}
|
||||
<div class="gk-token-card" data-token-id="{{ token.pk }}">
|
||||
<i class="fa-solid fa-hand-holding-dollar"></i>
|
||||
<span>{{ token.tooltip_name }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if not free_tokens and not tithe_tokens %}
|
||||
<p class="gk-empty"><em>No tokens yet.</em></p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{% if entry.applet.slug == 'gk-decks' and entry.visible %}
|
||||
<section id="id_gk_decks" style="--applet-cols: 6; --applet-rows: 3;">
|
||||
<h2>Card Decks</h2>
|
||||
<div class="gk-items">
|
||||
{% for deck in unlocked_decks %}
|
||||
<div class="gk-deck-card" data-deck-id="{{ deck.pk }}">
|
||||
<i class="fa-regular fa-id-badge"></i>
|
||||
<span>{{ deck.name }}</span>
|
||||
<small>{{ deck.card_count }} cards</small>
|
||||
</div>
|
||||
{% empty %}
|
||||
<p class="gk-empty"><em>No decks unlocked.</em></p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{% if entry.applet.slug == 'gk-dice' and entry.visible %}
|
||||
<section id="id_gk_dice" style="--applet-cols: 6; --applet-rows: 3;">
|
||||
<h2>Dice Sets</h2>
|
||||
<div class="gk-items">
|
||||
{% include "core/_partials/_forthcoming.html" %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -6,81 +6,10 @@
|
||||
|
||||
{% block content %}
|
||||
<div class="gameboard-page">
|
||||
{% include "apps/applets/_partials/_gear.html" with menu_id="id_game_kit_menu" %}
|
||||
{% include "apps/gameboard/_partials/_game_kit_applet_menu.html" %}
|
||||
<div id="id_game_kit_applets_container">
|
||||
|
||||
<section id="id_gk_trinkets" style="--applet-cols: 6; --applet-rows: 3;">
|
||||
<h2>Trinkets</h2>
|
||||
<div class="gk-items">
|
||||
{% if pass_token %}
|
||||
<div class="gk-trinket-card" data-token-id="{{ pass_token.pk }}">
|
||||
<i class="fa-solid fa-clipboard"></i>
|
||||
<span>{{ pass_token.tooltip_name }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if carte %}
|
||||
<div class="gk-trinket-card" data-token-id="{{ carte.pk }}">
|
||||
<i class="fa-solid fa-money-check"></i>
|
||||
<span>{{ carte.tooltip_name }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if coin %}
|
||||
<div class="gk-trinket-card" data-token-id="{{ coin.pk }}">
|
||||
<i class="fa-solid fa-medal"></i>
|
||||
<span>{{ coin.tooltip_name }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if not pass_token and not carte and not coin %}
|
||||
<p class="gk-empty"><em>No trinkets yet.</em></p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="id_gk_tokens" style="--applet-cols: 6; --applet-rows: 3;">
|
||||
<h2>Tokens</h2>
|
||||
<div class="gk-items">
|
||||
{% for token in free_tokens %}
|
||||
<div class="gk-token-card" data-token-id="{{ token.pk }}">
|
||||
<i class="fa-solid fa-coins"></i>
|
||||
<span>{{ token.tooltip_name }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% for token in tithe_tokens %}
|
||||
<div class="gk-token-card" data-token-id="{{ token.pk }}">
|
||||
<i class="fa-solid fa-hand-holding-dollar"></i>
|
||||
<span>{{ token.tooltip_name }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if not free_tokens and not tithe_tokens %}
|
||||
<p class="gk-empty"><em>No tokens yet.</em></p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="id_gk_decks" style="--applet-cols: 6; --applet-rows: 3;">
|
||||
<h2>Card Decks</h2>
|
||||
<div class="gk-items">
|
||||
{% for deck in unlocked_decks %}
|
||||
<div class="gk-deck-card" data-deck-id="{{ deck.pk }}">
|
||||
<i class="fa-regular fa-id-badge"></i>
|
||||
<span>{{ deck.name }}</span>
|
||||
<small>{{ deck.card_count }} cards</small>
|
||||
</div>
|
||||
{% empty %}
|
||||
<p class="gk-empty"><em>No decks unlocked.</em></p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="id_gk_dice" style="--applet-cols: 6; --applet-rows: 3;">
|
||||
<h2>Dice Sets</h2>
|
||||
<div class="gk-items">
|
||||
<div class="gk-placeholder">
|
||||
<i class="fa-solid fa-dice"></i>
|
||||
<span>Coming soon</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% include "apps/gameboard/_partials/_game_kit_sections.html" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -21,6 +21,14 @@
|
||||
<div class="container">
|
||||
{% include "core/_partials/_navbar.html" %}
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<h2 >{% block header_text %}{% endblock header_text %}</h2>
|
||||
{% block extra_header %}
|
||||
{% endblock extra_header %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if messages %}
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
@@ -35,14 +43,6 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<h2 >{% block header_text %}{% endblock header_text %}</h2>
|
||||
{% block extra_header %}
|
||||
{% endblock extra_header %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user