[UX] Cartes kanban : lisibilité — titre d'abord, métadonnées ensuite #67

Open
opened 2026-10-28 23:28:50 -04:00 by bruno · 0 comments
Owner

Constat (audit visuel, v0.41.0)

Sur une carte, titre, code, labels, assigné, date, âge et boutons se disputent la place au même niveau visuel. Les labels Gitea utilisent background: #couleur30; color: #couleur : avec une couleur claire choisie dans la forge, le texte devient illisible sur fond sombre (et inversement en clair), car aucun calcul de contraste n'est fait. Le bouton épingler (📌) et le code technique (branches, commits, PR) prennent autant de place que le titre, qui est l'information de travail.

Travail attendu

  • Hiérarchie stricte dans _card.html : titre (2 lignes max, tronqué proprement), puis labels, puis une seule ligne de métadonnées (assigné, échéance, âge).
  • Calculer la couleur de texte des labels à partir de leur fond (clair/foncé selon la luminance) pour garantir le contraste dans les deux thèmes.
  • Reléguer le code technique (branches/commits/PR) en seconde ligne discrète, et remplacer l'épingle emoji par l'icône trait du système.

Critère de validation

Vérifié par le build de l'utilisateur : sur un tableau chargé, on lit les titres en premier, les labels restent lisibles quelle que soit leur couleur Gitea, et les cartes ont la même hauteur visuelle par densité.

Hors portée

Le contenu des cartes (quelles données) ne change pas, seule leur présentation.

## Constat (audit visuel, v0.41.0) Sur une carte, titre, code, labels, assigné, date, âge et boutons se disputent la place au même niveau visuel. Les labels Gitea utilisent `background: #couleur30; color: #couleur` : avec une couleur claire choisie dans la forge, le texte devient illisible sur fond sombre (et inversement en clair), car aucun calcul de contraste n'est fait. Le bouton épingler (📌) et le code technique (branches, commits, PR) prennent autant de place que le titre, qui est l'information de travail. ## Travail attendu - Hiérarchie stricte dans `_card.html` : titre (2 lignes max, tronqué proprement), puis labels, puis une seule ligne de métadonnées (assigné, échéance, âge). - Calculer la couleur de texte des labels à partir de leur fond (clair/foncé selon la luminance) pour garantir le contraste dans les deux thèmes. - Reléguer le code technique (branches/commits/PR) en seconde ligne discrète, et remplacer l'épingle emoji par l'icône trait du système. ## Critère de validation Vérifié par le build de l'utilisateur : sur un tableau chargé, on lit les titres en premier, les labels restent lisibles quelle que soit leur couleur Gitea, et les cartes ont la même hauteur visuelle par densité. ## Hors portée Le contenu des cartes (quelles données) ne change pas, seule leur présentation.
bruno added the kanban:todo label 2026-10-28 23:28:50 -04:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Projets/kanbante#67