Page MenuHomePhabricator

Change the search bar width and placement on tablets
Closed, ResolvedPublic5 Story Points

Description

Currently the search bar (in the header) is missing from the top of the page.

This should be shown on tablet screens to look like this:


The auto suggest is restricted to the width of the search box and aligned in the center

  • Set the max width on the search bar (see the parent task for the mocks with exact dimensions)
  • The search bar is horizontally centered
  • Search results (in the overlay) width is the same as the search bar width
  • The change needs to be done in the feature branch called branding.
  • Search bar does not show < wgDeviceTabletWidth

Event Timeline

bmansurov created this task.Dec 5 2016, 9:54 PM

Which code base is this about (and could it be associated to this task)? MobileFrontend?

@Nirzar, can you add the tablet mock here as we discussed yesterday?

Nirzar updated the task description. (Show Details)Dec 6 2016, 10:14 PM

@bmansurov oops.. added it now

bmansurov updated the task description. (Show Details)Dec 6 2016, 10:16 PM
ovasileva set the point value for this task to 2.Dec 7 2016, 5:16 PM
ovasileva moved this task from To Triage to Upcoming on the Readers-Web-Backlog board.

@Nirzar, how should the search bar look for non-JS browsers?

Change 330381 had a related patch set uploaded (by Jdlrobson):
WIP: Search input shown on tablet resolutions

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

@Nirzar so this is the no-JS experience as coded so far and probably the simplist to achieve:

If on a mobile device, I see the search icon:


When clicked I get taken to a blank search page with an input:

On tablet I can type into input


Hitting search icon results in:

@MBinder_WMF - I knew I missed something! Tagged.

Nirzar added a comment.Jan 6 2017, 8:52 PM

@Jdlrobson

the non JS experience looks okay. dedicated search page. this solves another task we have where we end up with 2 search bars for non js users. so that's a win.

for non-js tablet users, which is very rare case. we can persist the mobile experience and not show any search bar. search icon goes to special search. is it possible to trigger the focus of _that_ input on that icon click

Jdlrobson updated the task description. (Show Details)Jan 18 2017, 6:44 PM
ovasileva changed the point value for this task from 2 to 5.Jan 18 2017, 6:53 PM

Change 332870 had a related patch set uploaded (by Jdlrobson):
Search input is shown on tablet resolutions

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

Yes. everywhere = mobile + tablet. it's on the right side.

@Nirzar is there a zeplin for the last screenshot in the description (close icon on right in tablet mode) ?

Change 332870 abandoned by Jdlrobson:
Search input is shown on tablet resolutions

Reason:
wrong branch

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

Jdlrobson added a comment.EditedJan 19 2017, 7:17 PM

FYI these are ready for review:

01: Search input is shown on tablet resolutions (by Jdlrobson, 15 days old) [0]
https://gerrit.wikimedia.org/r/330381
03: Update hamburger asset (by Jdlrobson, 0 days old) [0]
https://gerrit.wikimedia.org/r/332882
04: Change close icon asset and move it to right of search (by Jdlrobson, 0 days old) [0]
https://gerrit.wikimedia.org/r/332880

I'm still working on https://gerrit.wikimedia.org/r/330381 which is proving tricky.

I can't work out how to correctly position the header between the tablet and desktop threshold:


Have spent countless hours trying to work this out without luck so really looking forward to see what you come up with @bmansurov I suspect I'm missing something obvious...

Yes, I saw the problem yesterday. I've been working on it. Hopefully, I'll have something to show today.

Change 333951 had a related patch set uploaded (by Bmansurov):
WIP: Show search input on tablet sizes

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

Change 333968 had a related patch set uploaded (by Bmansurov):
WIP: Show search input on tablet sizes

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

Change 333951 abandoned by Bmansurov:
WIP: Show search input on tablet sizes

Reason:
Wrong branch. See https://gerrit.wikimedia.org/r/#/c/333968/

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

Change 333968 abandoned by Jdlrobson:
WIP: Show search input on tablet sizes

Reason:
This has been folded into https://gerrit.wikimedia.org/r/330381

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

< @Nirzar fyi this is possible. Do we want to explore overlaying results over page in tablet?

@Jdlrobson oh man, we need cake for this. let's do it!! we iwll just need to style it a bit.

@bmansurov I responded to your review.

After talking to @Nirzar making the search overlay background transparent is a little trickier than first anticipated. He will create a task to capture that.

Change 330381 merged by jenkins-bot:
Show search input on tablet sizes

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

phuedx reassigned this task from Jdlrobson to Nirzar.Jan 26 2017, 2:03 PM
phuedx added a subscriber: phuedx.

@Nirzar: I've updated the staging server. You should be able to test these changes here: http://reading-web-staging.wmflabs.org/w/index.php?title=Main_Page&action=toggle_view_mobile.

The staging server has been configured to use a new logo and I've updated https://phabricator.wikimedia.org/T156423 with instructions on how we need to deploy that.

Signed off from design