Page MenuHomePhabricator

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

Description

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

Screen Shot 2016-12-05 at 4.50.46 PM.png (1×1 px, 704 KB)

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

Tablet-Layout.png (1×2 px, 834 KB)

Tablet-Layout-Focus.png (1×2 px, 258 KB)

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

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?

ovasileva set the point value for this task to 2.Dec 7 2016, 5:16 PM
ovasileva moved this task from Incoming to Upcoming on the Web-Team-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:

Screen Shot 2017-01-05 at 11.00.33 AM.png (651×403 px, 70 KB)

When clicked I get taken to a blank search page with an input:
Screen Shot 2017-01-05 at 11.01.04 AM.png (653×330 px, 41 KB)

On tablet I can type into input

Screen Shot 2017-01-05 at 11.05.08 AM.png (568×846 px, 63 KB)

Hitting search icon results in:
Screen Shot 2017-01-05 at 11.04.47 AM.png (549×859 px, 99 KB)

@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

pasted_file (252×1 px, 17 KB)

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

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:

Screen Shot 2017-01-23 at 5.49.01 PM.png (673×701 px, 75 KB)

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

Screen Shot 2017-01-25 at 1.49.39 PM.png (543×941 px, 108 KB)
< @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.

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

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.