web, banner: Add dynamic messages for mobile version

[fstachura]

New design:

[tleb]

Not a fan of the design. Two proposals. First one takes inspiration from your mobile but reduces font size and uses bold. Second one reuses the desktop banner and moves it around. On the second I also reworked the nav links for them to have fluid padding inbetween them. That way they only take a single line, avoiding spending vertical space for nothing. I'll submit that in a separate PR.

I did it in devtools but I could recreate them properly if that works out.

[fstachura]

The text/background contrast in the first design is pretty low. Second design wastes a lot of space for borders and margin. I think I would go in the direction of my initial design, but bold for title is a good idea.

Copying styles from the desktop banner:

Gray dark enough to pass WCAG tests:

On the second I also reworked the nav links for them to have fluid padding inbetween them

I think that's a good improvement overall.

[fstachura]

@tleb Updated

[tleb]

I know this isn't related to you changes, but while we are at it:

• Can we remove the two message banners? A single one styled differently depending on media queries will work.
• Can we avoid the addBannerContents() that recreates elements from scratch? This means the HTML as displayed in header.html is useless as it gets replaced by JS.
• Can we avoid one div.subtitle item per line? Have a single div.subtitle and use <br>.
• Can we avoid the .message-link that is a link appended at the end and that gets an absolute position and width/height set to 100% to overlap on top of the parent? Instead the parent should be a link.

Basically a complete overhaul of the banners JS and CSS. I am pretty sure we can drop 100 lines of CSS and 50 lines of JS by doing so. I was initially reviewing your changes and then noticed all of those oddities.

---

addBannerContents could look more like

function addBannerContents(el, msg) {
  el.querySelector('a').href = msg.link
  el.querySelector('.title').textContent = msg.title
  el.querySelector('.subtitle').innerHTML = msg.title.replace('\n', '<br>')
  if (msg.action) {
    el.querySelector('.action').textContent = msg.action
    el.querySelector('.action').classList.add('hidden')
  } else {
    el.querySelector('.action').classList.remove('hidden')
  }
}

[fstachura]

@tleb Done