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

feat: improve classes page

Browse Source
This commit is contained in:
Bertrand Benjamin
2025-08-07 19:22:06 +02:00
parent e08466fab3
commit 74088235fa
4 changed files with 915 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
templates/components/class/class_card.html Normal file
View File

@@ -0,0 +1,116 @@
{# Composant pour carte de classe dans la liste #}
{% macro class_card(class) %}
{# Extraire le niveau de classe du nom (ex: "6ème A" -> 6, "Terminale S" -> "T") #}
{% set class_level = class.name[0] | int if class.name[0].isdigit() else ('T' if class.name.startswith('T') or class.name.startswith('t') else 'unknown') %}
{% set year_colors = {
6: {'bg': 'from-blue-500 to-blue-600', 'accent': 'blue', 'icon_bg': 'bg-blue-100', 'icon_text': 'text-blue-600'},
5: {'bg': 'from-green-500 to-green-600', 'accent': 'green', 'icon_bg': 'bg-green-100', 'icon_text': 'text-green-600'},
4: {'bg': 'from-purple-500 to-purple-600', 'accent': 'purple', 'icon_bg': 'bg-purple-100', 'icon_text': 'text-purple-600'},
3: {'bg': 'from-orange-500 to-orange-600', 'accent': 'orange', 'icon_bg': 'bg-orange-100', 'icon_text': 'text-orange-600'},
2: {'bg': 'from-red-500 to-red-600', 'accent': 'red', 'icon_bg': 'bg-red-100', 'icon_text': 'text-red-600'},
1: {'bg': 'from-pink-500 to-pink-600', 'accent': 'pink', 'icon_bg': 'bg-pink-100', 'icon_text': 'text-pink-600'},
'T': {'bg': 'from-indigo-500 to-indigo-600', 'accent': 'indigo', 'icon_bg': 'bg-indigo-100', 'icon_text': 'text-indigo-600'},
'unknown': {'bg': 'from-gray-500 to-gray-600', 'accent': 'gray', 'icon_bg': 'bg-gray-100', 'icon_text': 'text-gray-600'}
} %}
{% 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) -->
<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>
<!-- 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>
</div>
<!-- Contenu principal -->
<div class="p-4 flex flex-col justify-between flex-1">
<!-- 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>
<!-- 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"/>
</svg>
{{ class.students|length }} Élèves
</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">
<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"/>
</svg>
Évaluations
</a>
</div>
<!-- Action secondaire -->
<div class="pt-2 border-t border-gray-100">
<button class="w-full text-gray-600 hover:text-gray-900 text-xs font-medium transition-colors flex items-center justify-center py-2">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"/>
</svg>
Modifier la classe
</button>
</div>
</div>
</div>
</div>
{% endmacro %}