mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-23 16:31:08 -05:00
Add standardized HTMX conventions, interaction patterns, and migration guide for ThrillWiki UX
This commit is contained in:
pacnpal
141
backend/templates/components/layout/page_header.html
Normal file
141
backend/templates/components/layout/page_header.html
Normal file
@@ -0,0 +1,141 @@
|
||||
{% comment %}
|
||||
Page Header Component
|
||||
=====================
|
||||
|
||||
Standardized page header with title, subtitle, icon, and action buttons.
|
||||
|
||||
Purpose:
|
||||
Provides consistent page header layout across the application with
|
||||
responsive design and optional breadcrumb integration.
|
||||
|
||||
Usage Examples:
|
||||
Basic header:
|
||||
{% include 'components/layout/page_header.html' with title='Parks' %}
|
||||
|
||||
With subtitle:
|
||||
{% include 'components/layout/page_header.html' with title='Cedar Point' subtitle='Sandusky, Ohio' %}
|
||||
|
||||
With icon:
|
||||
{% include 'components/layout/page_header.html' with title='Parks' icon='fas fa-map-marker-alt' %}
|
||||
|
||||
With actions:
|
||||
{% include 'components/layout/page_header.html' with title='Parks' %}
|
||||
{% block page_header_actions %}
|
||||
<a href="{% url 'parks:create' %}" class="btn btn-primary">
|
||||
<i class="fas fa-plus mr-2"></i>Add Park
|
||||
</a>
|
||||
{% endblock %}
|
||||
{% endinclude %}
|
||||
|
||||
Full example:
|
||||
{% include 'components/layout/page_header.html' with
|
||||
title=park.name
|
||||
subtitle=park.location
|
||||
icon='fas fa-building'
|
||||
show_breadcrumbs=True
|
||||
badge_text='Active'
|
||||
badge_variant='success'
|
||||
%}
|
||||
|
||||
Parameters:
|
||||
Required:
|
||||
- title: Page title text
|
||||
|
||||
Optional:
|
||||
- subtitle: Subtitle or description
|
||||
- icon: Icon class (e.g., 'fas fa-home')
|
||||
- show_breadcrumbs: Include breadcrumbs (default: False)
|
||||
- badge_text: Status badge text
|
||||
- badge_variant: 'success', 'warning', 'error', 'info' (default: 'info')
|
||||
- size: 'sm', 'md', 'lg' for title size (default: 'lg')
|
||||
- align: 'left', 'center' (default: 'left')
|
||||
- border: Show bottom border (default: True)
|
||||
- actions_slot: HTML for action buttons
|
||||
|
||||
Blocks:
|
||||
- page_header_actions: Action buttons area
|
||||
|
||||
Dependencies:
|
||||
- Tailwind CSS for styling
|
||||
- Font Awesome icons (optional)
|
||||
- breadcrumbs.html component (if show_breadcrumbs=True)
|
||||
|
||||
Accessibility:
|
||||
- Uses semantic heading element
|
||||
- Actions have proper button semantics
|
||||
{% endcomment %}
|
||||
|
||||
{% with size=size|default:'lg' align=align|default:'left' border=border|default:True show_breadcrumbs=show_breadcrumbs|default:False %}
|
||||
|
||||
<header class="page-header mb-6 {% if border %}pb-6 border-b border-border{% endif %}">
|
||||
{# Breadcrumbs (optional) #}
|
||||
{% if show_breadcrumbs and breadcrumbs %}
|
||||
<div class="mb-4">
|
||||
{% include 'components/navigation/breadcrumbs.html' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between {% if align == 'center' %}sm:justify-center text-center{% endif %}">
|
||||
{# Title Section #}
|
||||
<div class="flex-1 min-w-0 {% if align == 'center' %}flex flex-col items-center{% endif %}">
|
||||
<div class="flex items-center gap-3 {% if align == 'center' %}justify-center{% endif %}">
|
||||
{# Icon #}
|
||||
{% if icon %}
|
||||
<div class="flex-shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<i class="{{ icon }} text-primary {% if size == 'sm' %}text-lg{% elif size == 'lg' %}text-xl sm:text-2xl{% else %}text-xl{% endif %}" aria-hidden="true"></i>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Title and Subtitle #}
|
||||
<div class="min-w-0">
|
||||
<div class="flex items-center gap-3 flex-wrap">
|
||||
<h1 class="font-bold text-foreground truncate
|
||||
{% if size == 'sm' %}text-xl sm:text-2xl
|
||||
{% elif size == 'lg' %}text-2xl sm:text-3xl lg:text-4xl
|
||||
{% else %}text-2xl sm:text-3xl{% endif %}">
|
||||
{{ title }}
|
||||
</h1>
|
||||
|
||||
{# Status Badge #}
|
||||
{% if badge_text %}
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
|
||||
{% if badge_variant == 'success' %}bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300
|
||||
{% elif badge_variant == 'warning' %}bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300
|
||||
{% elif badge_variant == 'error' %}bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300
|
||||
{% else %}bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300{% endif %}">
|
||||
{{ badge_text }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# Subtitle #}
|
||||
{% if subtitle %}
|
||||
<p class="mt-1 text-muted-foreground truncate
|
||||
{% if size == 'sm' %}text-sm{% elif size == 'lg' %}text-base sm:text-lg{% else %}text-base{% endif %}">
|
||||
{{ subtitle }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{# Meta info slot #}
|
||||
{% if meta %}
|
||||
<div class="mt-2 flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
|
||||
{{ meta }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Actions Section #}
|
||||
{% if actions_slot or block.page_header_actions %}
|
||||
<div class="flex-shrink-0 flex flex-wrap items-center gap-3 {% if align == 'center' %}justify-center{% else %}sm:justify-end{% endif %}">
|
||||
{% if actions_slot %}
|
||||
{{ actions_slot }}
|
||||
{% endif %}
|
||||
{% block page_header_actions %}{% endblock %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% endwith %}
|
||||
Reference in New Issue
Block a user