Files

Bertrand Benjamin e08466fab3 feat: improve assessment card design

2025-08-07 18:47:38 +02:00

7.5 KiB

Raw Blame History

🃏 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

PRIMAIRE : Nom de la classe + Statut de correction (header)
PRIMAIRE : Titre de l'évaluation (corps principal)
SECONDAIRE : Meta-informations (trimestre, date, exercices, coefficient)
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

{% 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

<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

{% 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

.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

Normal : shadow-lg
Hover : hover:shadow-xl transform hover:scale-105
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`

{% 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

{% 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)

7.5 KiB Raw Blame History