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

feat: improve assessment card design

Browse Source
This commit is contained in:
Bertrand Benjamin
2025-08-07 18:47:38 +02:00
parent 2a7a4cd595
commit e08466fab3
2 changed files with 326 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
docs/frontend/ASSESSMENT_CARDS.md Normal file
View File

@@ -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
<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>
```
## 🔄 Actions Contextuelles
### **Logique Conditionnelle**
```jinja2
{% 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">
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">
Noter
</a>
{% 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) %}
<!-- Logique des couleurs selon progression -->
{% set progress = assessment.grading_progress %}
<!-- Configuration du header coloré -->
<!-- Card avec structure flexbox -->
<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 coloré -->
<!-- Corps avec titre, description, meta -->
<!-- Actions contextuelles -->
</div>
{% endmacro %}
```
### **Utilisation**
```jinja2
{% from 'components/assessment/assessment_card.html' import assessment_card %}
<!-- Dans une grille -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{% for assessment in assessments %}
{{ assessment_card(assessment) }}
{% endfor %}
</div>
```
## 🎨 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`)

181
templates/components/assessment/assessment_card.html
View File

@@ -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 %}