jaryncolbert/recurse-world-map

Improve page responsiveness

jasonaowen opened this issue · 0 comments

The World of Recurse page is fairly responsive, but that could be improved. In particular, the navbar and footer are of fixed height, and the map is defined as a % of the screen size, which causes problems: small windows cause the Leaflet attributions to be hidden behind the footer, and large windows cause empty space to show up between the map and the footer.

Watch the interface between the map and the footer as I resize the view:
output

I see a few options to fix this problem.

  1. The biggest change would be to have a more map-centric view, with the name, search bar, and footer as overlays on the map rather than elements around the map. This is what Google Maps does.
  2. If we want to keep the elements around the map, I think we can put them in a vertical flexbox container; I did something somewhat similar on https://portfolio.recurse.com.
  3. Alternatively, we could set both the navbar and the footer to be defined in terms of the screen size, although I'd prefer the map to take up as much of the screen as possible, since that's where the content is; PR #30 takes us away from that option a little bit.

Maybe there are other ways, too! @jaryncolbert , what do you think?