1059528 - programmatically set positioning of the sliding navbar based on text widths

Status: VERIFIED FIXED

(Marketplace Graveyard :: Consumer Pages, defect, P2)

Description

[Kevin Ngo [:ngoke]]

The navbar is currently hard-coded to slide based on the width of English text. This should change so we detect the width of any of the tabs and slide the appropriate amount.

Comment 1

[Christopher Van Wiemeersch [:cvan]]

Things look fine in English, but the text is offset and clipped in other languages:

https://marketplace.firefox.com/?lang=en-US
https://www.dropbox.com/s/aoju56hy82zg8bw/Screenshot%202014-09-09%2014.03.47.png?dl=0

https://marketplace.firefox.com/?lang=ga
https://www.dropbox.com/s/p35yhvl4j1fj83h/Screenshot%202014-09-09%2014.02.08.png?dl=0

https://marketplace.firefox.com/?lang=zh-TW
https://www.dropbox.com/s/wgwvusxte2hu593/Screenshot%202014-09-09%2014.04.38.png?dl=0

https://marketplace.firefox.com/?lang=de
https://www.dropbox.com/s/qnlzirk1jnpbq2v/Screenshot%202014-09-09%2014.04.03.png?dl=0

I understand that the dev team speaks English but shouldn't this be higher than a P4 since it prevents the site from being properly localised and internationalised?

Comment 2

[David Durst [:ddurst]]

If it's something that can be done easily and quickly (do I hear you volunteering?) then I'd say yes, but since we're taking a harder look at the nav for reasons like this and others, I'm a little hesitant to spend time fixing this if we're going to completely replace it with something else in short order.

Comment 3

[Kevin Ngo [:ngoke]]

https://github.com/mozilla/fireplace/pull/702

STR:

1. On mobile, go to Marketplace.
2. Play with the navbar in different languages.

Expected:

Links can always be navigated to as the navbar slides. The link that flows off the screen should have enough room to click. When going to the last link and back, the navbar should slide appropriately. The navbar should never completely cut off the next link. The navbar will sometimes shrink to accommodate long strings.

Actual:

In different languages, the navbar sometimes overflows. Often, there's not enough room to click the next link.

Comment 4

[Kevin Ngo [:ngoke]]

Also the swiping behavior has been removed.

Comment 5

[Christopher Van Wiemeersch [:cvan]]

Since the swiping behaviour is removed, is it possible to at least scroll horizontally? If not, this means that you deliberately have to click each nav to be able to see the next - which ain't good.

Comment 6

[Kevin Ngo [:ngoke]]

The swiping is impossible to depend upon. Users don't know about it, and FxOS 2.1 has a system-wide swipe gesture. You still had to swipe through the nav one-by-one to see the next nav items. That hasn't changed.

Yes, you have to click through the nav to get to the next nav items. This is an inherent part of having a long horizontal nav on a 320px screen. But it's only natural that items on the end of a navigation component will receive less engagement.

Comment 7

[Christopher Van Wiemeersch [:cvan]]

Can't you solve this problem with scrolling? That's what horizontal scrolling is for.

https://galaxy.dev.mozaws.net/catalogue/ works with scrolling/swiping. You don't have to click or hover over each item to see more.

Sorry if I'm being dense - just want to make sure this is an improvement.

Thanks for fixing this bug BTW.

Comment 8

[Kevin Ngo [:ngoke]]

Hm, adding scrolling might be an improvement. I am not sure how well that will work on devices though given it's a small scroll target; users might accidentally scroll when trying to click or click when trying to scroll. I might give it a shot sometimes, but I'm sure what's here is an improvement.

Comment 9

[Iulian Timis]

Attachment: feedback_link.png

The issue is still reproducing for the Feedback link in https://marketplace.allizom.org/settings on FF35 (Win 7) and MP-stage app (Inari 1.4).
Please see attached screenshot.

Comment 10

[Christopher Van Wiemeersch [:cvan]]

Per comment 7, even though this fixes the case for non-English locales, this actually complicates the interface more. I have to keep clicking each link to see more. That causes unnecessary clicks and requests. And it is probably not intuitive to most users. I figured it out, but I think I'm an exception.

And the borders have become wider, which look weird:

https://www.dropbox.com/s/37mkkhz1s7uywe6/Screenshot%202014-10-15%2000.57.42.png?dl=0

For things to look correct (and increase the click area), you should instead add another element in the `<a>` so you can just add padding to the `<a>`.

Comment 11

[Kevin Ngo [:ngoke]]

Iulian, it's currently expected to be cut-off. There will be further changes to improve that.

Chris, it actually doesn't complicate it more since you still have to click through each link before. And as for now, every link is visible. Although it stills sucks.

Comment 12

[Kevin Ngo [:ngoke]]

Btw, even with overflow scrolling, things will still be cut off. Unless you add an indicator it can scroll (a quick animation or a fade on the edge of the screen).

Comment 13

[Iulian Timis]

Verified as fixed in https://marketplace.allizom.org/ on FF36 (Win 7) and MP-stage app (Inari).
Attaching postfix screenshot.
Closing bug.

Comment 14

[Iulian Timis]

Attachment: postfix_navbar.png