feat: improve assessment card design
This commit is contained in:
@@ -2,100 +2,129 @@
|
||||
{% from 'components/common/macros.html' import progress_indicator %}
|
||||
|
||||
{% macro assessment_card(assessment) %}
|
||||
{% set trimester_colors = {
|
||||
1: {'bg': 'from-blue-500 to-blue-600', 'accent': 'blue', 'icon_bg': 'bg-blue-100', 'icon_text': 'text-blue-600'},
|
||||
2: {'bg': 'from-green-500 to-green-600', 'accent': 'green', 'icon_bg': 'bg-green-100', 'icon_text': 'text-green-600'},
|
||||
3: {'bg': 'from-orange-500 to-orange-600', 'accent': 'orange', 'icon_bg': 'bg-orange-100', 'icon_text': 'text-orange-600'}
|
||||
{% set progress = assessment.grading_progress %}
|
||||
{% set progress_colors = {
|
||||
0: {'bg': 'from-red-500 to-red-600', 'text': 'text-red-100', 'badge': 'bg-red-400/30'},
|
||||
'in_progress': {'bg': 'from-orange-500 to-orange-600', 'text': 'text-orange-100', 'badge': 'bg-orange-400/30'},
|
||||
100: {'bg': 'from-green-500 to-green-600', 'text': 'text-green-100', 'badge': 'bg-green-400/30'}
|
||||
} %}
|
||||
{% set colors = trimester_colors[assessment.trimester] %}
|
||||
{% if progress.percentage == 0 %}
|
||||
{% set colors = progress_colors[0] %}
|
||||
{% elif progress.percentage == 100 %}
|
||||
{% set colors = progress_colors[100] %}
|
||||
{% else %}
|
||||
{% set colors = progress_colors['in_progress'] %}
|
||||
{% endif %}
|
||||
{% set trimester_colors = {
|
||||
1: {'accent': 'violet', 'icon_text': 'text-violet-600'},
|
||||
2: {'accent': 'purple', 'icon_text': 'text-purple-600'},
|
||||
3: {'accent': 'fuchsia', 'icon_text': 'text-fuchsia-600'}
|
||||
} %}
|
||||
{% set trimester_config = trimester_colors[assessment.trimester] %}
|
||||
|
||||
<div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 overflow-hidden">
|
||||
<!-- Header avec gradient thématique -->
|
||||
<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 classe + progression (couleur selon statut correction) -->
|
||||
<div class="bg-gradient-to-r {{ colors.bg }} p-4 text-white">
|
||||
<div class="flex items-center justify-between">
|
||||
<!-- Classe (élément principal) -->
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
|
||||
<svg class="w-5 h-5" 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 d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-sm font-semibold">Trimestre {{ assessment.trimester }}</div>
|
||||
<div class="text-base md:text-lg font-semibold {{ colors.text }}">{{ assessment.class_group.name }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Progression (élément principal) -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="{{ colors.badge }} px-3 py-1 rounded-full">
|
||||
<div class="flex items-center space-x-2 text-sm font-medium">
|
||||
{% if progress.percentage == 0 %}
|
||||
<span class="w-2 h-2 bg-red-300 rounded-full"></span>
|
||||
<span>{{ progress.percentage }}%</span>
|
||||
{% elif progress.percentage == 100 %}
|
||||
<span class="w-2 h-2 bg-green-300 rounded-full"></span>
|
||||
<span>TERMINÉ</span>
|
||||
{% else %}
|
||||
<span class="w-2 h-2 bg-orange-300 rounded-full animate-pulse"></span>
|
||||
<span>{{ progress.percentage }}%</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs opacity-75">{{ assessment.date.strftime('%d/%m/%Y') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contenu principal -->
|
||||
<div class="p-6">
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-2 line-clamp-2">{{ assessment.title }}</h3>
|
||||
|
||||
<!-- Informations clés -->
|
||||
<div class="space-y-3 mb-4">
|
||||
<div class="flex items-center text-sm text-gray-600">
|
||||
<svg class="w-4 h-4 mr-2 {{ colors.icon_text }}" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<span class="font-medium">{{ assessment.class_group.name }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center text-sm text-gray-600">
|
||||
<svg class="w-4 h-4 mr-2 {{ colors.icon_text }}" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"/>
|
||||
</svg>
|
||||
<span>{{ assessment.exercises|length }} exercice(s)</span>
|
||||
</div>
|
||||
|
||||
<div class="bg-{{ colors.accent }}-100 text-{{ colors.accent }}-800 text-xs px-2 py-1 rounded-full font-medium">
|
||||
Coeff. {{ assessment.coefficient }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Indicateur de progression des notes -->
|
||||
{% set progress = assessment.grading_progress %}
|
||||
<div class="flex items-center justify-between pt-2 border-t border-gray-100">
|
||||
{{ progress_indicator(progress, True, assessment.id) }}
|
||||
|
||||
<!-- Info détaillée -->
|
||||
<div class="text-xs text-gray-500 text-right">
|
||||
{{ progress.completed }}/{{ progress.total }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 flex flex-col justify-between flex-1">
|
||||
<!-- Titre de l'évaluation (très proéminent) -->
|
||||
<h3 class="text-xl md:text-2xl font-black text-gray-900 mb-3 line-clamp-2 leading-tight">{{ assessment.title }}</h3>
|
||||
|
||||
<!-- Description (si présente) -->
|
||||
{% if assessment.description %}
|
||||
<p class="text-sm text-gray-600 mb-4 line-clamp-2">{{ assessment.description }}</p>
|
||||
<p class="text-sm text-gray-600 mb-4 line-clamp-2 italic">{{ assessment.description }}</p>
|
||||
{% endif %}
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex space-x-2">
|
||||
<a href="{{ url_for('assessments.detail', id=assessment.id) }}"
|
||||
class="flex-1 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="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
|
||||
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Détails
|
||||
</a>
|
||||
|
||||
<a href="{{ url_for('grading.assessment_grading', assessment_id=assessment.id) }}"
|
||||
class="flex-1 bg-{{ colors.accent }}-50 hover:bg-{{ colors.accent }}-100 text-{{ colors.accent }}-700 hover:text-{{ colors.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="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>
|
||||
Noter
|
||||
</a>
|
||||
|
||||
<a href="{{ url_for('assessments.edit', id=assessment.id) }}"
|
||||
class="flex-1 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="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"/>
|
||||
<path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Modifier
|
||||
</a>
|
||||
<div class="flex flex-col">
|
||||
<!-- Meta informations en ligne compacte -->
|
||||
<div class="flex flex-wrap items-center gap-4 text-xs font-medium text-gray-600 mb-2">
|
||||
<div class="flex items-center space-x-1">
|
||||
<span class="w-2 h-2 bg-{{ trimester_config.accent }}-400 rounded-full"></span>
|
||||
<span>T{{ assessment.trimester }}</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1">
|
||||
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>{{ assessment.date.strftime('%d/%m') }}</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1">
|
||||
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"/>
|
||||
</svg>
|
||||
<span>{{ assessment.exercises|length }} ex</span>
|
||||
</div>
|
||||
<div class="bg-{{ trimester_config.accent }}-100 text-{{ trimester_config.accent }}-800 px-2 py-1 rounded-full">
|
||||
<span>Coeff {{ assessment.coefficient }}</span>
|
||||
</div>
|
||||
<div class="text-gray-500 ml-auto">
|
||||
{{ progress.completed }}/{{ progress.total }} notes
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions (toujours en bas) -->
|
||||
<div class="flex space-x-2">
|
||||
<a href="{{ url_for('assessments.detail', id=assessment.id) }}"
|
||||
class="flex-1 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="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
|
||||
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Détails
|
||||
</a>
|
||||
|
||||
{% if progress.percentage == 100 %}
|
||||
<!-- Correction terminée : bouton Résultats -->
|
||||
<a href="{{ url_for('assessments.results', id=assessment.id) }}"
|
||||
class="flex-1 bg-green-50 hover:bg-green-100 text-green-700 hover:text-green-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 fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Résultats
|
||||
</a>
|
||||
{% else %}
|
||||
<!-- Correction non terminée : bouton Noter -->
|
||||
<a href="{{ url_for('grading.assessment_grading', assessment_id=assessment.id) }}"
|
||||
class="flex-1 bg-orange-50 hover:bg-orange-100 text-orange-700 hover:text-orange-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="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>
|
||||
Noter
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
{% endmacro %}
|
||||
|
||||
Reference in New Issue
Block a user