Page MenuHomePhabricator

Refactor Banners
Open, Needs TriagePublic

Description

  • Desktop DE
    • Include Application of Funds component
    • Delete PCSS from shared/components/ui.
    • Add TranslationContext to Banner and use translations in all shared components (Form, Infobox). See the wikipedia.de banner (Banner.jsx and ProgressBar.jsx) for an example. Provide the translations as a property.
    • Pass down a "formatter object" (collection of number formatters) as a property and use it in progress bar. This makes the progress bar more generic and we can drop the "locale" property. Create a getFormatters factory method in shared that creates the formatter collection for DE and EN.
    • Move campaign-related properties (everything based on CampaignParameters) to generic Infobox component (in shared/components), place the banner text in a custom BannerText (and BannerTextVar) component that uses the properties passed from Infobox. Which BannerText component to use should be passed down as a property (to allow for easy A/B tests of different texts).
    • Address comments regarding BannerPresenter
    • Put the form parts (interval, amount, payment type) into their own components.
      • Data for available payments, amounts and intervals should be passed down as properties from banner_ctrl.js. There should be a factory function that creates defaults (at least channel defaults), which are used across banners, to keep the setup code in banner_ctrl.jsas small as possible.
    • Fix coding style violations for js, jsx and CSS.
    • Create VAR
  • Desktop EN:
    • Reuse (copy) Desktop DE Banner.jsx and CSS and create custom BannerText and BannerTextVar. Remember to use different number formatters and translations.
    • Add language warning component (maybe as a shared component).
  • Mobile DE
    • Copy MobileBanner.jsx and MobileBannerFullpage.jsx from wikipedia.de and adapt them:
      • Add an event handler for the close button
      • Split slides into BannerText.jsx and BannerTextVar.jsx.
      • Add animated text highlight component in BannerText, see wikipedia.de banner on how to do it.
    • Split & adapt the styles.css from the old mobile banner to the component CSS files.
  • Mobile EN
    • Copy JSX and CSS from Mobile DE
    • Split slides into BannerText.jsx and BannerTextVar.jsx.
  • iPad DE
    • Create Banner.jsx
    • Split & adapt the styles.css from the old iPad banner to the component CSS files.
    • Create alternative DonationFormVar.jsx component that uses a AddressDataDecision component.
  • iPad EN
    • Copy Banner.jsx and CSS from iPad DE
    • Create BannerText.jsx and BannerTextVar.jsx.
    • Add language warning component (maybe as a shared component).
  • WP.de
    • Use BannerPresenter
    • Use shared components instead of local components, while keeping/adapting the CSS. Extract SelectGroup.pcss and adapt the sectioned class names (removed fullwidth, halfwidth and quarterwidth classes).
    • Fix eventual bugs/inconsistencies

Related Objects

StatusSubtypeAssignedTask
OpenNone
ResolvedNone
ResolvedNone
ResolvedNone
OpenNone
OpenNone

Event Timeline

Restricted Application added a project: WMDE-FUN-Team. · View Herald TranscriptJan 8 2020, 9:28 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
gabriel-wmde updated the task description. (Show Details)Jan 8 2020, 9:30 AM
gabriel-wmde updated the task description. (Show Details)Jan 8 2020, 10:21 AM
gabriel-wmde updated the task description. (Show Details)Jan 8 2020, 6:27 PM
gabriel-wmde updated the task description. (Show Details)
gabriel-wmde updated the task description. (Show Details)Jan 8 2020, 6:30 PM
gabriel-wmde updated the task description. (Show Details)
CorinnaHillebrand_WMDE updated the task description. (Show Details)
gabriel-wmde updated the task description. (Show Details)Jan 9 2020, 5:23 PM
kai.nissen updated the task description. (Show Details)Jan 20 2020, 1:35 PM
kai.nissen updated the task description. (Show Details)
CorinnaHillebrand_WMDE updated the task description. (Show Details)