{# Mobile Card Component Generic responsive card layout for mobile table replacement This is a documentation template showing the structure. Each page should implement its own card with specific content. Example Usage in a list page: {# Desktop Table #} {# Mobile Cards #}
{% for item in items %} {% include 'admin/components/mobile_card_item.html.twig' with { 'item': item, 'title': item.name, 'subtitle': item.email, 'status': item.status, 'icon': 'fa-user', 'fields': { 'Role': item.role, 'Date': item.createdAt|date('d/m/Y') }, 'actions': [ {'url': path('admin_item_show', {id: item.id}), 'icon': 'fa-eye', 'color': 'text-indigo-600'}, {'url': path('admin_item_edit', {id: item.id}), 'icon': 'fa-edit', 'color': 'text-blue-600'} ] } %} {% endfor %}
#} {# Basic Mobile Card Structure Copy and customize this structure in each template #} {# Example Card Implementation #} {% set exampleCard %}
{# Header: Avatar/Icon + Title + Badge #}
{# Avatar or Icon #}
{# Title and Subtitle #}
John Doe
john@example.com
{# Status Badge #} Actif
{# Content: Key Information Grid #}
Rôle: Admin
Date: 01/12/2025
2FA: Activé
Email: Vérifié
{# Footer: Action Buttons #}
{% endset %} {# Variations for Different Contexts: 1. List with Images (Users, Profiles): - Use instead of icon - Show profile photo 2. Status-Heavy Lists (Login Attempts, Logs): - Multiple status badges - Color-coded indicators 3. Data-Heavy Lists (HTTP Requests, Tokens): - More fields in grid - Expandable sections 4. Action-Heavy Lists (IP Blocks, Devices): - More action buttons - Inline forms for quick actions #} {# Status Badge Helper Colors: Green (Success): bg-green-100 text-green-800 Red (Error): bg-red-100 text-red-800 Yellow (Warning): bg-yellow-100 text-yellow-800 Blue (Info): bg-blue-100 text-blue-800 Gray (Neutral): bg-gray-100 text-gray-800 Indigo (Primary): bg-indigo-100 text-indigo-800 #} {# Icon Colors for Actions: View: text-indigo-600 hover:text-indigo-900 Edit: text-blue-600 hover:text-blue-900 Delete: text-red-600 hover:text-red-900 Download: text-green-600 hover:text-green-900 Lock: text-yellow-600 hover:text-yellow-900 #}