Add functionality to reopen directions

[hlfan]

An idea for closing #6442:
Use the selected mode of the mode group to trigger showing the route again after hiding the sidebar.
This does NOT request the route again.

Tested locally.

[tomhughes]

I'm not sure we need to go to a lot of effort to avoid requesting the route again - if the user has closed the results and then requests them again is refetching them wrong?

[hlfan]

Just that the button is not spammable, but if re-requesting the route should be the standard, then adding and removing the listener would be better.
I don't even think the push- & popstate logic needs to be touched.

[pablobm]

I think this is a slight improvement, but doesn't solve the problem. As a user it's not obvious to me that, if I'm looking at a walking route and close the panel, clicking on "walking" again will bring it back.

I'm thinking of an alternative:

1. The X should close both the form and the results panels.
2. The X in the results panel should only show in narrow screens, when the form doesn't show the form panel (or other panels such as the announcement banners).

The rationale is the following:

1. On desktop, we can only close form+results together, avoiding this issue.
2. On mobile, the form doesn't appear so there's no X to close the whole thing. Show an X in the results to achieve the same effect.
3. In the edge case of someone resizing the window from small to large, having closed the results means they won't show up again when enlarging the window.

That's after a cursory test resizing windows myself, so I might be missing some use cases.

[pablobm]

Another dubious behaviour I have noticed: if you close the results panel, the route line disappears from the map, but the "start" and "end" markers remain:

[hlfan]

Yeah, this kinda "configuration screen" could maybe be merged with an "overview" screen with only 1-3 lines of route instructions from https://c.osm.org/t/138969.
But I don't have an idea how to incorporate all that in one understandable way.
That may include reverting a part of #5960.
@mjourdan, do you have some ideas?

[mjourdan]

Is it actually of any use to hide the directions while keeping the directions form visible? Hiding both at once sounds like the right thing to do, both on desktop and on mobile.

On mobile the directions form beeing held in the burger menu, and then the results covering the burger menu, are issues in themselves. I'll do some mockups.

[mjourdan]

Here is an example of a directions form on mobile. The form could slide in from the right when tapping the "directions" icon. It would hide out when tapping the "right pane" icon. Both the form and results would reopen at once when tapping again the "directions" icon. Clearing the results requires to clear either the start or the end field.

What do you think?

[pablobm]

Thank you! Let's see if we can move this forward.

If these elements slide from the right, that'll conflict with the widescreen/desktop view where they live on the left-hand side. Technically it could be different on each case by use of a media query, but adds complexity.

On your second screen, the form is showing as well as the route line, but not the list of directions. How do users re-open the directions? Or I guess how do they open them in the first place, as there's no "submit".

Having the directions completely obscure the map on mobile... might actually work? Assuming there's a way to hide/show at will. I think I like it better than the current solution where it takes exactly half the screen.

[mjourdan]

Thank you! Let's see if we can move this forward.

If these elements slide from the right, that'll conflict with the widescreen/desktop view where they live on the left-hand side. Technically it could be different on each case by use of a media query, but adds complexity.

I don't feel like it adds complexity over the current situation, as the search and direction forms are hidden behind the burger menu.

On your second screen, the form is showing as well as the route line, but not the list of directions. How do users re-open the directions? Or I guess how do they open them in the first place, as there's no "submit".

Yeah, I updated the mockups with some hints, to state that this second screen was meant as a transition. No direct way to go back to it from the fully expanded directions. Users would hide the directions by tapping the "right pane" icon on the second and third screen. They would then be able to reopen the directions by tapping the routing icon from first screen.

Having the directions completely obscure the map on mobile... might actually work? Assuming there's a way to hide/show at will. I think I like it better than the current solution where it takes exactly half the screen.

As an alternative, using a bottom sheet rather than a popover would allow to keep both the form and the map visible:

[pablobm]

Sorry, I meant complexity in the implementation. It would need a set of rules (and probably perhaps JS) for the wide version (desktop) and another set for the narrow version (mobile). I like the proposed bottom sheet, but it's a whole different UI to implement and maintain in parallel to the desktop one.

[mjourdan]

Ok. Exploring the idea further with search, while keeping the buttons on the left:

[pablobm]

Thank you @mjourdan - In terms of the original problem, what I take away from your proposals is to put the search form and the results in the same panel, and hide/show/resize the results with a "pull" interface. Does that make sense?

[mjourdan]

Yes it does, though that's not all, so I'll try to sum up the changes.

Strictly related to search and directions:

• (mobile) search and directions forms are moved out of the navigation menu, and accessible through buttons on the map instead
• (mobile) search and directions button reveal a popover, which shows both forms and results
• a "collapse" button is used for hiding the popover
• resizing would be a thing only a thing if we were going to implement the bottom sheet pattern rather than the popover
• location results (bot for search and directions) appear in dropdown lists connected to their input fields. This allows people to select the most relevant location in the directions form, rather than being force to use the first matches.
• (not shown on mockups) selecting a location from the search results offers a mean to get to the location details
• when showing details about a location, the popover offers to navigate back to the results

As we add two more buttons on the map, the changes above depend on some more changes, mainly to avoid cluttering on mobile (these can perhaps be tracked through a separate issue, but here they are):

• move language selection to the navigation menu
• move layers and legend buttons to the navigation bar
• reorganize the navigation menu (not shown on mockups)
• move the zoom controls near to the scale line, as the former affect directly the latter
• move the scale line above the copyright notice, so it is not hidden behind the bottom leaflet on mobile

[pablobm]

Thank you! This looks good but it has strayed a bit from the original topic. Perhaps we should open a new, separate issue to discuss a possible redesign of all those interface elements? @hlfan, what do you think?

As for this specific issue, I do like the pull interface.