Improve compact desktop usability and action guidance
All checks were successful
Deploy Sokko G / deploy (push) Successful in 19s

This commit is contained in:
Shinuwa 2026-10-05 21:47:16 +02:00
parent 0ac1a0974e
commit 0fc18cd8b9
24 changed files with 325 additions and 90 deletions

View file

@ -161,6 +161,8 @@ Les heroes de la page d'accueil et des pages jeux utilisent le meme style via `.
Sur la page d'accueil, le hero conserve deux colonnes en fenêtre large. Jusqu'à `1024px`, le groupe des deux statistiques passe sous le texte et les actions, aligné à gauche. Les deux cartes restent côte à côte tant que leur largeur le permet.
L'action principale dépend des données locales : sans toolbox, « Créer ma première toolbox » ouvre directement la création guidée ; dès qu'une toolbox existe, « Voir mes toolboxes » mène à la liste. « Voir les jeux » reste l'action secondaire.
Caracteristiques :
- fond commun nebula sombre ;
@ -573,7 +575,7 @@ Sidebar :
- icones SVG pour Accueil, Toolboxes et Jeux ;
- navigation active en violet soft ;
- le logo controller garde le gradient de l'ancien badge et une rotation au hover.
- `sidebar[data-variant="compact"]` réduit la navigation à 72 px uniquement pendant le déploiement de la toolbox latérale : la manette conserve sa rotation au hover, les trois entrées principales et les trois raccourcis secondaires utilisent `Tooltip`, puis l’encart inférieur contient uniquement les actions globales exporter/importer empilées avec leurs propres infobulles ; à la fermeture du panneau, la sidebar desktop reprend sa variante normale.
- `sidebar[data-variant="compact"]` réduit la navigation à 72 px jusqu'à `1024px`, ainsi que lorsqu'un panneau toolbox latéral est ouvert en fenêtre large : la manette conserve sa rotation au hover, les trois entrées principales et les trois raccourcis secondaires utilisent `Tooltip`, puis l’encart inférieur contient uniquement les actions globales exporter/importer empilées avec leurs propres infobulles.
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.
@ -623,6 +625,8 @@ Outil Tableau :
Les toolboxes sont locales et stockees dans le navigateur.
La fenêtre « Ajouter un outil » peut s'étendre jusqu'à `900px` et présente les outils sur 4 colonnes à `768px`, puis 5 à partir de `900px`. Chaque carte compacte place l'icône à gauche du nom complet, puis une courte phrase d'usage issue de `site.json` sur toute la largeur. Le contenu est réparti dans les cinq catégories du catalogue, chacune signalée par un titre et un séparateur discret, sans onglets de filtrage. Lorsque la hauteur disponible ne suffit pas, la modale utilise directement `scrollbar-control`, la scrollbar verticale du NDS. L'ajout rapide reste une grille d'icônes sans description ; ses boutons utilisent les infobulles NDS au survol et au focus.
Regles UI :
- pas de champ description ;
@ -668,7 +672,7 @@ Drawer toolbox :
- la largeur revient a `700px` a chaque ouverture et n'est pas persistee ;
- les actions internes ne doivent pas fermer le drawer sauf action explicite.
La cible responsive est une fenêtre d'ordinateur de second écran. Les parcours sont validés à partir de `768px`. Il n'existe pas de navigation dédiée au téléphone ; sous la largeur validée, l'application reste accessible sans garantie de confort.
La cible responsive est une fenêtre d'ordinateur de second écran, en plein écran ou en demi-écran. Les parcours sont validés à partir de `768px`. Il ne faut pas concevoir de navigation, de composant ni de parcours dédié au téléphone. Sous la largeur validée, les règles servent uniquement à conserver l'accès au contenu et à empêcher un débordement horizontal global, sans garantie de confort.
Quand la zone utile d'une page toolbox passe sous `900px`, les outils sont forcés sur une seule colonne et le sélecteur une/deux colonnes est masqué. La préférence de disposition reste enregistrée et redevient applicable lorsque la largeur le permet.
@ -680,7 +684,8 @@ Notifications internes :
- 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 ;
- durée par défaut des confirmations ordinaires : 6 secondes ; une durée explicite reste prioritaire avec un minimum d'une seconde ;
- les alertes Timer, Calendrier et le rappel de sauvegarde sont persistants jusqu'à leur fermeture manuelle ;
- style plus visible que les confirmations simples : bordure conique animee, pulse leger, arrivee depuis le cote configure.
## 17. Controles Interactifs
@ -861,7 +866,7 @@ Date picker et menus compacts :
- afficher les portraits dans un cadre compact 3 / 4 plafonné à 250 px de hauteur, avec `object-fit: cover` et cadrage centré ; les fichiers source restent inchangés ;
- les deux variantes de Petit Esprit de Feu utilisent `object-position: center 20%` pour descendre légèrement le personnage dans son cadre ;
- la grille utilise un minimum de 220 px pour afficher cinq colonnes à 1920 px, puis réduit le nombre de colonnes sur les petits écrans ; limiter les cartes à 280 px de largeur ; le recto fixe leur hauteur avec le portrait et un pied de 96 px, indépendamment des noms et des variantes ;
- la grille utilise un minimum de 220 px pour afficher cinq colonnes à 1920 px, puis réduit le nombre de colonnes selon la largeur disponible ; limiter les cartes à 280 px de largeur ; le recto fixe leur hauteur avec le portrait et un pied de 96 px, indépendamment des noms et des variantes ;
- le nom de forme revient à la ligne au recto, dans le pied fixe de 96 px ;
- le recto affiche uniquement les icônes d'éléments, centrées dans le pied de carte, avec texte alternatif et infobulle ;
- le numéro Aniimo reste un texte HTML visible en bas à gauche du portrait, afin de rester accessible à la recherche du navigateur ;
@ -903,7 +908,9 @@ masquage. La colonne d'actions occupe la hauteur existante du
header afin que cet encart n'ajoute pas de ligne ou d'espace vertical. Cette
association est conservée dans `localStorage` entre les sessions ; elle est retirée
si la checklist, la toolbox liée ou la liaison jeu/toolbox disparaît.
Le bouton checklist des pages de résultats filtrables ouvre une modale NDS qui
Le bouton texte « Utiliser les résultats », accompagné de l'icône de copie, est visible
dans l'en-tête des pages de résultats filtrables. Son `aria-label` et son infobulle
conservent le contexte précis des éléments concernés. Il ouvre une modale NDS qui
rappelle que les filtres, le regroupement et le masquage déterminent les éléments
exportés. La copie texte reste disponible sans toolbox liée ; l'action de création
est alors désactivée et accompagnée d'une notice inline. Avec une toolbox liée, la