211 lines
11 KiB
Twig
211 lines
11 KiB
Twig
{% extends 'base.twig' %}
|
|
|
|
{% block title %}{{'members_page.title'|trans}}{% endblock %}
|
|
{% block meta_description %}{{'members_description'|trans}}{% endblock %}
|
|
|
|
{% block canonical_url %}<link rel="canonical" href="{{ url('app_members') }}" />{% endblock %}
|
|
|
|
{% block breadcrumb_schema %}
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "BreadcrumbList",
|
|
"itemListElement": [
|
|
{
|
|
"@type": "ListItem",
|
|
"position": 1,
|
|
"name": "{{ 'breadcrumb.home'|trans }}",
|
|
"item": "{{ app.request.schemeAndHttpHost }}"
|
|
},
|
|
{
|
|
"@type": "ListItem",
|
|
"position": 2,
|
|
"name": "{{'members_page.breadcrumb'|trans}}",
|
|
"item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="container mx-auto p-4 md:p-8 pt-12">
|
|
<h1 class="text-4xl font-extrabold text-center mb-12 text-gray-800">
|
|
{{ 'members_page.title'|trans }}
|
|
</h1>
|
|
|
|
{# --- SECTION 1 : Membres du Bureau --- #}
|
|
<section class="mb-16">
|
|
<h2 class="text-3xl font-bold border-b pb-4 mb-8 text-indigo-700">
|
|
{{ 'members_page.board_title'|trans }}
|
|
</h2>
|
|
|
|
{% if board_members is defined and board_members|length > 0 %}
|
|
{# Grille de 3 colonnes sur les grands écrans #}
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-8">
|
|
|
|
{% for member in board_members %}
|
|
{# Début de la carte du membre (Bureau) #}
|
|
<div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition duration-300 transform hover:scale-[1.02] flex flex-col">
|
|
|
|
{# Photo et Pseudo #}
|
|
<div class="text-center mb-4">
|
|
<img height="24" width="24" src="{{ member.photo_url | imagine_filter('members')}}" alt="Photo de {{ member.pseudo }}" class="w-24 h-24 mx-auto rounded-full object-cover border-4 border-indigo-200 shadow-md">
|
|
<h3 class="text-xl font-bold mt-3 text-gray-800">{{ member.pseudo }}</h3>
|
|
</div>
|
|
|
|
{# Rôle #}
|
|
<div class="space-y-3 flex-grow border-t pt-4 mb-3">
|
|
<p class="text-sm">
|
|
<strong class="font-semibold text-indigo-600">{{ 'member_card.role'|trans }}:</strong>
|
|
<span class="text-gray-700">{{ member.role|default('-')|trans }}</span>
|
|
</p>
|
|
</div>
|
|
|
|
{# BADGE Cosplayer #}
|
|
<div class="mb-4">
|
|
<strong class="text-sm font-semibold text-gray-800 mr-2">{{ 'member_card.cosplay_label'|trans }}:</strong>
|
|
|
|
{% if member.cosplayer %}
|
|
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
|
{{ 'member_card.yes'|trans }}
|
|
</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
|
|
{{ 'member_card.no'|trans }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{# BADGES Spécificités #}
|
|
{# BADGES Spécificités (Mis à jour pour n'afficher que les statuts VRAIS) #}
|
|
<div class="space-y-2 pt-3 border-t">
|
|
<p class="text-xs text-gray-500 font-semibold uppercase">{{ 'member_card.specifics'|trans }}</p>
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
|
|
{# Badge Crosscosplayer : Affiché uniquement si VRAI #}
|
|
{% if member.crosscosplayer %}
|
|
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
|
|
{{ 'member_card.crosscosplay'|trans }}
|
|
</span>
|
|
{% endif %}
|
|
|
|
{# Badge Transgenre : Affiché uniquement si VRAI #}
|
|
{% if member.trans %}
|
|
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800">
|
|
{{ 'member_card.trans'|trans }}
|
|
</span>
|
|
{% endif %}
|
|
|
|
{# Badge Orientation (toujours affiché, avec couleur conditionnelle) #}
|
|
{% set orientation_key = member.orientation ? 'orientation.' ~ member.orientation : null %}
|
|
{% set orientation_text = orientation_key ? orientation_key|trans : 'member_card.not_specified'|trans %}
|
|
{% set orientation_color = orientation_key ? 'bg-purple-100 text-purple-800' : 'bg-gray-100 text-gray-600' %}
|
|
|
|
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium {{ orientation_color }}">
|
|
{{ 'member_card.orientation_label'|trans }}: {{ orientation_text }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{# Fin de la carte du membre (Bureau) #}
|
|
{% endfor %}
|
|
|
|
</div>
|
|
{% else %}
|
|
<p class="text-center text-gray-600 p-6 border rounded-lg bg-gray-50">
|
|
{{ 'members_page.board_empty'|trans }}
|
|
</p>
|
|
{% endif %}
|
|
</section>
|
|
|
|
{# --- SECTION 2 : Tous les autres Membres --- #}
|
|
<section>
|
|
<h2 class="text-3xl font-bold border-b pb-4 mb-8 text-indigo-700">
|
|
{{ 'members_page.all_title'|trans }}
|
|
</h2>
|
|
|
|
{% if members is defined and members|length > 0 %}
|
|
{# Grille de 3 colonnes sur les grands écrans #}
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-8">
|
|
|
|
{% for member in members %}
|
|
{# Début de la carte du membre (Général) #}
|
|
<div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition duration-300 transform hover:scale-[1.02] flex flex-col">
|
|
|
|
{# Photo et Pseudo #}
|
|
<div class="text-center mb-4">
|
|
<img height="24" width="24" src="{{ member.photo_url | imagine_filter('members')}} ) }}" alt="Photo de {{ member.pseudo }}" class="w-24 h-24 mx-auto rounded-full object-cover border-4 border-indigo-200 shadow-md">
|
|
<h3 class="text-xl font-bold mt-3 text-gray-800">{{ member.pseudo }}</h3>
|
|
</div>
|
|
|
|
{# Rôle #}
|
|
<div class="space-y-3 flex-grow border-t pt-4 mb-3">
|
|
<p class="text-sm">
|
|
<strong class="font-semibold text-indigo-600">{{ 'member_card.role'|trans }}:</strong>
|
|
<span class="text-gray-700">{{ member.role|default('-')|trans }}</span>
|
|
</p>
|
|
</div>
|
|
|
|
{# BADGE Cosplayer #}
|
|
<div class="mb-4">
|
|
<strong class="text-sm font-semibold text-gray-800 mr-2">{{ 'member_card.cosplay_label'|trans }}:</strong>
|
|
|
|
{% if member.cosplayer %}
|
|
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
|
{{ 'member_card.yes'|trans }}
|
|
</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
|
|
{{ 'member_card.no'|trans }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{# BADGES Spécificités #}
|
|
{# BADGES Spécificités (Mis à jour pour n'afficher que les statuts VRAIS) #}
|
|
<div class="space-y-2 pt-3 border-t">
|
|
<p class="text-xs text-gray-500 font-semibold uppercase">{{ 'member_card.specifics'|trans }}</p>
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
|
|
{# Badge Crosscosplayer : Affiché uniquement si VRAI #}
|
|
{% if member.crosscosplayer %}
|
|
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
|
|
{{ 'member_card.crosscosplay'|trans }}
|
|
</span>
|
|
{% endif %}
|
|
|
|
{# Badge Transgenre : Affiché uniquement si VRAI #}
|
|
{% if member.trans %}
|
|
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800">
|
|
{{ 'member_card.trans'|trans }}
|
|
</span>
|
|
{% endif %}
|
|
|
|
{# Badge Orientation (toujours affiché, avec couleur conditionnelle) #}
|
|
{% set orientation_key = member.orientation ? 'orientation.' ~ member.orientation : null %}
|
|
{% set orientation_text = orientation_key ? orientation_key|trans : 'member_card.not_specified'|trans %}
|
|
{% set orientation_color = orientation_key ? 'bg-purple-100 text-purple-800' : 'bg-gray-100 text-gray-600' %}
|
|
|
|
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium {{ orientation_color }}">
|
|
{{ 'member_card.orientation_label'|trans }}: {{ orientation_text }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{# Fin de la carte du membre (Général) #}
|
|
{% endfor %}
|
|
|
|
</div>
|
|
{% else %}
|
|
<p class="text-center text-gray-600 p-6 border rounded-lg bg-gray-50">
|
|
{{ 'members_page.all_empty'|trans }}
|
|
</p>
|
|
{% endif %}
|
|
</section>
|
|
|
|
</div>
|
|
{% endblock %}
|