Page MenuHomePhabricator

🎬 desktop-de-21 | Add carousel to desktop banner | ⏰ Dec 9th
Closed, ResolvedPublic5 Estimated Story Points

Description

We want which effect introducing a carousel on desktop banners has. The banners are based on the control banner of desktop-de-23.

Acceptance Criteria

  • The spacing around the close button as it was in desktop-de-17 is restored.
  • A carousel is added to the variant banner (see design on Figma). Arrow icons and slide indicators use the same color as the filled area of the progress bar.
  • The text content of the carousel slides is displayed as defined below.
  • The first slide consists of two paragraphs.

Text content

Slide #Content
1 p1An alle unsere Leserinnen und Leser in Deutschland.
1 p2Vielleicht kommen wir gerade ungelegen, aber dennoch: Bitte klicken Sie jetzt nicht weg! campaign day sentence Zum ersten Mal seit langem möchten wir Sie an diesem day of the week bescheiden darum bitten, die Unabhängigkeit von Wikipedia zu verteidigen. Insgesamt spenden 99% unserer Leserinnen und Leser nichts – sie übergehen diesen Aufruf.
2Sollten Sie zu dem kleinen Kreis gehören, die bereits gespendet haben, danken wir Ihnen sehr herzlich. Wikipedia wird durch Spenden von durchschnittlich 22,81 € finanziert. Doch schon mit einer Spende von 5 € kann Wikipedia sich auch in Zukunft erfolgreich entwickeln. visitors-vs-donors sentence
3Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. Hat Wikipedia Ihnen in diesem Jahr Wissen im Wert von 5 € geschenkt? Dann nehmen Sie sich doch bitte eine Minute Zeit und geben Sie etwas zurück. Zeigen Sie den Freiwilligen, die Ihnen verlässliche und neutrale Informationen zur Verfügung stellen, dass Sie ihre Arbeit wertschätzen. Vielen Dank!

Notes

Event Timeline

kai.nissen updated the task description. (Show Details)
kai.nissen updated the task description. (Show Details)Nov 30 2020, 10:26 AM
kai.nissen set the point value for this task to 5.

@CorinnaHillebrand_WMDE

  • When the form is displayed on the right, the banners differ in height (maybe because the form is wider in the variant banner).
  • The slide indicators should be clickable.
kai.nissen renamed this task from 🎬 desktop-de-19 | Add carousel to desktop banner | ⏰ Nov 30th to 🎬 desktop-de-21 | Add carousel to desktop banner | ⏰ Dec 4th.Dec 1 2020, 11:49 AM
kai.nissen added a subscriber: gabriel-wmde.EditedDec 3 2020, 6:12 PM

Thank you, @gabriel-wmde! I found some issues while testing:

  • Before the banner slides in text is already visible. Adding space to the top is animated, but the banner itself pops in without sliding down. This happens in both the control banner and the variant banner.
  • The progress bar animation should start after the banner is displayed.
  • The progress bar overlaps the slide indicators. It should display above them and the slide indicators should be at the bottom of the blue box.
  • In IE11 the banner is not being displayed. Console doesn't have a helpful error log:
SCRIPT1002: Syntax error
File: de.wikipedia.org, Line: 13, Column: 34

The display errors have been fixed in the latest version. The syntax error in IE 11 persists. I have investigated and have found out that this is a problem with the way JavaScript bundlers choose the distribution bundle from packages - they prefer to use the ES6 module file (if available) over the ES5 file. So for now we can either wait if the author of Splide works on my ticket at https://github.com/Splidejs/splide/issues/201 and see if that ticket resolves anything (local testing surfaced new errors in IE 11), or switch libraries.

kai.nissen updated the task description. (Show Details)Dec 8 2020, 11:03 AM
kai.nissen updated the task description. (Show Details)
kai.nissen renamed this task from 🎬 desktop-de-21 | Add carousel to desktop banner | ⏰ Dec 4th to 🎬 desktop-de-21 | Add carousel to desktop banner | ⏰ Dec 9th.Dec 11 2020, 9:28 AM
kai.nissen closed this task as Resolved.Thu, Jan 7, 11:39 AM
kai.nissen claimed this task.