Page MenuHomePhabricator

Search bar is hard to see/use on Grade C browsers
Closed, ResolvedPublic3 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.

Details

Related Gerrit Patches:
mediawiki/extensions/MobileFrontend : masterBeta: enhanced search bar for non-JS users

Event Timeline

Krinkle created this task.Dec 17 2015, 12:38 AM
Krinkle raised the priority of this task from to Needs Triage.
Krinkle updated the task description. (Show Details)
Krinkle added a subscriber: Krinkle.
Restricted Application added subscribers: StudiesWorld, Aklapper. · View Herald TranscriptDec 17 2015, 12:38 AM
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)
KLans_WMF triaged this task as Low priority.Dec 17 2015, 5:57 PM

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.

Jdlrobson moved this task from Backlog to Bugs on the MobileFrontend board.Feb 18 2016, 6:45 PM

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?

This doesn't seem to be doing

Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptApr 19 2016, 9:57 PM

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 removed Nirzar as the assignee of this task.May 9 2016, 4:47 PM
Jdlrobson set the point value for this task to 3.
Nirzar updated the task description. (Show Details)May 12 2016, 6:02 PM
Nirzar updated the task description. (Show Details)

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

bmansurov added a comment.EditedMay 16 2016, 10:20 PM

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

phuedx added a subscriber: phuedx.May 20 2016, 9:08 AM

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.

bmansurov removed bmansurov as the assignee of this task.May 20 2016, 1:41 PM
Jdlrobson closed this task as Resolved.May 20 2016, 3:33 PM
Jdlrobson claimed this task.

Looks great! Great work @bmansurov !

Jdlrobson reassigned this task from Jdlrobson to bmansurov.May 20 2016, 3:33 PM
bmansurov removed bmansurov as the assignee of this task.May 20 2016, 4:24 PM

Cool!