pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-23 09:11:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add standardized HTMX conventions, interaction patterns, and migration guide for ThrillWiki UX

Browse Source
This commit is contained in:
pacnpal
2025-12-22 16:56:27 -05:00
parent 2e35f8c5d9
commit ae31e889d7
144 changed files with 25792 additions and 4440 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
backend/templates/components/status_badge_inner.html Normal file
View File

@@ -0,0 +1,99 @@
{# Inner status badge template - do not use directly, use status_badge.html instead #}
{# This template expects: status, size_classes, icon_size, and optionally other params #}
{# When manual_mode is true, use provided status_display and default classes #}
{# Otherwise use get_status_config filter from park_tags #}
{# Wrapper with optional HTMX refresh #}
{% if badge_id %}
<span id="{{ badge_id }}"
{% if refresh_url and refresh_trigger %}
hx-get="{{ refresh_url }}"
hx-trigger="{{ refresh_trigger }} from:body"
hx-swap="outerHTML"
{% endif %}>
{% endif %}
{% if manual_mode %}
{# Manual mode: use provided status_display and derive classes from status value #}
{% with badge_label=status_display|default:status badge_classes=status_classes|default:'bg-gray-100 text-gray-800' show_icon=True %}
{% if can_edit and scroll_target %}
<button type="button"
onclick="document.getElementById('{{ scroll_target }}').scrollIntoView({behavior: 'smooth'})"
class="status-badge inline-flex items-center {{ size_classes }} rounded-full font-medium transition-all hover:ring-2 hover:ring-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 cursor-pointer {{ badge_classes }}"
aria-label="View status options for {{ badge_label }}">
{% if show_icon %}
<svg class="-ml-0.5 mr-1.5 {{ icon_size }}" fill="currentColor" viewBox="0 0 8 8" aria-hidden="true">
<circle cx="4" cy="4" r="3" />
</svg>
{% endif %}
{{ badge_label }}
<i class="fas fa-chevron-down ml-1.5 text-xs" aria-hidden="true"></i>
</button>
{% elif clickable %}
<span class="status-badge inline-flex items-center {{ size_classes }} rounded-full font-medium transition-all hover:ring-2 hover:ring-blue-500 cursor-pointer {{ badge_classes }}"
role="button"
tabindex="0">
{% if show_icon %}
<svg class="-ml-0.5 mr-1.5 {{ icon_size }}" fill="currentColor" viewBox="0 0 8 8" aria-hidden="true">
<circle cx="4" cy="4" r="3" />
</svg>
{% endif %}
{{ badge_label }}
<i class="fas fa-chevron-down ml-1.5 text-xs" aria-hidden="true"></i>
</span>
{% else %}
<span class="status-badge inline-flex items-center {{ size_classes }} rounded-full font-medium {{ badge_classes }}">
{% if show_icon %}
<svg class="-ml-0.5 mr-1.5 {{ icon_size }}" fill="currentColor" viewBox="0 0 8 8" aria-hidden="true">
<circle cx="4" cy="4" r="3" />
</svg>
{% endif %}
{{ badge_label }}
</span>
{% endif %}
{% endwith %}
{% else %}
{# Auto mode: use get_status_config filter from park_tags #}
{% with status_config=status|get_status_config %}
{% if can_edit and scroll_target %}
<button type="button"
onclick="document.getElementById('{{ scroll_target }}').scrollIntoView({behavior: 'smooth'})"
class="status-badge inline-flex items-center {{ size_classes }} rounded-full font-medium transition-all hover:ring-2 hover:ring-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 cursor-pointer {{ status_config.classes }}"
aria-label="View status options for {{ status_config.label }}">
{% if status_config.icon %}
<svg class="-ml-0.5 mr-1.5 {{ icon_size }}" fill="currentColor" viewBox="0 0 8 8" aria-hidden="true">
<circle cx="4" cy="4" r="3" />
</svg>
{% endif %}
{{ status_config.label }}
<i class="fas fa-chevron-down ml-1.5 text-xs" aria-hidden="true"></i>
</button>
{% elif clickable %}
<span class="status-badge inline-flex items-center {{ size_classes }} rounded-full font-medium transition-all hover:ring-2 hover:ring-blue-500 cursor-pointer {{ status_config.classes }}"
role="button"
tabindex="0">
{% if status_config.icon %}
<svg class="-ml-0.5 mr-1.5 {{ icon_size }}" fill="currentColor" viewBox="0 0 8 8" aria-hidden="true">
<circle cx="4" cy="4" r="3" />
</svg>
{% endif %}
{{ status_config.label }}
<i class="fas fa-chevron-down ml-1.5 text-xs" aria-hidden="true"></i>
</span>
{% else %}
<span class="status-badge inline-flex items-center {{ size_classes }} rounded-full font-medium {{ status_config.classes }}">
{% if status_config.icon %}
<svg class="-ml-0.5 mr-1.5 {{ icon_size }}" fill="currentColor" viewBox="0 0 8 8" aria-hidden="true">
<circle cx="4" cy="4" r="3" />
</svg>
{% endif %}
{{ status_config.label }}
</span>
{% endif %}
{% endwith %}
{% endif %}
{% if badge_id %}
</span>
{% endif %}