GeotrekCE / Geotrek-rando-v3

Geotrek public data website (version 3)
https://geotrek-rando-v3.readthedocs.io/stable/
MIT License
16 stars 14 forks source link

Keep user search results (scroll position and map fitbounds) when returning from a detail page #1282

Closed dtrucs closed 3 days ago

dtrucs commented 1 month ago

When a user navigates the search page (scrolls to a particular card, zooms in on a particular location), clicks on a card and then returns to the search page, the search result is reset. It's not a great user experience. I think the view must be the same as the one displayed before clicking on the card.

1. Activate this feature only with the history manipulation

history refers to the use of the browser's "back" or "forward" buttons. We need to differentiate between users who want to return to the state of a search result (i.e. click on the "back" button) and those who want to see the full content of the search page (i.e. click on the "search" button).

2. Activate the scrollRestoration browser feature

The scrollRestoration is activated after the user click on the the browser's "back" or "forward" buttons: The location on the page to which the user has scrolled will be restored.

:warning:: The search page contains infinite scrolling, so it is necessary to take into account the “current” page consulted to restore scrolling at this position. :warning:: For the moment, the search page scroll bar is defined on the list of cards, and should be moved to the body's page to process the scrollRestoration.

3. Keep the state of the map and restore it

The last step is to memorize the last user interaction with the search map (i.e saving bounds) to restore it after using history manipulation. And filter the list of card if enableSearchByMap setting is enabled.

dtrucs commented 1 week ago

Another feature is to add button from details page to "go back" the previous search result:

Examples of integration in mobile and desktop version:

image

image (the tooltip is displayed only when hovering the button)

NB: It's also possible to remove this button by defining this CSS selector in your /style.css

.custo-go-back-button {
  display: none;
}
camillemonchicourt commented 3 days ago

Fait dans la 3.24.0, quand on consulte une fiche détail et qu'on revient à la page recherche, on reste sur la zone de carte affichée précédemment et sur l'emplacement du scroll dans la liste.

babastienne commented 3 days ago

Note : The search page can sometimes be broken if you have already override the size of your header by custom CSS. You need to be careful when updating your application if you have a custom CSS selectors..