Page MenuHomePhabricator

Section indicators are not aligned
Closed, ResolvedPublic1 Estimated Story Points


The toggle arrows should align with the left scan-line (see screenshot) of the layout.

currently there is a 10px gap due to margin on both sides of the chevron

What is it currently

iPhone 7.png (1×750 px, 168 KB)

What is expected

iPhone 7 Copy.png (1×750 px, 174 KB)

on RTL languages, the chevron should align on the right side

Developer notes

Note that mw-ui-icon adds this margin so you may need to employ a negative margin to combat this. This value is exposed in @iconGutterWidth.

Event Timeline

Jdlrobson triaged this task as Medium priority.May 10 2017, 3:21 PM
Jdlrobson moved this task from Incoming to Triaged but Future on the Readers-Web-Backlog board.
Jdlrobson added a project: patch-welcome.
ovasileva set the point value for this task to 1.May 16 2017, 3:13 PM

Change 354150 had a related patch set uploaded (by Bmansurov; owner: Bmansurov):
[mediawiki/extensions/MobileFrontend@master] Vertical-align heading indicator with page content

Change 354150 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Vertical-align heading indicator with page content

phuedx added subscribers: ABorbaWMF, bmansurov, phuedx.

@ABorbaWMF: Could you check the alignment of chevrons on a variety of Grade A ("modern") browsers?

Tested on Beta. It looks pretty good. Here are some examples of Grade A browsers:

bs_realios_Mobile_iPhone 6-8.0.jpg (458×257 px, 24 KB)
bs_realdroid_Mobile_Google Nexus 6-5.0-1440x2560.jpg (458×258 px, 24 KB)
bs_realios_Mobile_iPhone 6S-9.0.jpg (503×283 px, 26 KB)
bs_realdroid_Tablet_Google Nexus 9-5.1-1536x2048.jpg (503×377 px, 25 KB)
bs_realios_Tablet_iPad Air 2-8.0.jpg (458×343 px, 26 KB)
bs_realdroid_Mobile_Samsung Galaxy S5-4.4-1080x1920.jpg (503×283 px, 26 KB)

@Nirzar: This should be available to test on the Beta Cluster.