Page MenuHomePhabricator

Implement radio button layout of the banner form
Closed, ResolvedPublic5 Estimated Story Points

Description

The scope is to test a form containing radio buttons against the existing button form. During this test we also want to find out about the effect of the banner form being being positioned below or next to the banner text.

The banner design is on Figma:

Acceptance Criteria

  • The variant banner's design is implemented as defined in the Figma document.
  • Submitting the banner logs an event containing the viewport measurements of the user's browser.
  • The banner height of the control banner and the variant banner is the same.
  • The progress bar is removed from both banners.
  • There is no text change depending on the viewport width.
  • Media queries for viewport widths <1150px are changed to <1152px.

Notes

  • Amount handling has been changed to use cents. We need to make sure that the route accepting banner form submits can still handle the float sent from banners.
  • The radio buttons groups have a border, but only when the form is displayed below the banner text.

Related Objects

StatusSubtypeAssignedTask
ResolvedNone
ResolvedNone

Event Timeline

kai.nissen renamed this task from to Implement radio button layout of the banner form.Jul 8 2019, 7:14 AM
kai.nissen created this task.
kai.nissen set the point value for this task to 5.
gabriel-wmde moved this task from Doing to Review on the WMDE-FUN-Sprint-2019-07-08 board.
gabriel-wmde subscribed.

Banner is now set up, please test & give me feedback

thanks @gabriel-wmde

  • It looks that the radio button labels on the vertical form have a smaller font as on CTRL. Can you check please
  • it seems that the payment interval section of VAR is positioned higher than on the CTRL (vertical form).
  • the different positioning leads to a small deviation of the position of the donate button (vertical form)
  • in order to have a similar position of the elements, I think it is fair to move the radio button it self a little bit closer to the label
  • please check the breaks of the labels and radio buttons on smaller viewports. They do not behave identical (e.g. in the payment interval “monatlich” breaks first, etc.)
  • the text in the banner is wrong. Please use

Liebe Leserinnen und Leser, bitte verzeihen Sie die Störung. Es ist ein bisschen unangenehm, daher kommen wir gleich zur Sache. An diesem Montag sind Sie in Deutschland gefragt:
Wikipedia wird durch Spenden von durchschnittlich 21,48 € finanziert. Wenn alle, die das jetzt lesen, einen kleinen Beitrag leisten, wäre unser Spendenziel bereits am heutigen [weekday] erreicht. Schon der Preis einer Tasse Kaffee würde genügen. Millionen von Menschen nutzen Wikipedia, aber 99 % der Leserinnen und Leser spenden nicht. Wenn Wikipedia eine kommerzielle Seite sein würde, wäre das ein riesiger Verlust für die Welt. Wikipedia ist ein Ort des Lernens – Werbung hat darin keinen Platz. Sicher könnten wir mit Werbung eine Menge Geld verdienen. Aber dann wäre Wikipedia komplett anders. Wir könnten ihr nicht vertrauen. Wikipedia bringt uns alle, die Wissen lieben, zusammen: Beitragende, Lesende und die Spendenden, die uns finanzieren. Das Herzstück von Wikipedia ist die Gemeinschaft von Menschen, die uns unbegrenzten Zugang zu verlässlichen und neutralen Informationen geben. Es ist leicht, diese Nachricht zu ignorieren und die meisten werden das wohl tun. Wenn Sie Wikipedia nützlich finden, nehmen Sie sich an diesem [weekday] bitte eine Minute Zeit und geben Wikipedia mit Ihrer Spende etwas zurück. Vielen Dank!

btw. when the form in VAR switches from horizontal to vertical the spaces between the form section are a little bit too wide. Maybe with fixing the points above this is not that bad anymore. But ideally, the spaces are different in that respective cluster.

@gabriel-wmde could you please:

  • broaden the buttons in ctrl so that the form behaves like in var (being a two-liner)
  • check the free field in var. if I type in an amount on the landing there is no amount selected
  • if possible make the space between radion button and button text a little little little higher?

thanks!

The variant banner seems to be sending invalid data when using the custom amount field with decimal digits:
betrag_auswahl=123,45 (using a comma)
amountGiven=123.45

The control banner works fine with just using amountGiven.

the radio buttons could be more on line with the label on the horizontal form

radiobuttons not aligned.PNG (105×1 px, 10 KB)

Also I think the radio button element could be closer to Wunschbetrag.

trackings are working. it all looks fine now. Please adjust the tracking data parameters to 12.07. It would also be good to check event logging for view port tracking of submission. thanks @gabriel-wmde