feat: place de la recherche à l'écran, sur mobile et sur desktop - #1
Merged
Merged
Conversation
Le repli du formulaire en résumé se déclenchait sur tout changement du résultat d'itinéraire. `useItinerary` étant `server: false`, celui-ci passe de `undefined` à `null` au montage : sur écran étroit le formulaire se repliait aussitôt, sans résumé à afficher puisqu'aucune recherche n'avait eu lieu — plus rien n'était visible ni cliquable. Le repli exige désormais un résultat, et son état dérive de la présence d'un résumé. Le corps de l'application passe en grille : recherche, carte puis résultats sur écran étroit, colonne recherche + résultats à gauche et carte à droite sur desktop. La carte mobile descend de 38vh à 32dvh. Lien vers le dépôt dans l'en-tête.
La bannière porte le champ gare et la date plutôt qu'un bouton vers l'application : la soumission ouvre /app avec la recherche déjà dans l'URL. Sans gare saisie, seule la date est transmise. Les autres modes restent liés en dessous. La bannière n'a plus de hauteur fixe ni de `overflow-hidden` : le contenu dépassait sous 700 px de haut, et la liste de suggestions était coupée au bord du bloc. Lien vers le dépôt dans les en-têtes, le bandeau « open source » et le pied de page.
Les deux liens sortants de la fiche de destination deviennent deux boutons de largeur égale, chacun dans la couleur de son revendeur : bleu nuit #0c131f pour SNCF Connect, vert #00705f pour Trainline. Les valeurs sont relevées sur les styles calculés de leurs propres pages. Trainline utilise le vert clair de son logo (#00a88f) sous du texte blanc, soit 3:1 — sous le seuil AA. C'est leur vert foncé de bouton qui est retenu, à 6:1.
3000 est occupé par d'autres services sur la machine de développement. Sans port fixe, Nuxt en choisit un libre au hasard et les URL changent d'une session à l'autre. La production n'est pas concernée : son port vient de infra/compose.yml.
Carte et liste occupent la même cellule de grille sur écran étroit, une bascule flottante décide laquelle est devant. Taper une destination dans la liste passe sur la carte, où sa fiche s'ancre. La carte reste dimensionnée sous la liste plutôt que masquée : son cadrage se calcule sur la taille du conteneur. Le cadrage remplace ses 400 px de marge à gauche par une fraction du conteneur. Sur un écran de 393 px, cette marge donnait une largeur utile négative et sortait la moitié des marqueurs du cadre. Le suivi de taille de la carte passe de MapLibre à un ResizeObserver local : le sien écarte sa première notification, qui absorbait ici le repli du formulaire et figeait le canevas aux deux tiers de sa ligne.
La recherche traverse le haut de l'écran au lieu d'occuper le tiers supérieur de la colonne de gauche. À 1280×800, elle passe de 309 px de haut à 108, et la liste de 4,9 à 8,1 destinations visibles. Les rangées de dates deviennent `display: contents` sur la barre : leurs cellules s'alignent dans le cadre sans dupliquer le balisage. Les deux textes d'aide passent sur une seule ligne, aucun n'est supprimé — le premier est le seul endroit où le mode de recherche est énoncé. `flex-wrap` plutôt qu'un palier de largeur supplémentaire : la barre se plie en deux rangées sous 1 000 px.
csanchez-jetdev
force-pushed
the
feat/ux-app
branch
from
August 1, 2026 17:08
db725b5 to
e44d7fa
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
La recherche prenait trop de place à l'écran, sur les deux dispositions.
Desktop : la recherche passe en barre horizontale
Elle occupait 309 px en haut de la colonne de gauche, soit plus que la liste sous elle.
Mobile : bascule carte / liste
Les deux se partageaient la hauteur : la carte trop petite pour séparer les marqueurs, la liste trop courte pour en être une. Une pastille flottante choisit. Taper une destination dans la liste passe sur la carte, où sa fiche s'ancre. 10 destinations visibles au lieu de 5.
Aussi
Vérification
156 tests passent. Les 3 erreurs
lint/typechecksont antérieures à la branche et hors du diff.