mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-23 18:11:08 -05:00
Add standardized HTMX conventions, interaction patterns, and migration guide for ThrillWiki UX
This commit is contained in:
pacnpal
106
backend/templates/forms/layouts/grid.html
Normal file
106
backend/templates/forms/layouts/grid.html
Normal file
@@ -0,0 +1,106 @@
|
||||
{% comment %}
|
||||
Grid Form Layout
|
||||
================
|
||||
|
||||
Renders form fields in a responsive grid layout.
|
||||
|
||||
Purpose:
|
||||
Provides a multi-column grid layout for forms with many fields.
|
||||
Responsive - adjusts columns based on screen size.
|
||||
|
||||
Usage Examples:
|
||||
2-column grid:
|
||||
{% include 'forms/layouts/grid.html' with form=form cols=2 %}
|
||||
|
||||
3-column grid:
|
||||
{% include 'forms/layouts/grid.html' with form=form cols=3 %}
|
||||
|
||||
With full-width fields:
|
||||
{% include 'forms/layouts/grid.html' with form=form cols=2 full_width='description,notes' %}
|
||||
|
||||
Parameters:
|
||||
Required:
|
||||
- form: Django form object
|
||||
|
||||
Optional:
|
||||
- cols: Number of columns (2 or 3, default: 2)
|
||||
- exclude: Comma-separated field names to exclude
|
||||
- fields: Comma-separated field names to include
|
||||
- full_width: Comma-separated field names that span full width
|
||||
- show_help: Show help text (default: True)
|
||||
- show_required: Show required indicator (default: True)
|
||||
- gap: Grid gap class (default: 'gap-4')
|
||||
- submit_text: Submit button text (default: 'Submit')
|
||||
- submit_class: Submit button CSS class
|
||||
- form_class: Additional CSS classes for form wrapper
|
||||
|
||||
Dependencies:
|
||||
- forms/partials/form_field.html
|
||||
- Tailwind CSS
|
||||
|
||||
Accessibility:
|
||||
- Responsive grid maintains logical order
|
||||
- Labels properly associated with inputs
|
||||
{% endcomment %}
|
||||
|
||||
{% load common_filters %}
|
||||
|
||||
{% with show_help=show_help|default:True show_required=show_required|default:True cols=cols|default:2 gap=gap|default:'gap-4' submit_text=submit_text|default:'Submit' %}
|
||||
|
||||
<div class="form-layout-grid {{ form_class }}">
|
||||
{# Non-field errors #}
|
||||
{% if form.non_field_errors %}
|
||||
<div class="mb-4 p-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800"
|
||||
role="alert">
|
||||
<ul class="text-sm text-red-700 dark:text-red-300 space-y-1">
|
||||
{% for error in form.non_field_errors %}
|
||||
<li class="flex items-start gap-2">
|
||||
<i class="fas fa-exclamation-circle mt-0.5" aria-hidden="true"></i>
|
||||
{{ error }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Grid container #}
|
||||
<div class="grid {% if cols == 3 %}grid-cols-1 md:grid-cols-2 lg:grid-cols-3{% else %}grid-cols-1 md:grid-cols-2{% endif %} {{ gap }}">
|
||||
{% for field in form %}
|
||||
{% if field.is_hidden %}
|
||||
{{ field }}
|
||||
{% elif fields %}
|
||||
{% if field.name in fields %}
|
||||
<div class="{% if full_width and field.name in full_width %}{% if cols == 3 %}md:col-span-2 lg:col-span-3{% else %}md:col-span-2{% endif %}{% endif %}">
|
||||
{% include 'forms/partials/form_field.html' with field=field show_help=show_help required_indicator=show_required %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% elif exclude %}
|
||||
{% if field.name not in exclude %}
|
||||
<div class="{% if full_width and field.name in full_width %}{% if cols == 3 %}md:col-span-2 lg:col-span-3{% else %}md:col-span-2{% endif %}{% endif %}">
|
||||
{% include 'forms/partials/form_field.html' with field=field show_help=show_help required_indicator=show_required %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="{% if full_width and field.name in full_width %}{% if cols == 3 %}md:col-span-2 lg:col-span-3{% else %}md:col-span-2{% endif %}{% endif %}">
|
||||
{% include 'forms/partials/form_field.html' with field=field show_help=show_help required_indicator=show_required %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{# Form actions - full width #}
|
||||
{% if show_actions|default:True %}
|
||||
<div class="flex items-center justify-end gap-3 mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
{% if show_cancel and cancel_url %}
|
||||
<a href="{{ cancel_url }}" class="btn-secondary">
|
||||
{{ cancel_text|default:'Cancel' }}
|
||||
</a>
|
||||
{% endif %}
|
||||
<button type="submit" class="{{ submit_class|default:'btn-primary' }}">
|
||||
{{ submit_text }}
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% endwith %}
|
||||
149
backend/templates/forms/layouts/inline.html
Normal file
149
backend/templates/forms/layouts/inline.html
Normal file
@@ -0,0 +1,149 @@
|
||||
{% comment %}
|
||||
Inline Form Layout
|
||||
==================
|
||||
|
||||
Renders form fields horizontally with labels inline with inputs.
|
||||
|
||||
Purpose:
|
||||
Provides an inline/horizontal form layout where labels appear
|
||||
to the left of inputs on larger screens.
|
||||
|
||||
Usage Examples:
|
||||
Basic inline form:
|
||||
{% include 'forms/layouts/inline.html' with form=form %}
|
||||
|
||||
Custom label width:
|
||||
{% include 'forms/layouts/inline.html' with form=form label_width='w-1/4' %}
|
||||
|
||||
Parameters:
|
||||
Required:
|
||||
- form: Django form object
|
||||
|
||||
Optional:
|
||||
- exclude: Comma-separated field names to exclude
|
||||
- fields: Comma-separated field names to include
|
||||
- label_width: Label column width class (default: 'w-1/3')
|
||||
- show_help: Show help text (default: True)
|
||||
- show_required: Show required indicator (default: True)
|
||||
- submit_text: Submit button text (default: 'Submit')
|
||||
- submit_class: Submit button CSS class (default: 'btn-primary')
|
||||
- show_cancel: Show cancel button (default: False)
|
||||
- cancel_url: URL for cancel button
|
||||
- form_class: Additional CSS classes for form wrapper
|
||||
|
||||
Dependencies:
|
||||
- forms/partials/form_field.html
|
||||
- Tailwind CSS
|
||||
|
||||
Accessibility:
|
||||
- Labels properly associated with inputs
|
||||
- Responsive - stacks on mobile
|
||||
{% endcomment %}
|
||||
|
||||
{% load common_filters %}
|
||||
|
||||
{% with show_help=show_help|default:True show_required=show_required|default:True label_width=label_width|default:'w-1/3' submit_text=submit_text|default:'Submit' %}
|
||||
|
||||
<div class="form-layout-inline {{ form_class }}">
|
||||
{# Non-field errors #}
|
||||
{% if form.non_field_errors %}
|
||||
<div class="mb-4 p-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800"
|
||||
role="alert">
|
||||
<ul class="text-sm text-red-700 dark:text-red-300 space-y-1">
|
||||
{% for error in form.non_field_errors %}
|
||||
<li class="flex items-start gap-2">
|
||||
<i class="fas fa-exclamation-circle mt-0.5" aria-hidden="true"></i>
|
||||
{{ error }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Form fields - inline layout #}
|
||||
{% for field in form %}
|
||||
{% if field.is_hidden %}
|
||||
{{ field }}
|
||||
{% elif fields %}
|
||||
{% if field.name in fields %}
|
||||
<div class="mb-4 sm:flex sm:items-start">
|
||||
<label for="{{ field.id_for_label }}"
|
||||
class="block mb-1 sm:mb-0 sm:{{ label_width }} sm:pt-2 sm:pr-4 sm:text-right text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ field.label }}
|
||||
{% if show_required and field.field.required %}
|
||||
<span class="text-red-500" aria-hidden="true">*</span>
|
||||
{% endif %}
|
||||
</label>
|
||||
<div class="flex-1">
|
||||
{{ field|add_class:'w-full px-3 py-2 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white' }}
|
||||
{% if field.errors %}
|
||||
{% include 'forms/partials/field_error.html' with errors=field.errors %}
|
||||
{% endif %}
|
||||
{% if show_help and field.help_text %}
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ field.help_text }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% elif exclude %}
|
||||
{% if field.name not in exclude %}
|
||||
<div class="mb-4 sm:flex sm:items-start">
|
||||
<label for="{{ field.id_for_label }}"
|
||||
class="block mb-1 sm:mb-0 sm:{{ label_width }} sm:pt-2 sm:pr-4 sm:text-right text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ field.label }}
|
||||
{% if show_required and field.field.required %}
|
||||
<span class="text-red-500" aria-hidden="true">*</span>
|
||||
{% endif %}
|
||||
</label>
|
||||
<div class="flex-1">
|
||||
{{ field|add_class:'w-full px-3 py-2 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white' }}
|
||||
{% if field.errors %}
|
||||
{% include 'forms/partials/field_error.html' with errors=field.errors %}
|
||||
{% endif %}
|
||||
{% if show_help and field.help_text %}
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ field.help_text }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="mb-4 sm:flex sm:items-start">
|
||||
<label for="{{ field.id_for_label }}"
|
||||
class="block mb-1 sm:mb-0 sm:{{ label_width }} sm:pt-2 sm:pr-4 sm:text-right text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ field.label }}
|
||||
{% if show_required and field.field.required %}
|
||||
<span class="text-red-500" aria-hidden="true">*</span>
|
||||
{% endif %}
|
||||
</label>
|
||||
<div class="flex-1">
|
||||
{{ field|add_class:'w-full px-3 py-2 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white' }}
|
||||
{% if field.errors %}
|
||||
{% include 'forms/partials/field_error.html' with errors=field.errors %}
|
||||
{% endif %}
|
||||
{% if show_help and field.help_text %}
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ field.help_text }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{# Form actions - aligned with inputs #}
|
||||
{% if show_actions|default:True %}
|
||||
<div class="sm:flex sm:items-center mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<div class="sm:{{ label_width }}"></div>
|
||||
<div class="flex-1 flex items-center justify-start gap-3">
|
||||
<button type="submit" class="{{ submit_class|default:'btn-primary' }}">
|
||||
{{ submit_text }}
|
||||
</button>
|
||||
{% if show_cancel and cancel_url %}
|
||||
<a href="{{ cancel_url }}" class="btn-secondary">
|
||||
{{ cancel_text|default:'Cancel' }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% endwith %}
|
||||
106
backend/templates/forms/layouts/stacked.html
Normal file
106
backend/templates/forms/layouts/stacked.html
Normal file
@@ -0,0 +1,106 @@
|
||||
{% comment %}
|
||||
Stacked Form Layout
|
||||
===================
|
||||
|
||||
Renders form fields in a vertical stacked layout (default form layout).
|
||||
|
||||
Purpose:
|
||||
Provides a standard vertical form layout where each field takes
|
||||
full width with labels above inputs.
|
||||
|
||||
Usage Examples:
|
||||
Basic form:
|
||||
{% include 'forms/layouts/stacked.html' with form=form %}
|
||||
|
||||
With fieldsets:
|
||||
{% include 'forms/layouts/stacked.html' with form=form show_fieldsets=True %}
|
||||
|
||||
Exclude fields:
|
||||
{% include 'forms/layouts/stacked.html' with form=form exclude='password2' %}
|
||||
|
||||
Parameters:
|
||||
Required:
|
||||
- form: Django form object
|
||||
|
||||
Optional:
|
||||
- exclude: Comma-separated field names to exclude
|
||||
- fields: Comma-separated field names to include (if set, only these are shown)
|
||||
- show_fieldsets: Group fields by fieldset (default: False)
|
||||
- show_help: Show help text (default: True)
|
||||
- show_required: Show required indicator (default: True)
|
||||
- submit_text: Submit button text (default: 'Submit')
|
||||
- submit_class: Submit button CSS class (default: 'btn-primary')
|
||||
- show_cancel: Show cancel button (default: False)
|
||||
- cancel_url: URL for cancel button
|
||||
- cancel_text: Cancel button text (default: 'Cancel')
|
||||
- form_class: Additional CSS classes for form wrapper
|
||||
|
||||
Dependencies:
|
||||
- forms/partials/form_field.html
|
||||
- forms/partials/field_error.html
|
||||
- Tailwind CSS
|
||||
|
||||
Accessibility:
|
||||
- Uses fieldset/legend for grouped fields
|
||||
- Labels properly associated with inputs
|
||||
- Error summary at top for screen readers
|
||||
{% endcomment %}
|
||||
|
||||
{% load common_filters %}
|
||||
|
||||
{% with show_help=show_help|default:True show_required=show_required|default:True submit_text=submit_text|default:'Submit' %}
|
||||
|
||||
<div class="form-layout-stacked {{ form_class }}">
|
||||
{# Non-field errors at top #}
|
||||
{% if form.non_field_errors %}
|
||||
<div class="mb-4 p-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800"
|
||||
role="alert">
|
||||
<div class="flex items-start gap-2">
|
||||
<i class="fas fa-exclamation-circle text-red-500 mt-0.5" aria-hidden="true"></i>
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-red-800 dark:text-red-200">Please correct the following errors:</h3>
|
||||
<ul class="mt-1 text-sm text-red-700 dark:text-red-300 list-disc list-inside">
|
||||
{% for error in form.non_field_errors %}
|
||||
<li>{{ error }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Form fields #}
|
||||
{% for field in form %}
|
||||
{% if field.is_hidden %}
|
||||
{{ field }}
|
||||
{% elif fields %}
|
||||
{# Only show specified fields #}
|
||||
{% if field.name in fields %}
|
||||
{% include 'forms/partials/form_field.html' with field=field show_help=show_help required_indicator=show_required %}
|
||||
{% endif %}
|
||||
{% elif exclude %}
|
||||
{# Exclude specified fields #}
|
||||
{% if field.name not in exclude %}
|
||||
{% include 'forms/partials/form_field.html' with field=field show_help=show_help required_indicator=show_required %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% include 'forms/partials/form_field.html' with field=field show_help=show_help required_indicator=show_required %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{# Form actions #}
|
||||
{% if show_actions|default:True %}
|
||||
<div class="flex items-center justify-end gap-3 mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
{% if show_cancel and cancel_url %}
|
||||
<a href="{{ cancel_url }}" class="btn-secondary {{ cancel_class }}">
|
||||
{{ cancel_text|default:'Cancel' }}
|
||||
</a>
|
||||
{% endif %}
|
||||
<button type="submit" class="{{ submit_class|default:'btn-primary' }}">
|
||||
{{ submit_text }}
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% endwith %}
|
||||
Reference in New Issue
Block a user