Fix overlapping menus/cards

[timothyfcook]

I'm not sure what the best UI solution is here. Two options:

1. The menus are folded up by default, only fold down when you hover over them
2. The menus are folded down, but are smaller and are always in the top-left, while the focused map and selected card are dead center so they don't overlap.

Option 1 is probably the easiest to implement.

[chelseaerdner]

I think option 1 and having the menus closed would be the best approach. Personally, I think we don't want that much focus to be on the menus and with them exposed, they take up a lot of space.

[cameronscott137]

My vote is also for option 1. However, it probably makes sense to keep the menu that is in focus exposed, eg. if I'm looking at the "DIY Gardner" resource, "Food & Gardening" and "Gardening" can shrink up, I probably want to see related DIY Gardner resources by default.

To compensate for the exposed nav, we can shrink the overall point size, and I can adjust the z-index so that the nav always appears overtop any exposed popover:

[cameronscott137]

Playing around with this more, I think shrinking up the nav and running option 1 is definitely the way to go

[chelseaerdner]

Yeah, shrinking it looks cleaner and like I mentioned to you yesterday..the nav wasn't supposed to be the focus. We want users to navigate the map via the zoom/scrolling of the canvas. I think with the nav larger, it is too prominent and over powers all the work that went into the map itself.

[timothyfcook]

Exactly.

Let's also reduce the size of the nav-blocks and font-size.

We can make box-width closer to 200px, and reduce the vertical padding to make the overall footprint smaller.

[chadwhitacre]

!m @chelseaerdner @cameronscott137

I turned off the nav because it was so distracting while trying to work on the map itself. I forgot to turn it back on! 🙀