This commit is contained in:
parent
3cd350c7b8
commit
3f72f152c7
2 changed files with 88 additions and 12 deletions
|
|
@ -9,6 +9,10 @@ Avant de modifier un outil toolbox, le stockage IndexedDB, l'import/export ou le
|
|||
- `docs/STORAGE_SCHEMA.md`
|
||||
- `docs/FEATURE_CHECKLIST.md`
|
||||
|
||||
Avant de modifier le style, les composants UI, les layouts, les boutons, cards, panels, hovers, scrollbars ou notifications, lire :
|
||||
|
||||
- `DESIGN_SYSTEM.md`
|
||||
|
||||
Après ce type de modification, mettre à jour ces documents si le format ou le workflow change.
|
||||
|
||||
## Contenu éditable
|
||||
|
|
@ -48,6 +52,8 @@ Quand un outil est ajouté ou modifié :
|
|||
|
||||
Le style est en Sass dans `website/src/styles/`.
|
||||
|
||||
`DESIGN_SYSTEM.md` est la référence visuelle du projet et doit rester synchronisé avec les patterns réellement utilisés.
|
||||
|
||||
Privilégier :
|
||||
|
||||
- les tokens existants ;
|
||||
|
|
|
|||
|
|
@ -139,7 +139,61 @@ Style courant :
|
|||
|
||||
Le mot visible cote utilisateur est **outil**, pas **module**. Le terme module reste acceptable uniquement dans le code.
|
||||
|
||||
## 8. Panneaux De Section
|
||||
### Outils En Deux Colonnes
|
||||
|
||||
Les outils avec controles a gauche et resultats a droite doivent reutiliser les classes generiques `tool-split-*`.
|
||||
|
||||
Exemples actuels :
|
||||
|
||||
- calculateur ;
|
||||
- timer.
|
||||
|
||||
Regles :
|
||||
|
||||
- ratio de base 35 / 65 entre controles et resultats ;
|
||||
- panneau gauche compact, sans hauteur artificielle inutile ;
|
||||
- panneau droit scrollable uniquement quand l'utilisateur active le switch dedie ;
|
||||
- hauteur scrollable cible : environ 450 px ;
|
||||
- boutons reset, copie, scroll et tri alignes en haut a droite du panneau de resultats ;
|
||||
- edition inline des libelles plutot que boutons ou alertes navigateur ;
|
||||
- styles specifiques autorises uniquement pour la logique propre a l'outil.
|
||||
|
||||
### Timer
|
||||
|
||||
Le timer combine chronometre a etapes et comptes a rebours multiples.
|
||||
|
||||
Regles UI :
|
||||
|
||||
- tabs compactes avec icones uniquement et tooltips ;
|
||||
- chronometre avec centiemes visibles en plus petit dans le timer principal ;
|
||||
- les temps sauvegardes gardent une taille uniforme ;
|
||||
- compte a rebours sans centiemes ;
|
||||
- types visibles : `Duree`, `Heure precise`, `Pattern horaire`, `Intervalle` ;
|
||||
- les libelles au-dessus des champs `hh:mm:ss` restent accessibles en `sr-only`, mais ne sont pas visibles ;
|
||||
- les boutons de controle utilisent les icones `play-circle`, `pause-circle`, `record-circle`, `stop-circle`, `refresh`, `sort-time`, `scrollable`.
|
||||
|
||||
Alertes timer :
|
||||
|
||||
- switch a 3 etats par compte a rebours : aucune alerte, alerte si la toolbox est visible, alerte globale site ;
|
||||
- le garde-fou ne se base pas sur le temps restant, mais sur la frequence configuree ;
|
||||
- le garde-fou bloque uniquement les comptes a rebours recurrents (`Pattern horaire`, `Intervalle`) si la repetition est inferieure a 5 minutes ;
|
||||
- un `Pattern horaire` comme `X:24:X` cible `hh:24:00` et se repete toutes les heures.
|
||||
|
||||
## 8. Tabs Et Switchs
|
||||
|
||||
Tabs :
|
||||
|
||||
- utiliser le composant commun quand un outil doit alterner entre plusieurs modes ;
|
||||
- icones seules quand les labels sont evidents ou fournis en tooltip ;
|
||||
- etat actif sobre : bordure doree, fond legerement dore/violet, pas de gros glow.
|
||||
|
||||
Switchs :
|
||||
|
||||
- les switchs binaires utilisent l'icone a gauche et le rail a droite quand ils controlent un mode technique comme `scrollable` ;
|
||||
- les switchs a plusieurs etats doivent rester compacts, avec icones et tooltips ;
|
||||
- les etats desactives doivent etre clairement attenues et sans etat actif dore.
|
||||
|
||||
## 9. Panneaux De Section
|
||||
|
||||
Les grandes sections non repetitives, comme le dialogue d'origine et les sections de presentation, utilisent `.nebula-panel`.
|
||||
|
||||
|
|
@ -151,7 +205,7 @@ Style courant :
|
|||
- pas de hover sur les panneaux de lecture ;
|
||||
- implementation via le mixin `gold-panel-frame` dans `website/src/styles/_mixins.scss`.
|
||||
|
||||
## 9. Boutons
|
||||
## 10. Boutons
|
||||
|
||||
### Primary
|
||||
|
||||
|
|
@ -201,7 +255,7 @@ Les icones utilisent `currentColor` via `.ui-icon`.
|
|||
- hover danger : icone blanche + glow rouge discret ;
|
||||
- utiliser les SVG de `website/public/static/icons`.
|
||||
|
||||
## 10. Formulaires Et Checkbox
|
||||
## 11. Formulaires Et Checkbox
|
||||
|
||||
Inputs et textareas :
|
||||
|
||||
|
|
@ -219,7 +273,12 @@ Checkbox :
|
|||
- etat coche avec gradient dore/violet et coche blanche ;
|
||||
- spacing adapte dans les filtres.
|
||||
|
||||
## 11. Navigation
|
||||
Accessibilite :
|
||||
|
||||
- utiliser `.sr-only` pour conserver un label utile sans l'afficher ;
|
||||
- ne pas retirer les labels accessibles au profit du visuel uniquement.
|
||||
|
||||
## 12. Navigation
|
||||
|
||||
Sidebar :
|
||||
|
||||
|
|
@ -230,7 +289,7 @@ Sidebar :
|
|||
|
||||
Le nom de marque affiche `Sokko` en blanc et `G` en dore. Au hover, `Sokko` anime vers le dore de droite a gauche puis revient au hover out.
|
||||
|
||||
## 12. Filtres Et Tableaux
|
||||
## 13. Filtres Et Tableaux
|
||||
|
||||
Filtres :
|
||||
|
||||
|
|
@ -246,7 +305,7 @@ Tableaux :
|
|||
- bordures fines ;
|
||||
- lisibilite prioritaire sur la decoration.
|
||||
|
||||
## 13. Toolboxes
|
||||
## 14. Toolboxes
|
||||
|
||||
Les toolboxes sont locales et stockees dans le navigateur.
|
||||
|
||||
|
|
@ -261,7 +320,7 @@ Regles UI :
|
|||
|
||||
Les cards toolbox doivent garder une taille compacte. L'image/icone de cover est cliquable.
|
||||
|
||||
## 14. Donnees Jeux
|
||||
## 15. Donnees Jeux
|
||||
|
||||
Le contenu editorial editable doit rester dans :
|
||||
|
||||
|
|
@ -271,7 +330,7 @@ Le contenu editorial editable doit rester dans :
|
|||
|
||||
Les retours a la ligne `\n` du JSON doivent etre rendus correctement. Le JSX ne doit pas contenir de contenu editorial long si une entree JSON existe deja.
|
||||
|
||||
## 15. Modales Et Drawer
|
||||
## 16. Modales, Drawer Et Notifications
|
||||
|
||||
Modales :
|
||||
|
||||
|
|
@ -286,7 +345,18 @@ Drawer toolbox :
|
|||
- overlay floute leger ;
|
||||
- les actions internes ne doivent pas fermer le drawer sauf action explicite.
|
||||
|
||||
## 16. Scrollbars
|
||||
Notifications internes :
|
||||
|
||||
- pas d'alerte navigateur ;
|
||||
- utiliser les toasts internes globaux ;
|
||||
- position configurable gauche/droite via le switch de la page toolboxes ;
|
||||
- une nouvelle alerte s'empile au-dessus des precedentes ;
|
||||
- limite visible : 5 toasts ;
|
||||
- a la 6e alerte, fermer la plus ancienne ;
|
||||
- duree d'affichage cible : 2 minutes, fermeture manuelle possible ;
|
||||
- style plus visible que les confirmations simples : bordure conique animee, pulse leger, arrivee depuis le cote configure.
|
||||
|
||||
## 17. Scrollbars
|
||||
|
||||
Les scrollbars reprennent l'ancien rendu :
|
||||
|
||||
|
|
@ -316,7 +386,7 @@ Les scrollbars reprennent l'ancien rendu :
|
|||
|
||||
Ne pas ajouter de rail noir visible ni de double bordure pres des panneaux.
|
||||
|
||||
## 17. Images Et Assets
|
||||
## 18. Images Et Assets
|
||||
|
||||
Regles :
|
||||
|
||||
|
|
@ -329,7 +399,7 @@ Regles :
|
|||
- les categories de jeu utilisent des images representatives, entieres et bien cadrees ;
|
||||
- eviter les images trop grandes dans les cards.
|
||||
|
||||
## 18. Accessibilite
|
||||
## 19. Accessibilite
|
||||
|
||||
Minimum attendu :
|
||||
|
||||
|
|
@ -341,7 +411,7 @@ Minimum attendu :
|
|||
- modales avec `role="dialog"` et `aria-modal="true"` ;
|
||||
- ne pas transmettre une information uniquement par couleur.
|
||||
|
||||
## 19. A Eviter
|
||||
## 20. A Eviter
|
||||
|
||||
- accents dores partout ;
|
||||
- hover trop lumineux sur tous les elements ;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue