Page MenuHomePhabricator

Mobile: Fit large maps into the viewport
Closed, ResolvedPublic

Description

Maps require width and height parameters, and in many scenarios, the map width parameter will exceed the mobile viewport.

Here's an example:

We need to make maps responsive on mobile, to make sure the map fit into the device viewport.

Edit 5/16/16:

  • The current width currently supports absolute (px) and relative (%) values.
    • We want to maintain this option, but we need to provide a good enough user experience on smaller screens.
      • We decided to force a minimal width of 200 pixels.
        • We believe that below 200 pixels a dynamic map is no longer fun to play with (interactive) and is no longer a good data visualization (content).
        • We will validate Maps VE to force a 200 min-width (currently min width = 10 and there is no validation server side).
        • We will add a CSS property to force a min-width: 200px (in case relative width (%) is used).
      • Latest patch screenshots (iPhone5 - 320px wide):
        • Absolute widths:
        • Relative widths:

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 26 2016, 12:12 AM

Change 285319 had a related patch set uploaded (by JGirault):
[WIP] Mobile: Fit large maps into the viewport.

https://gerrit.wikimedia.org/r/285319

Same screenshot, after the [WIP] patch was applied:

Change 285648 had a related patch set uploaded (by Esanders):
Make map optionally responsive using only CSS

https://gerrit.wikimedia.org/r/285648

JGirault updated the task description. (Show Details)May 16 2016, 10:36 PM

Change 285648 merged by jenkins-bot:
Make map optionally responsive using only CSS

https://gerrit.wikimedia.org/r/285648

Restricted Application added a project: Discovery. · View Herald TranscriptJun 12 2016, 2:59 AM

Change 285319 abandoned by JGirault:
[WIP] Mobile: Fit large maps into the viewport.

Reason:
Out of date, implemented differently

https://gerrit.wikimedia.org/r/285319