9
103
Fork
You've already forked web
30

Impossible de défiler vers la droite sans descendre sur un itinéraire de transport en commun avec beaucoup d'options #1306

Open
opened 2025年12月08日 23:47:15 +01:00 by esmenard · 3 comments
Contributor
Copy link

Si un itinéraire de transport en commun a plus de deux ou trois options proposées, la bare de défilement vers la doite n'apparait pas sur l'écran initial, et on doit défiler vers le bas pour la voir.
L'itinéraire en question : https://cartes.app/?style=base&allez=Point+sur+la+carte%7C%7C2.2310%7C48.7044-%3EPoint+sur+la+carte%7C%7C2.3541%7C48.7468&mode=commun&planification=oui&auto=oui#12.79/48.71928/2.27002
Ecran initial :
image
Après avoir défilé tout en bas :
image

Est-ce que c'est envisageable de faire en sorte que la barre de défilement gauche-droite soit toujours visible même quand on ne voit pas le bas de l'écran itinéraire ?

Si un itinéraire de transport en commun a plus de deux ou trois options proposées, la bare de défilement vers la doite n'apparait pas sur l'écran initial, et on doit défiler vers le bas pour la voir. L'itinéraire en question : https://cartes.app/?style=base&allez=Point+sur+la+carte%7C%7C2.2310%7C48.7044-%3EPoint+sur+la+carte%7C%7C2.3541%7C48.7468&mode=commun&planification=oui&auto=oui#12.79/48.71928/2.27002 Ecran initial : ![image](/attachments/2320af9b-4494-440f-80ad-d10e5c106fa9) Après avoir défilé tout en bas : ![image](/attachments/ad78adf3-b074-47ce-a15d-e8f6ba573186) Est-ce que c'est envisageable de faire en sorte que la barre de défilement gauche-droite soit toujours visible même quand on ne voit pas le bas de l'écran itinéraire ?

As tu remarqué que cliquer sur la ligne entraîne son recentrage ? Sur mobile, entre ça et le scroll horizontal, on n'a pas besoin de la barre de défilement. On pourrait même la cacher. Mais en effet je trouve que c'est pas un comportement pas si évident à découvrir.

Sur desktop c'est plus problématique car personne ne sait qu'il faut faire maj+molette pour le scroll horizontal. On en parlait la semaine dernière sur le forum osmfr. Mais le clic de recentrage marche bien.

@laem j'allais dire qu'il faudrait ptet abandonner cette vue chronologique, mais le fait de voir d'un coup d'œil que telle option part avant mais arrive après est quand même super pratique. Et si on rajoutait en début de ligne un bouton ➡️ qui incite à cliquer dessus pour voir l'itinéraire ? Ou une phrase d'aide en petits caractères en haut du tableau ?

As tu remarqué que cliquer sur la ligne entraîne son recentrage ? Sur mobile, entre ça et le scroll horizontal, on n'a pas besoin de la barre de défilement. On pourrait même la cacher. Mais en effet je trouve que c'est pas un comportement pas si évident à découvrir. Sur desktop c'est plus problématique car personne ne sait qu'il faut faire maj+molette pour le scroll horizontal. On en parlait la semaine dernière [sur le forum osmfr](https://forum.openstreetmap.fr/t/probleme-pour-voir-le-details-des-transports/39470). Mais le clic de recentrage marche bien. @laem j'allais dire qu'il faudrait ptet abandonner cette vue chronologique, mais le fait de voir d'un coup d'œil que telle option part avant mais arrive après est quand même super pratique. Et si on rajoutait en début de ligne un bouton ➡️ qui incite à cliquer dessus pour voir l'itinéraire ? Ou une phrase d'aide en petits caractères en haut du tableau ?
Member
Copy link

Perso, je trouve ça effectivement pas très intuitif de devoir scroller en diagonal et/ou cliquer pour bien mettre en vue un itinéraire.

Dans l'exemple de @esmenard, on peut facilement "se perdre dans le vide" en scrollant uniquement vers le bas.

Pour résoudre le souci de "vision en un coup d'œil", on pourrait aussi mettre en valeur (plus grand/gras, en première ligne) les heures de départ et d'arrivée comme le fait Google par exemple.

Perso, je trouve ça effectivement pas très intuitif de devoir scroller en diagonal et/ou cliquer pour bien mettre en vue un itinéraire. Dans l'[exemple](https://cartes.app/?style=base&allez=Point+sur+la+carte%7C%7C2.2310%7C48.7044-%3EPoint+sur+la+carte%7C%7C2.3541%7C48.7468&mode=commun&planification=oui&auto=oui#12.79/48.71928/2.27002) de @esmenard, on peut facilement "se perdre dans le vide" en scrollant uniquement vers le bas. Pour résoudre le souci de "vision en un coup d'œil", on pourrait aussi mettre en valeur (plus grand/gras, en première ligne) les heures de départ et d'arrivée comme le fait Google par exemple. ![](/attachments/1023c4b7-b70f-4253-9971-019712f56ffa)
Owner
Copy link

CF ce commentaire

Autre point plus global : quand on scroll sur les lignes, quand elles sont vides car le transport est plus tard à droite, mettre un bouton flèche avec indication "3h plus tard" qui au clic nous fait scroller vers le futur.

Je vous invite à toujours faire une recherche dans les tickets existants, les problèmes sont souvent déjà remontés ;)

Le ticket !752 est également très proche. Celui-ci !504 est très complet sur le sujet de l'itinéraire. Celui-ci donne quelques réflexions qui ont conduit à ce choix de frise chronologique.

Mais clairement, il mérite d'être amélioré, notamment le problème cité ici 👍

CF [ce commentaire](https://codeberg.org/cartes/web/issues/503#issue-1830468) > Autre point plus global : quand on scroll sur les lignes, quand elles sont vides car le transport est plus tard à droite, mettre un bouton flèche avec indication "3h plus tard" qui au clic nous fait scroller vers le futur. Je vous invite à toujours faire une recherche dans les tickets existants, les problèmes sont souvent déjà remontés ;) Le ticket !752 est également très proche. Celui-ci !504 est très complet sur le sujet de l'itinéraire. [Celui-ci](https://codeberg.org/cartes/web/issues/174#issue-1829745) donne quelques réflexions qui ont conduit à ce choix de frise chronologique. Mais clairement, il mérite d'être amélioré, notamment le problème cité ici 👍
Sign in to join this conversation.
No Branch/Tag specified
master
abostats
SynchroM-master
gps
embeddings
lysios-patch-5
lysios-patch-4
lysios-patch-3
lysios-patch-2
lysios-patch-1
abo-serveur2
clim
zone-en-favori
categories_toujours_visibles
rechercher_ici_avant_resultats
test-2365
panoramax-contribution
add-categories-validations
gel-bug-prod
osm-note-2
broken
wikidata_booking
fuse7.3
lysios-patrimoine-3
gps2
atproto-fix-2
styles-secondaires-mais-maison
atproto-scopes
itineraire-printemps-2026
modal-sheet-5.6
nlnet-cost-climate-perf
pb-icones-religieux
couvoiture
etiennejr-patch-2
meteo-fainéante
logo-static-url
poc-page-vitrine
remove-compass
test-reproduce-1795
display-cycleway-lanes-2
poc-image
add-media-condition
mapterhorn
test-indoor-equal
outdoors-VS-indoorEqual
hiking-colors
fix-blog-typing
poc-next-international
fix-map-style-modal-not-closing
i18n
hide-odd-zoom-levels
filter_categories
resume_wikipedia
deplacement_bouttons
fix-1095
mobile_permettre_selection
position-carte-initiale
dégradé-icônes
better_wikipedia
affichage_donnees_wikidata
mobile-permettre-selection
avis-details
perf-seo
modal-sheet-5
plans-novembre
display-cycleway-lanes
fix-1227
fix-1234
etiennejr-patch-1
update-1240
fix-1236
fix-1131
photon-search-street
fix-1221
article-avis
net-haut-zoom
baies-moins-visibles
belles-fiches-lieu
fix-1157
bug-page-vie-privée
use-watername
fix-1176
carte-du-onde
fix-1166
page-news
tchou
add-icon-alias
vitesse
photon-opensearch
private-in-italic
bâtiments-3D
merge-categories
handle-private-highway
improve-findcategory
injection-pmtiles
fix-1128
check-icons
update-readme
category-rugby
bug-position-carte-vs-lieu
limites-vitesse
improve-find-category-from-tags-v2
integrer
document-osmfeature
translate-document
velo-fin-aout-25
velo-ete-2025
moins-de-maptiler
planet-pmtiles-tilemaker
fix-1048
panoramax-leger
plume
horaires-i18n
planet
maj-deps-juillet-2025
improve-find-category-from-tags
bug-encart
interactions-encart-mobile
clic-on-station
fix-1028
fix-1014
edit
add-big-rivers
add-shortbread-tiles
handle-deleted-osm-elements-v2
codeberg
improve-useEffect
immoloc
update-dashboard
analyze
terradraw
sombre2
calendar
poi-sprites-using-svg
style-sombre
sprites
annuaire
motis-gtfs-attributes
next-styled-components
dev
cool2
cool
panoramax-angle
env-static-urls
borders-only
panoramax2
intelligence
debug-iles
nouveau-serveur
france-protomaps
turbo
fouss/cartes-#338
blog2
legislatives
presentation
pas-de-geoloc-si-hash-different
protomaps
vaul
carte-trains
citiz
maj-paquets
icones
ui2
bblog
voyagevoyage
test-image-origine
bugimagefin
searchParams
voyage
avion
perf
studio
piscine
journée
année
journée-transition
score-dès-acceuil
fix-space-problem
rebase-5août
correspondance
règles-séparées
indeps-acre
demo
indeps
indeps-cachés
indication-temps-plein
indeps-refactor-simulations
indeps-vue-comparaison
indeps-inversion
barème-continu
indeps-démo
textes-branches-sécu
engine-enum
2019
transport
publicodes
as
infrance-nouvelle-landing
better-translation
co2
simplifATMP
controle-SMIC
webi18n
bug-avantages-en-nature
revert-352-infrance-navigation-v2
laem-patch-1
robots.txt
improve-perf
iframe-bugfix
quickfixes
lib
irsimple
hiringinfrance.com
dégradé
refstate
johan
zrr
logo-interactif
revert-216-improve-tracking
redesign2
zrr2
fixtrad
correction-salaire-brut
petit-state
alien-consolidate
translate-ui
npm
alien-brut-net
translatable
différent
ir18
fix-typo
add-tracking
fix-collect-missing
défauts-partout
fix-double-unfold-three
fix-double-unfold
versement-transport
blocker-questions
v3
v2.1
v2
v1
v0.6.4
v0.6.3
v0.6.2
v0.6.1
v0.6.0
0.7.0
v0.5.1
v0.5.0
v0.4.2
v0.4.1
v0.4.0
v0.3.3
v0.3.2
v0.3.1
v0.3
v0.2
v0.1-cdd-alpha
v0-démo-tag-nav
Labels
Clear labels
🎨 Design
À propos de l'interface et de l'UX
💡 Idée
Nouvelle feature à intégrer
question
Further information is requested
🌍 OSM
À propos de l'affichage et l'édition des éléments OSM
🌱 Amélioration
Amélioration/fix de l'existant
🐞 Bug
Something isn't working
📊 SEO
📋 Catégories
À propos des catégories de recherche et de l'annuaire
📖 Wiki
📝Avis
A propos de la fonction avis et de bluesky
📢 Oyez
📷 Photos
A propos des photos (sources, affichage)
🔍Recherche
A propos de la barre de recherche et de photon
🔥 Actuel
🔧 tech
🖌 Styles
Styles de la carte
🧝i18n
🧪 R&D
🚍 Transports
🚙 Voiture
🚨Prioritaire
Ticket à traiter rapidement
🚲Vélo
Cartes
climat
Communication
demo
Cette branche doit être déployée comme une démo
dependencies
Pull requests that update a dependency file
javascript
Pull requests that update javascript code
Pas urgent
Plein-air
Tuiles
Verso
Vieux
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
4 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
cartes/web#1306
Reference in a new issue
cartes/web
No description provided.
Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?