Page MenuHomePhabricator

Language indicator line is below the search area with large dynamic text sizes
Closed, ResolvedPublic

Assigned To
Authored By
JMinor
Sep 26 2017, 9:34 PM
Referenced Files
F11814219: IMG_1708.PNG
Dec 13 2017, 9:07 PM
F11814222: IMG_1710.jpg
Dec 13 2017, 9:07 PM
F11814362: IMG_0035.PNG
Dec 13 2017, 9:07 PM
F11814218: IMG_1711.PNG
Dec 13 2017, 9:07 PM
F11814220: IMG_1709.PNG
Dec 13 2017, 9:07 PM
F11813913: T176813.PNG
Dec 13 2017, 8:08 PM
F10814160: 01 Dynamic Type Search.png
Nov 15 2017, 10:06 PM
F10814159: 02 Dynamic Type Search.png
Nov 15 2017, 10:06 PM

Description

Device: any (iPhone 6S and iPhone X tested)
Build: 5.7.0 (develop)
iOS: 11.0

Step to reproduce:

  1. Enable more than one search language
  2. Go to settings and set the dynamic text size to maximum (not accessibility sizes, just basic dynamic text)
  3. Tap Search

Expected result: Blue "active" language indicator sits below the language name, but above the separator.
Actual result: Blue indicator sits below both the language name and the search UI's bottom separator

Event Timeline

The issue described in the ticket is fixed:

Simulator Screen Shot - iPhone X - 2017-10-10 at 18.34.27.png (2×1 px, 91 KB)

However, there is a different problem with increasing the font size. As the font size increases, the buttons get squashed:

Simulator Screen Shot - iPhone X - 2017-10-10 at 18.40.44.png (2×1 px, 93 KB)

Simulator Screen Shot - iPhone X - 2017-10-10 at 18.40.57.png (2×1 px, 94 KB)

One solution would be to put them in scroll view and let the user scroll horizontally:

Simulator Screen Shot - iPhone X - 2017-10-10 at 18.34.43.png (2×1 px, 94 KB)

Simulator Screen Shot - iPhone X - 2017-10-10 at 18.34.47.png (2×1 px, 94 KB)

@cmadeo what's your preference? Scroll view, hiding labels as text increases or something else?

@NHarateh_WMF

I like the slider approach, could we use a subtle transparency gradient to show that the languages are sliding 'behind' the More option and opposite side of the screen?

@NHarateh_WMF This looks really good!
A bit nit picky, but is there a way to move the slide indicator below the language selection indicator?

Testing on iPhone 6 Plus (iOS 11.1.2) - Wikipedia app 5.7.3 (1281). I'll just include the screencap from my testing.

T176813.PNG (2×1 px, 222 KB)

I am also having some trouble with this one. I do not see significantly larger text at all after switching text size on the search page (Testing on iPhone 7+ and the iPad Pro).

Only 3 languages displayed

IMG_1708.PNG (1×720 px, 935 KB)

Article text is large
IMG_1710.jpg (1×720 px, 216 KB)

Slider is at max
IMG_1709.PNG (1×720 px, 989 KB)

More than 3 languages
IMG_1711.PNG (2×1 px, 291 KB)

Ipad too

IMG_0035.PNG (2×1 px, 611 KB)

@ABorbaWMF the text size only responds to the iOS system-wide setting (Settings > Display And Brightness > Text Size). Also, only showing 3 languages (even if the user has more) is how it has worked in the past and is expected behavior for now.