search

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

[Design] Make Index Builder Responsive #150

Closed Makosak closed 4 months ago

Makosak commented 5 months ago

Issue need to make index builder responsive/mobile friendly

Recommendation

Rationale

Additional context

mradamcox commented 5 months ago

@bodom0015 and I discussed this and I think there are some fairly quick changes to make that would get us far along this goal. @shubhamk008, I'm hoping this could take the pressure off of you to make full mockups soon, and get us just closer in the meantime.

We would make these CSS changes only for xs screens (up to 600px per Material-UI), either using xs classes or

@media (max-width: 600px) {
  /* … */
}

Currently we have:

image

And the goal is something closer to:

image image

The changes being:

  1. Arrange the 2 main index builder sections in column instead of in row
  2. Reduce padding on edges significantly and increase width of each section to fill screen
  3. Center elements as needed

For the map page of the Index Builder, I think just making the panel collapsible would get us close enough for now.

image