search

marleymarl / geotimeline

12 stars 10 forks source link

Improve mobile responsiveness of map component #9

Closed DRD161 closed 4 years ago

DRD161 commented 4 years ago

I would like to improve the mobile responsiveness of the component. Seeing as how mobile use is a huge portion of web traffic (especially in other countries) being able to report cases of COVID-19 on the go is crucial to the success of this project.

This would be a relatively simple fix that would have a huge impact on the project. Below is a screenshot of the current state of the project on mobile.

IMG_B245ED9D9655-1

DRD161 commented 4 years ago

Greg and I spoke today and decided to utilize a collapsible menu to house the information table. Starting at the tablet breakpoint the menu will default to open so that users have a clear indication as to what that table is for, what data has already been added, etc. Then they can close it as needed.

heldersepu commented 4 years ago

Was checking a bit on this and the page starts to show a horizontal scroll w/ anything less than 920px.. I'm hiding the information table(.ant-col.data) for anything less than that: https://github.com/marleymarl/geotime/blob/51cd97a3167e018a72b4ebba181c09b62e10f93c/src/App.css#L44-L46

Next need to show a button to hide show the info table

heldersepu commented 4 years ago

Here is what I got so far: Screenshot from 2020-03-30 22-36-34

Screenshot from 2020-03-30 22-37-00

That new burger button on the bottom left shows when the screen is less than 920px

heldersepu commented 4 years ago

I was playing the table and I think we should consider combining lat/lon into one col to reduce teh size of the table...

see below:
Screenshot from 2020-03-31 11-57-29

DRD161 commented 4 years ago

That makes sense. We may want to label lat and lng so users know which is which. Also, it might be worth making the button larger so that it stands out more to users as well as make the cursor a pointer to show users that it is clickable. This is the behavior a user would expect from a button. We could also add text to the button to describe what it does such as "View Table" or something along those lines.

We could use Ant Design for proper styling so it follows the same design as the rest of the application.

marleymarl commented 4 years ago

This issue has been functionally solved with the change to the toggle button and the inclusion of the intro.js. I'm going to close this for now and we can open a new issue for any proposed changes based on user feedback.