mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-23 05:11:10 -05:00
88 lines
3.0 KiB
HTML
88 lines
3.0 KiB
HTML
{% comment %}
|
|
Statistics Card Component
|
|
=========================
|
|
|
|
A reusable card component for displaying statistics and metrics.
|
|
|
|
Purpose:
|
|
Renders a consistent statistics card with label, value, optional icon,
|
|
and optional link. Used for displaying metrics on detail pages.
|
|
|
|
Usage Examples:
|
|
Basic stat:
|
|
{% include 'components/stats_card.html' with label='Total Rides' value=park.ride_count %}
|
|
|
|
Stat with icon:
|
|
{% include 'components/stats_card.html' with label='Rating' value='4.5/5' icon='fas fa-star' %}
|
|
|
|
Clickable stat:
|
|
{% include 'components/stats_card.html' with label='Total Rides' value=42 link=rides_url %}
|
|
|
|
Priority stat (highlighted):
|
|
{% include 'components/stats_card.html' with label='Operator' value=park.operator.name priority=True %}
|
|
|
|
Stat with subtitle:
|
|
{% include 'components/stats_card.html' with label='Height' value='250 ft' subtitle='76 meters' %}
|
|
|
|
Parameters:
|
|
Required:
|
|
- label: Stat label/title
|
|
- value: Stat value to display
|
|
|
|
Optional:
|
|
- icon: Font Awesome icon class (e.g., 'fas fa-star')
|
|
- link: URL to link to (makes card clickable)
|
|
- subtitle: Secondary text below value
|
|
- priority: Boolean to highlight as priority card (default: False)
|
|
- size: Size variant 'sm', 'md', 'lg' (default: 'md')
|
|
- value_class: Additional CSS classes for value
|
|
|
|
Dependencies:
|
|
- Tailwind CSS for styling
|
|
- Font Awesome icons (optional)
|
|
|
|
Accessibility:
|
|
- Uses semantic dt/dd structure for label/value
|
|
- Clickable cards use proper link semantics
|
|
- Priority cards use visual emphasis, not just color
|
|
{% endcomment %}
|
|
|
|
{% with priority=priority|default:False size=size|default:'md' %}
|
|
|
|
{% if link %}
|
|
<a href="{{ link }}"
|
|
class="block bg-white rounded-lg shadow-lg dark:bg-gray-800 p-compact card-stats transition-transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-blue-500 {% if priority %}card-stats-priority{% endif %}">
|
|
{% else %}
|
|
<div class="bg-white rounded-lg shadow-lg dark:bg-gray-800 p-compact card-stats {% if priority %}card-stats-priority{% endif %}">
|
|
{% endif %}
|
|
|
|
<div class="text-center">
|
|
{# Label #}
|
|
<dt class="{% if size == 'sm' %}text-xs{% elif size == 'lg' %}text-base{% else %}text-sm{% endif %} font-semibold text-gray-900 dark:text-white">
|
|
{% if icon %}
|
|
<i class="{{ icon }} mr-1 text-gray-500 dark:text-gray-400" aria-hidden="true"></i>
|
|
{% endif %}
|
|
{{ label }}
|
|
</dt>
|
|
|
|
{# Value #}
|
|
<dd class="mt-1 {% if size == 'sm' %}text-lg{% elif size == 'lg' %}text-3xl{% else %}text-2xl{% endif %} font-bold text-sky-900 dark:text-sky-400 {{ value_class }}{% if link %} hover:text-sky-800 dark:hover:text-sky-300{% endif %}">
|
|
{{ value|default:"N/A" }}
|
|
</dd>
|
|
|
|
{# Subtitle (optional) #}
|
|
{% if subtitle %}
|
|
<dd class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
|
|
{{ subtitle }}
|
|
</dd>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if link %}
|
|
</a>
|
|
{% else %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% endwith %}
|