Feature: Adaptive footer

This update will introduce an adaptive footer. All icons except of the logo are removed from the header.

There are two different footer icons. The switchable icons have a state (like the sound icon or the fullscreen icon). They are colored red if inactive and green if active. The other elements are stateless and are always colored white.

The icons have to be added for each route but can be modified anywhere in the code. The standard way is to add the icons in the onRendered callback of the template.

When icons are added they are either displayed by the sequence they've been added or by an optional priority number.

So for example this code:

footerElements.addFooterElement(imprintItem);
footerElements.addFooterElement(qrCodeItem);
footerElements.addFooterElement(homeItem, 0);

will render the items in this order:

1. HomeItem
2. ImprintItem
3. qrCodeItem

It is required to call

footerElements.calculateFooter();

after adding the items to the footer because the navbar font / icon size and the fixed-bottom position gets updated here.

Since there are no usable icons for "about", "imprint", "data privacy" and "tos" pages, I've merged them to one icon linking directly to the imprint. From this route the user can navigate to the other pages via a header bar.

If the user's screen is too small to hold all the icons a showMore icon (the popular hamburger) will be added and all icons which do not fit into the footer will be displayed in an extra route.

Fixes #218 (closed), #211 (closed)

Known issues

• I18n is missing
• Switches in showMore route not working
• Disable showMore button while running a countdown

Other issues not targeted by this MR

• Reading confirmation switch not working (will be introduced with an extra update)
• Theme link not working (will be introduced with !305 (merged))
• Pressing the key for the fullscreen mode (F11) will not trigger the corresponding javascript event on chrome so the icon's state will not be updated