Page MenuHomePhabricator

Recalculate banner space on orientation change of mobile devices
Open, Needs TriagePublic2 Estimate Story Points

Description

Steps to reproduce

  • Request a mobile banner on a mobile device or the developer toolkit of your browser.
  • Wait for it to display.
  • Change the orientation the device.

Expected behaviour

  • The banner is resized because of the changed width.
  • The space added to the top of the page is adapted to the changed banner size.

Actual behaviour

  • The banner is resized because of the changed width.
  • The space reserved for the banner is too large when initially loading in portrait mode.
  • The banner overlaps the top bar of the page when initially loading in landscape mode.

Event Timeline

Restricted Application added a project: WMDE-FUN-Team. · View Herald TranscriptMon, Mar 9, 8:33 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
AbbanWMDE moved this task from Todo to Doing on the WMDE-FUN-Sprint-2020-03-16 board.
gabriel-wmde removed AbbanWMDE as the assignee of this task.Fri, Mar 20, 4:24 PM
gabriel-wmde moved this task from Review to Todo on the WMDE-FUN-Sprint-2020-03-16 board.
gabriel-wmde added a subscriber: gabriel-wmde.

I have user-tested the changes on my device, using https://de.m.wikipedia.org/wiki/Wikipedia:Hauptseite?banner=WMDE_T247226&force=1
The visual functionality works, but there is still a problem with the interaction between the mini banner and the 2nd page banner. Steps to reproduce:

  • Load banner in landscape mode
  • Switch to prortrait mode
  • Try to interact with banner (close, swipe on the slide, expand)

Expected result: interaction works

Actual Result: Interaction does not work

Investigating this in the inspector reveals that the top position of the 2nd page (full-page-banner) is not adjusted correctly and the invisible layer of the 2nd page overlaps/blocks the mini banner.

Looks good, thank you!