Page MenuHomePhabricator

🎬 desktop-de-18 | Introduce mini banner on desktop – ⏰ 11.12.
Closed, ResolvedPublic

Assigned To
Authored By
Dec 6 2019, 4:17 PM
Referenced Files
F31469603: image.png
Dec 11 2019, 12:20 PM
F31469605: image.png
Dec 11 2019, 12:20 PM
F31464897: grafik.png
Dec 10 2019, 10:53 AM
F31464904: grafik.png
Dec 10 2019, 10:53 AM
F31460747: Screenshot 2019-11-28 at 16.32.55.png
Dec 6 2019, 4:17 PM


The banners are based on the variant banner of desktop-de-16.

Screenshot 2019-11-28 at 16.32.55.png (103×1 px, 43 KB)

Acceptance Criteria

  • In both the control and the variant banner,
    • the progress bar is changed using the --late-progress modifier.
    • the progress bar displays the remaining campaign days after the animation finishes.
  • In viewport widths of 1580 pixels and above:
    • The regular banner is displayed immediately after loading.
    • The regular banner is not fixed.
    • When the banner moves out of the viewport, the mini banner is displayed and fixed to the top.
    • When the regular banner is scrolled into the viewport, the mini banner is being hidden.
    • When clicking the green button in the mini banner, the regular banner is displayed and fixed to the top.
    • The label of the green button in the mini banner is "Ja, ich spende".
    • Clicking the close button of the mini banner
      • is being logged and can be distinguished from close button clicks of the regular banner.
      • results in banners not being displayed for 7 days.

The behaviour is the same as in current WMF banners.

Event Timeline

@tmletzko @JanJaquemot you can already check the banners for design/UX things,
the separate tracking for the close button is the only thing left to be implemented

two remarks

  • the X on the mini sticky needs to be original size

grafik.png (140×396 px, 3 KB)

  • on smaller screens the donation button breaks in a second row. I find it not that suitable. I was expecting to keep the progress bar and donation button on one row and adjust the font size and element size accordingly (font size like the bottom row)

grafik.png (181×1 px, 13 KB)

the X on the mini sticky needs to be original size

the X has the same size on mini banner and on the regular-sized banner (for me), which browser produces this?

I changed the flex behaviour from column to row for all viewports. The resizing of the mini banner elements behaves like the resizing of the regular-sized banner currently.

updated X size on extra large viewports and set the regular-sized VAR banner to be displayed immediately without scroll-down animation ✔


  • The mini banner should only be displayed in viewports wider than 1580px. In narrower viewports, the banner should remain as it is: delayed by 7.5 seconds, sliding in, fixed to the top.
  • The text inside the blue bubble should be bold and vertically centered.

Apart from that, the banners look good to me.

  • Wenn Sie Wikipedia nützlich finden, nehmen Sie sich an diesem Dienstag bitte eine Minute Zeit und geben Wikipedia mit Ihrer Spende etwas zurück damit Wikipedia weiter wachsen kann. - before "damit" there is a missing comma.

Last minute: The additional progress bar text "Nur noch n Tage" should be displayed after the progress bar animation ends (see one of last year's banners).

  • mini-sticky-banner is only displayed at >1580px, all viewports below stay like the ctrl banner ✔
  • info sentence inside the blue bubble is centered ✔
  • missing comma is added ✔
  • "nur noch n Tage" message is being displayed on ctrl and var ✔

At 1579px and below the black-marker-stripe next to "Es fehlen:..." switches from being nicely centered to below the middleline of the progress bar.
Should always be centered.
Thank you Corinna!

oops, thx for pointing that out

  • black marker stripe for "Es fehlen:..." is centered on the progress bar on all viewports and shifted 10px to the left ✔
  • "M €" is changed to " Mio. €" in the progress bar ✔

Few things don't fit well on the banners in Internet Explorer:

image.png (148×933 px, 47 KB)

Text not centered on donation button

image.png (358×397 px, 119 KB)

Button labels have no margin to the right

tmletzko moved this task from Doing to Done on the WMDE-FUN-Funban-2019 board.
tmletzko added a subscriber: CorinnaHillebrand_WMDE.
kai.nissen claimed this task.