From e08466fab3e9aec6cc51b2da9b74c68d3728479c Mon Sep 17 00:00:00 2001 From: Bertrand Benjamin Date: Thu, 7 Aug 2025 18:47:38 +0200 Subject: [PATCH] feat: improve assessment card design --- docs/frontend/ASSESSMENT_CARDS.md | 221 ++++++++++++++++++ .../assessment/assessment_card.html | 181 ++++++++------ 2 files changed, 326 insertions(+), 76 deletions(-) create mode 100644 docs/frontend/ASSESSMENT_CARDS.md diff --git a/docs/frontend/ASSESSMENT_CARDS.md b/docs/frontend/ASSESSMENT_CARDS.md new file mode 100644 index 0000000..e7d67c0 --- /dev/null +++ b/docs/frontend/ASSESSMENT_CARDS.md @@ -0,0 +1,221 @@ +# 🃏 Assessment Cards - Design System + +## 📋 Vue d'Ensemble + +Les **Assessment Cards** sont des composants d'interface centraux de Notytex qui affichent les évaluations sous forme de cartes dans la liste principale. Elles ont été entièrement refactorisées en 2025 pour mettre en avant les **3 informations critiques** : classe, nom de l'évaluation et statut de correction. + +## 🎯 Objectifs du Design + +### **Hiérarchie Visuelle Optimisée** + +1. **PRIMAIRE** : Nom de la classe + Statut de correction (header) +2. **PRIMAIRE** : Titre de l'évaluation (corps principal) +3. **SECONDAIRE** : Meta-informations (trimestre, date, exercices, coefficient) +4. **ACTIONS** : Boutons contextuels selon l'état de correction + +### **Système de Couleurs Intelligent** + +Le header utilise un **code couleur basé sur l'état de correction** : + +- 🔴 **Rouge** : 0% correction (non commencée) +- 🟠 **Orange** : 1-99% correction (en cours) +- 🟢 **Vert** : 100% correction (terminée) + +## 🏗️ Structure de la Card + +``` +┌─────────────────────────────────────────┐ +│ Header: Classe + Progression │ ← Couleur selon statut +├─────────────────────────────────────────┤ +│ Titre de l'évaluation (très visible) │ +│ Description (optionnelle) │ +│ Meta: T1 • Date • Exercices • Coeff │ +│ Actions: Détails + Noter/Résultats │ +└─────────────────────────────────────────┘ +``` + +## 🎨 Spécifications Techniques + +### **Header Coloré Dynamique** + +```jinja2 +{% 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'} +} %} +``` + +**Logique de couleur :** + +- `progress.percentage == 0` → Rouge +- `progress.percentage == 100` → Vert +- Sinon → Orange + +### **Hiérarchie Typographique** + +| Élément | Classes TailwindCSS | Rôle | +| --------------- | ------------------------------------------- | ------------------------ | +| **Classe** | `text-base md:text-lg font-semibold` | Identification rapide | +| **Titre** | `text-xl md:text-2xl font-black` | Information principale | +| **Description** | `text-sm text-gray-600 italic line-clamp-2` | Contexte optionnel | +| **Meta** | `text-xs font-medium text-gray-600` | Informations secondaires | +| **Actions** | `text-xs font-medium` | Boutons d'action | + +### **Indicateur de Progression** + +```jinja2 +
+
+ {% if progress.percentage == 0 %} + + {{ progress.percentage }}% + {% elif progress.percentage == 100 %} + + TERMINÉ + {% else %} + + {{ progress.percentage }}% + {% endif %} +
+
+``` + +## 🔄 Actions Contextuelles + +### **Logique Conditionnelle** + +```jinja2 +{% if progress.percentage == 100 %} + + + Résultats + +{% else %} + + + Noter + +{% endif %} +``` + +### **Actions Disponibles** + +- **Détails** : Toujours disponible, accès à la vue d'ensemble de l'évaluation +- **Noter** : Si correction < 100%, accès direct à l'interface de notation +- **Résultats** : Si correction = 100%, accès aux statistiques et analyses + +## 📱 Responsive Design + +### **Grille Adaptative** + +```css +.grid { + grid-template-columns: repeat(1, minmax(0, 1fr)); /* Mobile */ +} + +@media (min-width: 768px) { + .grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); /* Tablet */ + } +} + +@media (min-width: 1024px) { + .grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); /* Desktop */ + } +} +``` + +### **Typographie Responsive** + +- **Titre** : `text-xl md:text-2xl` (grandit sur desktop) +- **Classe** : `text-base md:text-lg` (grandit sur desktop) +- **Meta** : `text-xs` (constante pour optimiser l'espace) + +## 🎭 États et Interactions + +### **États des Cards** + +1. **Normal** : `shadow-lg` +2. **Hover** : `hover:shadow-xl transform hover:scale-105` +3. **Focus** : Gestion du focus sur les liens d'action + +### **Animations** + +- **Transition globale** : `transition-all duration-300` +- **Scale sur hover** : `transform hover:scale-105` +- **Pulse sur progression** : `animate-pulse` (quand en cours) + +## 📊 Informations Affichées + +### **Header (Primaire)** + +- **Classe** : `assessment.class_group.name` (ex: "6ème A") +- **Progression** : `progress.percentage` avec état textuel + +### **Corps (Primaire)** + +- **Titre** : `assessment.title` (ex: "Contrôle Chapitre 3") +- **Description** : `assessment.description` (optionnelle) + +### **Meta (Secondaire)** + +- **Trimestre** : Badge coloré avec `T{{ assessment.trimester }}` +- **Date** : `{{ assessment.date.strftime('%d/%m') }}` +- **Exercices** : `{{ assessment.exercises|length }} ex` +- **Coefficient** : `Coeff {{ assessment.coefficient }}` +- **Progression détaillée** : `{{ progress.completed }}/{{ progress.total }} notes` + +## 🔧 Structure du Composant + +### **Fichier** : `templates/components/assessment/assessment_card.html` + +```jinja2 +{% macro assessment_card(assessment) %} + +{% set progress = assessment.grading_progress %} + + +
+ + + +
+{% endmacro %} +``` + +### **Utilisation** + +```jinja2 +{% from 'components/assessment/assessment_card.html' import assessment_card %} + +
+ {% for assessment in assessments %} + {{ assessment_card(assessment) }} + {% endfor %} +
+``` + +## 🎨 Palette de Couleurs + +### **Headers de Progression** + +- **Non commencée** : `from-red-500 to-red-600` (Gradient rouge) +- **En cours** : `from-orange-500 to-orange-600` (Gradient orange) +- **Terminée** : `from-green-500 to-green-600` (Gradient vert) + +### **Actions** + +- **Détails** : `bg-gray-50 hover:bg-gray-100` (Neutre) +- **Noter** : `bg-orange-50 hover:bg-orange-100` (Orange) +- **Résultats** : `bg-green-50 hover:bg-green-100` (Vert) + +### **Trimesters (Meta)** + +- **T1** : violet (`violet-400`, `violet-100`, `violet-800`) +- **T2** : purple (`purple-400`, `purple-100`, `purple-800`) +- **T3** : fuchsia (`fuchsia-400`, `fuchsia-100`, `fuchsia-800`) + diff --git a/templates/components/assessment/assessment_card.html b/templates/components/assessment/assessment_card.html index 3515d4a..48946b6 100644 --- a/templates/components/assessment/assessment_card.html +++ b/templates/components/assessment/assessment_card.html @@ -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] %} -
- +
+
+
- - +
-
Trimestre {{ assessment.trimester }}
+
{{ assessment.class_group.name }}
+
+ + +
+
+
+ {% if progress.percentage == 0 %} + + {{ progress.percentage }}% + {% elif progress.percentage == 100 %} + + TERMINÉ + {% else %} + + {{ progress.percentage }}% + {% endif %} +
+
-
{{ assessment.date.strftime('%d/%m/%Y') }}
-
-

{{ assessment.title }}

- - -
-
- - - - {{ assessment.class_group.name }} -
- -
-
- - - - {{ assessment.exercises|length }} exercice(s) -
- -
- Coeff. {{ assessment.coefficient }} -
-
- - - {% set progress = assessment.grading_progress %} -
- {{ progress_indicator(progress, True, assessment.id) }} - - -
- {{ progress.completed }}/{{ progress.total }} -
-
-
+
+ +

{{ assessment.title }}

+ {% if assessment.description %} -

{{ assessment.description }}

+

{{ assessment.description }}

{% endif %} - -
- - - - - - Détails - - - - - - - Noter - - - - - - - - Modifier - +
+ +
+
+ + T{{ assessment.trimester }} +
+
+ + + + {{ assessment.date.strftime('%d/%m') }} +
+
+ + + + {{ assessment.exercises|length }} ex +
+
+ Coeff {{ assessment.coefficient }} +
+
+ {{ progress.completed }}/{{ progress.total }} notes +
+
+ + +
+ + + + + + Détails + + + {% if progress.percentage == 100 %} + + + + + + Résultats + + {% else %} + + + + + + Noter + + {% endif %} +
-{% endmacro %} \ No newline at end of file +{% endmacro %}