Page MenuHomePhabricator

🎬 mobile-de-04 | New design | ⏰ Nov 3rd
Closed, ResolvedPublic

Description

We want to test a new design for mobile banners that was created as part of the collage banner for desktop-de-06. The banners are based on the control banner of mobile-de-03.

Acceptance Criteria

  • The control and variant banner
    • contain the progress bars (on the first slide and in the expanded banner).
    • contain the campaign day sentence as the first sentence of the second paragraph in the expanded banner.
    • show the donation target instead of the remaining amount as the right label of the progress bar in the expanded banner.
    • show the new design of the use of funds overlay.
  • The design of the variant banner is implemented as shown in the Figma document.
  • Highlighted text slightly differs from the design doc:
    • Slide 2: Impressions-vs-donors sentence
    • Slide 3: "Schon der Preis einer Tasse Kaffee würde genügen."
    • Slide 4: no highlighting
    • Slide 5: “geben Wikipedia mit Ihrer Spende etwas zurück.”
  • Error message styles are copied from the control banner.

Event Timeline

@AbbanWMDE Some issues I found:

  • The automatic sliding stops after displaying the 3rd slide. @CorinnaHillebrand_WMDE did a fix for the same issue in mobile banners on wikipedia.de.
  • The progress bar labels in the first slide should display after the animation finishes.
  • The payment type option "Sofort" should be disabled when choosing a recurring payment.
  • There is an issue with the close button overlapping the headline or the headline wrapping on narrower screens.
  • The blue line left and right of the headline is missing.

@AbbanWMDE If the headline wraps, the line surrounding the headline doesn't make sense, so I crossed that out in my comment above.

@kai.nissen I made it work. I left aligned the headline at 400px and then made it decrease font size bit by bit down to 320

@kai.nissen That's fixed now, plus I integrated the new progressbar label stuff so they're now showing the correct values in the correct places

Thanks, @AbbanWMDE! Not sure about the smaller font size for the headline, but that shouldn't be a show stopper. I noticed that in the expanded variant banner the progress bar labels overlap. I think, we should reduce the font size to 14px below 360px.

AbbanWMDE moved this task from Code Review to Acceptance Test on the WMDE-FUN-Funban-2020 board.
AbbanWMDE moved this task from Acceptance Test to Deploy on the WMDE-FUN-Funban-2020 board.
AbbanWMDE subscribed.
kai.nissen claimed this task.