Make the viewer mobile friendly

[opeeters]

e.g.:

• let timechanger take entire width with attribution & download button just above
• collapse leaflet-control-layers

... ideas very welcome

[stevenvdbosch]

On top of your suggestions:

• for timechanger, maybe only take entire width when the width of the page is below a threshold. If i hold my phone horizontally it seems pretty ok?
• Maybe let's rename the download button in all cases to "Downloads" (takes less space). and align to the right side (didn't have time previously to make that part prettier)
• We could also redesign a bit the download container as a pop up window:
  • download button becomes a button with a download icon (we could even put the button then on the left upper side like most buttons
  • it triggers a popup window for the downloads. => do you think this is nicer or more disturbing for the user?

Other problems:

1. The Legend button which is in front of the timechanger. We could try to put the legend button above the timechanger
2. When holding your phone vertically, the SVG of the legend is cut of, i don't know how to deal with that one. You could say somehow let it shrink but i think you wont be able to read the letters.

What do you think

[opeeters]

@stevenvdbosch

• yes, on a horizontal smartphone it looks fine
• done: 775b025820f2e7fa153639f286c1583c760767ba
• Oh, previous commit was not really necessary :-) Icon is a good idea (with a i18N tooltip)
• a pop-up window with room for more explanation would be best in my opinion

1) fine 2) maybe switch to a landscape legend (cf https://www.irceline.be/air/legend/index_EN_landscape.svg - still need to make landscape versions for most aggregations/pollutants) at width:100%?