Page MenuHomePhabricator

Search bar is hard to see/use on Grade C browsers
Closed, ResolvedPublic3 Estimated Story Points

Description

The layout of the search bar in MobileFrontend is quite radically different from the one in normal operation. I'm not sure if this is intentional or not.

This is what it looks like when is unsupported or failed for some reason (e.g. network timeout for one of the JS requests when on a tablet). The search bar and button are completely invisible. They exist but have no outline or placeholder or anything.

When disabling JavaScript explicitly, the search bar has an outline and the search submit button gets rendered (it seems this is hidden by client-nojs in the previous screenshot). But even then the search bar is oddly small

It seems like both scenarios should result in the same rendering, and the search bar should be made wider. There's also no reason to omit the placeholder attribute in no-js mode. We don't do that in desktop either.

Successful page load by comparison:

Opera mini:


MOCK


The only difference between JS and nonJS is the primary button on the right side.

Event Timeline

Krinkle raised the priority of this task from to Needs Triage.
Krinkle updated the task description. (Show Details)
Krinkle added a subscriber: Krinkle.
Krinkle renamed this task from Search bar tiny without JS to Search bar is very tiny on mobile without JS.Dec 17 2015, 12:39 AM
Krinkle set Security to None.
Krinkle updated the task description. (Show Details)

It's somewhat intentional as it's optimised for 240px opera devices which do not have media queries. I agree though it looks buggy on big screens. We never got round to making it nicer.

It's somewhat intentional as it's optimised for 240px opera devices which do not have media queries. I agree though it looks buggy on big screens. We never got round to making it nicer.

Why hardcode the width though? It can naturally take up the available space. That's not a design change, since you already take up available space in the JavaScript-rendered version, so that's obviously the intention. But you can make the same layout with plain HTML/CSS.

Krinkle renamed this task from Search bar is very tiny on mobile without JS to Search bar is hard to see/use on Grade C browsers.Feb 25 2016, 9:22 PM
Krinkle raised the priority of this task from Low to Medium.

It shouldn't.
I think it was just tricky to style consistently without JS given that the buttons on the left and right were fixed width in px and the input needed to take up the remaining space (e.g. %).

<hamburger 40px><search><search button 40px><notification icon 40px>

@Nirzar do you happen to have an updated design for the search bar for grade C browsers? And in general?

The search bar should expand to the available width. which is do-able by css. also use the same search button from portal page. which is again do-able with css.

Jdlrobson set the point value for this task to 3.

@bmansurov did you say you had a WIP patch for this?

Yes, it's part of another patch (look at patchset 1). I can extract the useful bits to a separate patch.

I don't understand - that patch got merged. I think probably best if you work on this given you probably know how to do this best!

Sure, in subsequent patches that piece got pulled out according to our plan.

Change 289335 had a related patch set uploaded (by Bmansurov):
WIP: Beta: enhanced search bar for non-JS users

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

Is the code that fulfills this task's design spec available at some particular URL?

When would it be on the prod cluster (beta channel)?

I see the patch failed to merge. I'll let @Jdlrobson to take a look too. Once merged we can see it in beta labs. If I'm not mistaken we can see it in production a week from now on 6/26 at this URL for example.

Change 289335 merged by jenkins-bot:
Beta: enhanced search bar for non-JS users

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

Is the code that fulfills this task's design spec available at some particular URL?

When would it be on the prod cluster (beta channel)?

Now that 289335: Beta: enhanced search bar for non-JS users has been merged, you should be able to test it on our staging server and on the Beta Cluster.

I've re-QAd it with JS disabled on FF in beta cluster.

Disable JS and go to http://en.m.wikipedia.beta.wmflabs.org/wiki/Main_Page?mobileaction=beta and use the search bar.

Jdlrobson claimed this task.

Looks great! Great work @bmansurov !