mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2026-02-06 12:54:41 -05:00
Add standardized HTMX conventions, interaction patterns, and migration guide for ThrillWiki UX
This commit is contained in:
pacnpal
169
backend/templates/components/ui/action_bar.html
Normal file
169
backend/templates/components/ui/action_bar.html
Normal file
@@ -0,0 +1,169 @@
|
||||
{% comment %}
|
||||
Action Bar Component
|
||||
====================
|
||||
|
||||
Standardized container for action buttons with consistent layout and spacing.
|
||||
|
||||
Purpose:
|
||||
Provides a consistent action button container for page headers, card footers,
|
||||
and section actions with responsive layout.
|
||||
|
||||
Usage Examples:
|
||||
Basic action bar:
|
||||
{% include 'components/ui/action_bar.html' %}
|
||||
{% block actions %}
|
||||
<a href="{% url 'item:edit' %}" class="btn btn-primary">Edit</a>
|
||||
{% endblock %}
|
||||
{% endinclude %}
|
||||
|
||||
With primary and secondary actions:
|
||||
{% include 'components/ui/action_bar.html' with
|
||||
primary_action_url='/create/'
|
||||
primary_action_text='Create Park'
|
||||
primary_action_icon='fas fa-plus'
|
||||
secondary_action_url='/import/'
|
||||
secondary_action_text='Import'
|
||||
%}
|
||||
|
||||
Between alignment (cancel left, submit right):
|
||||
{% include 'components/ui/action_bar.html' with align='between' %}
|
||||
|
||||
Multiple actions via slot:
|
||||
{% include 'components/ui/action_bar.html' %}
|
||||
{% block actions %}
|
||||
<button class="btn btn-ghost">Preview</button>
|
||||
<button class="btn btn-outline">Save Draft</button>
|
||||
<button class="btn btn-primary">Publish</button>
|
||||
{% endblock %}
|
||||
{% endinclude %}
|
||||
|
||||
Parameters:
|
||||
Optional:
|
||||
- align: 'left', 'right', 'center', 'between' (default: 'right')
|
||||
- mobile_stack: Stack vertically on mobile (default: True)
|
||||
- show_border: Show top border (default: False)
|
||||
- padding: Add padding (default: True)
|
||||
|
||||
Primary action:
|
||||
- primary_action_url: URL for primary button
|
||||
- primary_action_text: Primary button text
|
||||
- primary_action_icon: Primary button icon class
|
||||
- primary_action_class: Primary button CSS class (default: 'btn-primary')
|
||||
|
||||
Secondary action:
|
||||
- secondary_action_url: URL for secondary button
|
||||
- secondary_action_text: Secondary button text
|
||||
- secondary_action_icon: Secondary button icon class
|
||||
- secondary_action_class: Secondary button CSS class (default: 'btn-outline')
|
||||
|
||||
Tertiary action:
|
||||
- tertiary_action_url: URL for tertiary button
|
||||
- tertiary_action_text: Tertiary button text
|
||||
- tertiary_action_class: Tertiary button CSS class (default: 'btn-ghost')
|
||||
|
||||
Blocks:
|
||||
- actions: Custom action buttons slot
|
||||
|
||||
Dependencies:
|
||||
- Tailwind CSS for styling
|
||||
- Font Awesome icons (optional)
|
||||
- Button component styles from components.css
|
||||
|
||||
Accessibility:
|
||||
- Uses proper button/link semantics
|
||||
- Focus states for keyboard navigation
|
||||
{% endcomment %}
|
||||
|
||||
{% with align=align|default:'right' mobile_stack=mobile_stack|default:True show_border=show_border|default:False padding=padding|default:True %}
|
||||
|
||||
<div class="action-bar flex flex-wrap items-center gap-3
|
||||
{% if mobile_stack %}flex-col sm:flex-row{% endif %}
|
||||
{% if padding %}py-4{% endif %}
|
||||
{% if show_border %}pt-4 border-t border-border{% endif %}
|
||||
{% if align == 'left' %}justify-start
|
||||
{% elif align == 'center' %}justify-center
|
||||
{% elif align == 'between' %}justify-between
|
||||
{% else %}justify-end{% endif %}">
|
||||
|
||||
{# Left side actions (for 'between' alignment) #}
|
||||
{% if align == 'between' %}
|
||||
<div class="flex items-center gap-3 {% if mobile_stack %}w-full sm:w-auto{% endif %}">
|
||||
{# Tertiary action (left side) #}
|
||||
{% if tertiary_action_url or tertiary_action_text %}
|
||||
{% if tertiary_action_url %}
|
||||
<a href="{{ tertiary_action_url }}"
|
||||
class="{{ tertiary_action_class|default:'btn btn-ghost' }} {% if mobile_stack %}w-full sm:w-auto{% endif %}">
|
||||
{% if tertiary_action_icon %}<i class="{{ tertiary_action_icon }} mr-2" aria-hidden="true"></i>{% endif %}
|
||||
{{ tertiary_action_text }}
|
||||
</a>
|
||||
{% else %}
|
||||
<button type="button"
|
||||
class="{{ tertiary_action_class|default:'btn btn-ghost' }} {% if mobile_stack %}w-full sm:w-auto{% endif %}"
|
||||
onclick="history.back()">
|
||||
{% if tertiary_action_icon %}<i class="{{ tertiary_action_icon }} mr-2" aria-hidden="true"></i>{% endif %}
|
||||
{{ tertiary_action_text|default:'Cancel' }}
|
||||
</button>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Main actions group #}
|
||||
<div class="flex items-center gap-3 {% if mobile_stack %}w-full sm:w-auto {% if align == 'between' %}justify-end{% endif %}{% endif %}">
|
||||
{# Custom actions slot #}
|
||||
{% block actions %}{% endblock %}
|
||||
|
||||
{# Tertiary action (non-between alignment) #}
|
||||
{% if tertiary_action_text and align != 'between' %}
|
||||
{% if tertiary_action_url %}
|
||||
<a href="{{ tertiary_action_url }}"
|
||||
class="{{ tertiary_action_class|default:'btn btn-ghost' }} {% if mobile_stack %}w-full sm:w-auto{% endif %}">
|
||||
{% if tertiary_action_icon %}<i class="{{ tertiary_action_icon }} mr-2" aria-hidden="true"></i>{% endif %}
|
||||
{{ tertiary_action_text }}
|
||||
</a>
|
||||
{% else %}
|
||||
<button type="button"
|
||||
class="{{ tertiary_action_class|default:'btn btn-ghost' }} {% if mobile_stack %}w-full sm:w-auto{% endif %}">
|
||||
{% if tertiary_action_icon %}<i class="{{ tertiary_action_icon }} mr-2" aria-hidden="true"></i>{% endif %}
|
||||
{{ tertiary_action_text }}
|
||||
</button>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{# Secondary action #}
|
||||
{% if secondary_action_text %}
|
||||
{% if secondary_action_url %}
|
||||
<a href="{{ secondary_action_url }}"
|
||||
class="{{ secondary_action_class|default:'btn btn-outline' }} {% if mobile_stack %}w-full sm:w-auto{% endif %}">
|
||||
{% if secondary_action_icon %}<i class="{{ secondary_action_icon }} mr-2" aria-hidden="true"></i>{% endif %}
|
||||
{{ secondary_action_text }}
|
||||
</a>
|
||||
{% else %}
|
||||
<button type="button"
|
||||
class="{{ secondary_action_class|default:'btn btn-outline' }} {% if mobile_stack %}w-full sm:w-auto{% endif %}">
|
||||
{% if secondary_action_icon %}<i class="{{ secondary_action_icon }} mr-2" aria-hidden="true"></i>{% endif %}
|
||||
{{ secondary_action_text }}
|
||||
</button>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{# Primary action #}
|
||||
{% if primary_action_text %}
|
||||
{% if primary_action_url %}
|
||||
<a href="{{ primary_action_url }}"
|
||||
class="{{ primary_action_class|default:'btn btn-primary' }} {% if mobile_stack %}w-full sm:w-auto{% endif %}">
|
||||
{% if primary_action_icon %}<i class="{{ primary_action_icon }} mr-2" aria-hidden="true"></i>{% endif %}
|
||||
{{ primary_action_text }}
|
||||
</a>
|
||||
{% else %}
|
||||
<button type="submit"
|
||||
class="{{ primary_action_class|default:'btn btn-primary' }} {% if mobile_stack %}w-full sm:w-auto{% endif %}">
|
||||
{% if primary_action_icon %}<i class="{{ primary_action_icon }} mr-2" aria-hidden="true"></i>{% endif %}
|
||||
{{ primary_action_text }}
|
||||
</button>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endwith %}
|
||||
Reference in New Issue
Block a user