Dropdown for 'on the map' and longer verbiage

[wbazant]

Closes #655

Some super hacky CSS that I couldn't otherwise manage to get to work:

• the width of the select dropdown is 13em, which seems to work across languages
• the buttons could be 50% width in some languages but not others, but aren't very noticeable anyway because they're at the bottom under lots of other content, so I made them larger

I again couldn't do #448, so I reduced the magic height that makes it go to just the bottom of the screen on my personal Android device, and changed vh to dvh so it adjusts when the address bar gets displayed on mobile Firefox

[ezwelty]

@wbazant Thanks for brainstorming and rehashing further on these tricky UI topics. I share some thoughts below although I'm mostly interested in what others less familiar (or more frustrated) with the interface think.

• Could we have flexible CSS that makes the map-filter dropdown and search input go to two lines when below a min-width for the latter?
• Conversely, allow (de)select all shown buttons to occupy just one line when wide enough? It feels like a lot of space for controls, especially considering the hope to add more. Ergonomically, these should be above the types list and below the search input, since they are mostly used in combination with the latter. See my proposal here: Categories POC #608 (comment)
• Maybe the placeholder for the search input should be "Name" rather than the vague "Search"?
• How about "Within map bounds" (instead of "this area") to clarify connection to the map?
• I'm not sure whether "Include" adds much to "Tree inventories" because the checkbox means the same. But maybe we should bring back the "[?]" on the legacy website, which for tree inventories and invasive filter provide a helpful modal.

[wbazant]

Thanks! I think I went too far with changing stuff, I added long buttons after 'Select all shown / Deselect all shown' didn't fit on one line in like 5 of the translations, but the idea from your mockup to replace deselect with Clear makes it still work.

• I added flex-overflow: wrap for search input and types search
• reverted placeholder for search to 'Type' as it was (it started to look weird after I stared at it too long, so I changed it to the generic Search, but no good reason actually)
• changed wording of type dropdown to 'Within map bounds'
• I changed the wording buttons to 'Select all shown / Clear ' so they fit on one line, and restored how they were styled - I don't love them, but you're right that the long big buttons aren't using the space well and are not really better. In Greek it's just 'Select all' because the translation was too long to fit on one line in default desktop space.

For the tree inventory label, I think we can manage without the explainer modals - proposing "With tree inventory locations"? Trying to provide enough words to communicate what this option is about (including extra data) and let the user later understand what it does after they notice that some locations have a tree inventory as source.

Not sure what will happen but I'll ask for feedback on slack.