Page MenuHomePhabricator

Create mobile version of the use of funds page
Open, Needs TriagePublic5 Estimated Story Points

Description

For mobile banners, we also want to use the new design of the overlay that explains how we use our funds.

Acceptance Criteria

  • The design is implemented as shown in the Figma file.
  • In the mobile device view,
    • the bar chart does not have headers.
    • the cost areas are listed below the chart, each of them is expandable by clicking/tapping on it.

Implementation notes

Event Timeline

kai.nissen set the point value for this task to 5.
kai.nissen updated the task description. (Show Details)Oct 21 2020, 1:26 PM
gabriel-wmde moved this task from Heap to Doing on the WMDE-FUN-Funban-2020 board.Mon, Nov 2, 10:10 AM
kai.nissen added a subscriber: gabriel-wmde.EditedFri, Nov 6, 2:10 PM

@gabriel-wmde As just discussed in person, here are the changes:

  • The close button should have a white background.
  • The bar chart should be removed.
  • There should be a spacing before "Vergleich der Jahresbudgets"
  • The elements of the bar chart comparing the budgets should be aligned.
  • The link to the source of the numbers should be below the budget.
  • The year date in the "Warum wir nur 8.7 Millionen brauchen" should be 2021.
  • When clicking the X button of the overlay, the viewport should scroll to either the "Wohin geht meine Spende?" link at the bottom or the "Überweisung" button at the top.
  • When clicking the "Jetzt spenden" button in the overlay, the viewport should scroll to the "Jetzt sind sie gefragt!" element.

To make it look and feel better on iPads, the desktop version should also be changed:

  • The fixed position/white background of the close button should be applied to the desktop/iPad version as well.
  • The minimum width of the content can be reduced to fit the 768px width of iPads.

Deployed the changes to all mobile banners on CN/wp.de

AbbanWMDE moved this task from Doing to Done on the WMDE-FUN-Funban-2020 board.Wed, Nov 11, 6:48 AM