Update SelectedTap Modal on Mobile to V2 Design

[tomporvaz]

Is your feature request related to a problem? Please describe. The SelectedTap modal on mobile should match the new V2 designs with both a half modal and full screen modal. When a user selects resource pin on the map, a half modal should display some information, and when the user clicks on that modal it should expand to take up the full screen.

Describe the solution you'd like Mobile Design in Figma

Describe alternatives you've considered n/a

Additional context This issue has been previously worked on in issue #229 and #250 as well as #286.

[vontell]

Writing out the implementation details so others can follow along or learn as well!

Requirements / Features to implement

Discovered mostly by comparing the functionality on develop vs the Figma design

• [x] Verify that the code for expanding the modal works - I noticed that even though the half-modal functionality has been implemented in a preview PR, it seems to always open as a full modal
• [ ] Ensure that the sliding modal logic is the only part that is customized by isModal - the contents are the same for mobile and desktop, so this can be in one component
• [x] Determine if the image shown in the modal is from a user, or from Google Street View. If from Street View, I will use their JavaScript services found here
• [x] Implement the new content layout, pulling data from the Phlask database (and determine if all the content is available - looks like description is, but the other content like norms and rules are not)
• [x] Look into a Google Maps API to grab the address for a given lat/long
• [x] Fix bug where the directions button doesn't do anything
• [x] Look through the data and determine what possible labels are
• [x] Add a share button
• [ ] Ask the project management/design team what options they want in the three dots menu

[vontell]

Progress so far:

• Fixed bug where directions button wouldn't actually work
• Added a default of Google street view when the default image is being shown
• Started to look into the hours display, but I learned that this data is not consistent and is often missing.
• Fixed collapsable display logic (seems like the height was overridden)

Next steps:

• Figure out proper hours display
• Use new icons
• Hook up the share and option menus
• Port over to desktop

Loom Video: https://www.loom.com/share/4520c8f877c048a8b8f6bbedf27382dc?sid=80446f49-aa01-4dce-b93a-caf6c2d97784

Images:

[vontell]

Next steps after standup:

• Pass street view idea to design team, use default image in first iteration

[tomporvaz]

I sent a note on the design slack for feedback on the street view image, and @gcardonag explained the correct hours format and data sources.

[tomporvaz]

@vontell Looks like PR #387 has been reviewed and there are a handful of small changes requested for the PR to be merged.

[brendanvg]

Please unsubscribe me!

On Tue, Mar 26, 2024 at 8:56 PM Aaron Vontell @.***> wrote:

Closed #361 https://github.com/phlask/phlask-map/issues/361 as completed via #387 https://github.com/phlask/phlask-map/pull/387.

— Reply to this email directly, view it on GitHub https://github.com/phlask/phlask-map/issues/361#event-12258293795, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADEMLC4ACG3KKE7KZW2N7K3Y2IKNDAVCNFSM6AAAAABA4DY6E2VHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJSGI2TQMRZGM3TSNI . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[tomporvaz]

Please unsubscribe me! … On Tue, Mar 26, 2024 at 8:56 PM Aaron Vontell @.> wrote: Closed #361 <#361> as completed via #387 <#387>. — Reply to this email directly, view it on GitHub <#361 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADEMLC4ACG3KKE7KZW2N7K3Y2IKNDAVCNFSM6AAAAABA4DY6E2VHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJSGI2TQMRZGM3TSNI . You are receiving this because you are subscribed to this thread.Message ID: @.>

Sorry @brendanvg if you are getting notifications you don't want. Unfortunately, I don't think this is something we can change for you. You could update your notifications in settings or check your watch status on this repository.

[tomporvaz]

Thanks for your help on this one @vontell.