lafrite/notytex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refact: design of class cards

Browse Source
This commit is contained in:
Bertrand Benjamin
2025-08-08 06:19:52 +02:00
parent 5c25723e4f
commit 17995f913e
2 changed files with 126 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
templates/components/class/class_card.html
View File

@@ -1,4 +1,4 @@
{# Composant pour carte de classe dans la liste #}
{# Composant pour carte de classe dans la liste - Header simplifié #}
{% macro class_card(class) %}
{# Extraire le niveau de classe du nom (ex: "6ème A" -> 6, "Terminale S" -> "T") #}
@@ -16,28 +16,15 @@
{% set year_config = year_colors.get(class_level, year_colors['unknown']) %}
<div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 overflow-hidden flex flex-col">
<!-- Header avec nom de classe et année (couleur selon niveau) -->
<!-- Header simplifié avec identité de classe -->
<div class="bg-gradient-to-r {{ year_config.bg }} p-4 text-white">
<div class="flex items-center justify-between">
<!-- Nom de classe (élément principal) -->
<div class="flex items-center space-x-3">
<div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
<span class="text-lg font-black">{{ class.name[:2] }}</span>
</div>
<div>
<div class="text-xl md:text-2xl font-black">{{ class.name }}</div>
<div class="text-sm opacity-90">{{ class.year }}</div>
</div>
<div class="flex items-center space-x-3">
<div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
<span class="text-lg font-black">{{ class.name[:2] }}</span>
</div>
<!-- Indicateur nombre d'élèves -->
<div class="bg-white/20 px-3 py-2 rounded-full">
<div class="flex items-center space-x-2 text-sm font-medium">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/>
</svg>
<span>{{ class.students|length }}</span>
</div>
<div>
<div class="text-xl md:text-2xl font-black">{{ class.name }}</div>
<div class="text-sm opacity-90">{{ class.year }}</div>
</div>
</div>
</div>
@@ -47,57 +34,26 @@
<!-- Description (si présente) -->
{% if class.description %}
<p class="text-sm text-gray-600 mb-4 line-clamp-2 italic">{{ class.description }}</p>
{% else %}
<p class="text-sm text-gray-400 mb-4 italic">Aucune description</p>
{% endif %}
<div class="flex flex-col">
<!-- Meta informations -->
<div class="flex flex-wrap items-center gap-3 text-xs font-medium text-gray-600 mb-4">
<div class="flex items-center space-x-1">
<span class="w-2 h-2 bg-{{ year_config.accent }}-400 rounded-full"></span>
{% if class_level == 'T' %}
<span>Terminale</span>
{% elif class_level == 'unknown' %}
<span>Non reconnu</span>
{% else %}
<span>Niveau {{ class_level }}ème</span>
{% endif %}
</div>
<div class="flex items-center space-x-1">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"/>
</svg>
<span>{{ class.students|length }} élève{{ 's' if class.students|length != 1 else '' }}</span>
</div>
{% if class.students|length > 0 %}
<div class="bg-{{ year_config.accent }}-100 text-{{ year_config.accent }}-800 px-2 py-1 rounded-full">
<span>Active</span>
</div>
{% else %}
<div class="bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
<span>Vide</span>
</div>
{% endif %}
</div>
<div class="flex flex-col{% if not class.description %} mt-2{% endif %}">
<!-- Actions principales -->
<div class="grid grid-cols-2 gap-2 mb-3">
<a href="{{ url_for('students') }}?class_id={{ class.id }}"
class="bg-{{ year_config.accent }}-50 hover:bg-{{ year_config.accent }}-100 text-{{ year_config.accent }}-700 hover:text-{{ year_config.accent }}-900 px-3 py-2 rounded-lg text-xs font-medium transition-colors flex items-center justify-center">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/>
class="bg-{{ year_config.accent }}-50 hover:bg-{{ year_config.accent }}-100 text-{{ year_config.accent }}-700 hover:text-{{ year_config.accent }}-900 px-3 py-2.5 rounded-lg text-xs font-medium transition-colors flex items-center justify-center space-x-2">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path d="M9 6a3 3 0 11-6 0 3 3 0 616 0zM17 6a3 3 0 11-6 0 3 3 0 616 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 515 5v1H1v-1a5 5 0 515-5z"/>
</svg>
{{ class.students|length }} Élèves
<span>{{ class.students|length }} Élèves</span>
</a>
<a href="{{ url_for('assessments.list') }}?class={{ class.id }}"
class="bg-gray-50 hover:bg-gray-100 text-gray-700 hover:text-gray-900 px-3 py-2 rounded-lg text-xs font-medium transition-colors flex items-center justify-center">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
class="bg-gray-50 hover:bg-gray-100 text-gray-700 hover:text-gray-900 px-3 py-2.5 rounded-lg text-xs font-medium transition-colors flex items-center justify-center space-x-2">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2v1a1 1 0 102 0V3a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm2.5 2.5a.5.5 0 000 1h3a.5.5 0 000-1h-3z" clip-rule="evenodd"/>
<path fill-rule="evenodd" d="M4 5a2 2 0 712-2v1a1 1 0 102 0V3a2 2 0 712 2v6a2 2 0 71-2 2H6a2 2 0 71-2-2V5zm2.5 2.5a.5.5 0 000 1h3a.5.5 0 000-1h-3z" clip-rule="evenodd"/>
</svg>
Évaluations
<span>{{ class.assessments|length }} Évaluations</span>
</a>
</div>