healthyregions / chicago-environment-explorer

ChiVes harmonizes & standardizes environmental data across dozens of sources to make it accessible for full exploration, alongside a growing list of resources on the Chicago Environment, cultivated by a community of curators.
8 stars 1 forks source link

feat: basic responsive layout for index builder #156

Closed bodom0015 closed 4 months ago

bodom0015 commented 5 months ago

Problem

Smaller screens have overlapping elements

We would like a more responsive layout that adjusts to the size of the user's screen

Starts to fix #150

Approach

How to Test

  1. Navigate to https://deploy-preview-156--chicago-env-explorer.netlify.app/builder
    • You should be brought to the "Select Indicators" page
    • For smaller screens, you should see that "Select Indicators" now has a stacked layout with a single scroll bar
  2. Select one or more indicators and click Next
    • You should be brought to the "Choose Weights" page
    • For smaller screens, you should see that "Choose Weights" now has a stacked layout with a single scroll bar
  3. Adjust weights as desired and click Next
    • You should be brought to the "Summary & Map" page
    • For smaller screens, you should see that "Summary & Map" left-side panel is hidden by default (click the info icon to show the panel). The panel height should also change based on the size of the user's screen.
netlify[bot] commented 5 months ago

Deploy Preview for chicago-env-explorer ready!

Name Link
Latest commit 21a6278d34cc42185193f7ef19be479fe99a4948
Latest deploy log https://app.netlify.com/sites/chicago-env-explorer/deploys/663e927193d26100083b1a1d
Deploy Preview https://deploy-preview-156--chicago-env-explorer.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

bodom0015 commented 4 months ago

Thank you, @mradamcox! I think I was able to address your feedback here - let me know what you think!

I know one issue that remains is that smaller screens in landscape mode have a weird split-up panel display.. but Iā€™m hoping this will be an edge case that no one runs into :sweat_smile: