Feature: For Mobile, Split Map/List View

[JohnHaoHuang]

Overview

To enhance usability and align with contemporary mobile trends, the implementation of a split view option between a map and a list view is needed. This feature enables users to seamlessly navigate through the list while simultaneously observing real-time updates of listing items or locations on the map. This functionality provides users with a visual reference, clarifying the spatial relationship between pantry and meal locations in relation to the items being displayed in the list.

Action Items

• Pre-Approve by Design Lead
• Validate Design Component with Dev Team

Resources/Instructions

Under Ready for development, in the frame, Split View Between Map/List...

https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-%231?type=design&node-id=2886%3A7816&mode=design&t=FJDgZzcfu4mHtHh0-1

[fancyham]

Looks nice and I think good to show the devs to get their feedback/

I wonder if the handle will be obvious enough and if we can do dragging on the web?… is the list view infinitely resizable, or only full height, half, and hidden?

The handle and dragging will probably be worth trying out and testing with users.. I suspect not everyone knows that a horizontal bar is a draggable handle…

another more ugly way might be to do something like this:

[JohnHaoHuang]

Finalized the idea with design with design lead. Talked to the dev. team about the event listener ( when the user gently swipe vs. hard swipe ). Dev. team said they need to have a look and try it out. Please view the Figma link for the updated final design for the split screen. Please have a look and message me at slack @JohnHaoHuang. Thanks!

https://www.figma.com/file/9hPmNSsyaH2VMGNz5mffmI/FOLA-Design-%232?type=design&node-id=640%3A124&mode=design&t=eV5JSuakNJUCUm8g-1

[fancyham]

Dev team is working on this via

• Update Search Result UI #1867

[fancyham]

Related bug on the live site

• Text panel obscures map and pin on mobile, off-center on desktop #2168