Page MenuHomePhabricator

Adjust the external margin of the translation dashboard to the screen size
Closed, ResolvedPublic

Description

The translation dashboard now follows a responsive approach, where different elements are rearranged and compacted to make a better use of space (T157212).

However, the overall margin of the dashboard remains static through all sizes. The current horizontal margin is 50px which seems too much for small sizes.
We can adjust it in the following way:

  • Use 40px by default for medium and large screen sizes.
  • Use 24px on small sizes (when the breakpoint for the narrow version applies)
  • Use 12px for very small sizes (for screen width below 500px)
Large and mediumSmallVery small
screencapture-en-wikipedia-org-w-index-php-1508496321598.png (800×924 px, 212 KB)
screencapture-en-wikipedia-org-w-index-php-1508496364951.png (800×662 px, 194 KB)
screencapture-en-wikipedia-org-w-index-php-1508496405525.png (800×491 px, 190 KB)

Event Timeline

Change 386673 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Adjust dashboard padding to screen size

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

Change 387017 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/ContentTranslation@master] Adjust dashboard padding to screen size

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

Change 386673 abandoned by Catrope:
Adjust dashboard padding to screen size

Reason:
Superseded by Ed's patch

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

Change 387017 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Adjust dashboard padding to screen size

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

Checked in enwiki (wmf.7) - 360X640 (Galaxy S5) and 320X568 (iPhone 5) looked a little bit unbalanced in terms of margins, but I did not check in on real devices:

Screen Shot 2017-11-09 at 3.20.04 PM.png (612×428 px, 87 KB)

For other screen widths (below 500) all looks good.

Screen Shot 2017-11-09 at 3.24.20 PM.png (612×461 px, 89 KB)