Page MenuHomePhabricator

Search: treatment at smaller resolutions
Open, MediumPublic5 Estimated Story Points

Description

Description

After the proposed changes in T276566, the search icon at lower resolutions when clicked will take the user to the search page.

With some changes it should be possible to wire this up in such a way that it operates as it does at higher resolutions.

After talking to @alexhollender we will likely make this behave similar to mobile - e.g. open an overlay. This will likely require a slight change to our wire up and a new component.

Design

Basic demo: https://di-community-round-2.web.app

logged outlogged in
logged out.gif (587×496 px, 395 KB)
logged in.gif (588×497 px, 387 KB)

TODO

  • @alexhollender to provide mocks
  • Engineer to analyse and provide a suitable approach and fill in developer notes

Developer notes

See commit message of https://gerrit.wikimedia.org/r/699462 for the challenges on this one.

Acceptance criteria

  • Add a dedicated toggle button
  • Wire up toggle button to load and show/hide the search interface
  • When search is open the hamburger and logo is obscured underneath
  • When search is open the user links are visible (tricky bit)

QA steps

Browser compatibility could potentially be an issue with this ticket so please test the following steps with Chrome, Firefox, Safari, and Edge:

  1. Go to https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page
  2. Resize browser to <= 719px width
  3. Ensure that search magnifying glass icon appears in header
  4. Click search magnifying icon
  5. Ensure that hamburger menu icon and logo disappear. Ensure that search input appears and is focused.
  6. Type into input and ensure search suggestions appear
  7. Click the body of the page
  8. Ensure that hamburger menu icon, logo, and magnifying glass icon appears. Ensure that search input disappears.

Event Timeline

Change 699462 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] POC: Search is hidden and expandable at lower resolutions

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

Change 699462 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] POC: Search is hidden and expandable at lower resolutions

Reason:

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

Jdlrobson updated the task description. (Show Details)

Change 699462 restored by Jdlrobson:

[mediawiki/skins/Vector@master] POC: Search is hidden and expandable at lower resolutions

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

Change 699462 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] POC: Search is hidden and expandable at lower resolutions

Reason:

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

Change 702486 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] WIP: Make search toggleable at smaller screen widths

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

Test wiki created on Patch Demo by NRay (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/bc39ecddd5/w/

@alexhollender can you please take a look at the above patchdemo and let me know if I've missed anything regarding the behavior or design? The icon spacing/sizes is another issue that I believe is being covered in another ticket.

Thanks!

nray removed nray as the assignee of this task.Fri, Jul 2, 8:56 PM
nray added a subscriber: nray.

@alexhollender can you please take a look at the above patchdemo and let me know if I've missed anything regarding the behavior or design? The icon spacing/sizes is another issue that I believe is being covered in another ticket.

this is looking great. one thing I was thinking about is: since there is less room for the search bar (especially for logged-in, where there are more user icons, and for languages where the word "Search" is longer) maybe the search results menu should stretch all the way to the far side of the Search button, so it can be that much wider. what do you think about that?

image.png (354×539 px, 104 KB)

also here's a screen recording of the current state:

notes from a discussion @nray and I just had:

  • we will use a click event to handle the closing of the expanded search field, rather than trying to use the focusout event
  • we will modify/remove the max-width on the input field so that it always takes up all available space when expanded
  • I will file a separate task regarding the tab behavior for the search menu

Test wiki created on Patch Demo by NRay (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/fec34acad1/w/

notes from a discussion @nray and I just had:

  • we will use a click event to handle the closing of the expanded search field, rather than trying to use the focusout event
  • we will modify/remove the max-width on the input field so that it always takes up all available space when expanded
  • I will file a separate task regarding the tab behavior for the search menu

@alexhollender Thank you. Please check out the patchdemo above with these revisions.

@alexhollender can you please take a look at the above patchdemo and let me know if I've missed anything regarding the behavior or design? The icon spacing/sizes is another issue that I believe is being covered in another ticket.

this is looking great. one thing I was thinking about is: since there is less room for the search bar (especially for logged-in, where there are more user icons, and for languages where the word "Search" is longer) maybe the search results menu should stretch all the way to the far side of the Search button, so it can be that much wider. what do you think about that?

That makes sense to me. I doubt it will be difficult, but I think that change should go in WVUI so it might be best to leave it to another ticket. I can take a look at it tomorrow

nray removed nray as the assignee of this task.Mon, Jul 12, 11:56 PM
nray assigned this task to alexhollender.

Change 702486 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Make search toggleable at smaller screen widths

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

@alexhollender just a heads up - this has now been merged so it's best to do the design review on beta (https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page) rather than the patchdemo

alexhollender added a subscriber: Jdrewniak.

@nray this is looking great.

we will need to address the spacing between the search (both collapsed & expanded state) and the user icons. should we address that here, or in T285786? cc @Jdrewniak

image.png (374×777 px, 65 KB)

Change 704594 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] Widen WVUI search suggestions to edge of search button when search is toggled

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

Change 704595 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] Make #p-search's start margin dependent on .vector-search-box-show-thumbnail

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

Change 704594 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Widen WVUI search suggestions to edge of search button when search is toggled

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

Change 704595 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Make #p-search's start margin dependent on .vector-search-box-show-thumbnail

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

we will need to address the spacing between the search (both collapsed & expanded state) and the user icons. should we address that here, or in T285786? cc @Jdrewniak

image.png (374×777 px, 65 KB)

@alexhollender I was wondering if either T285259, T191021, and/or T284584 would fix these spacing issues. It's easy for me to add a right margin or padding to the input box, but I'm not sure if that's needed when the other tickets are done.

Also, the stretching behavior for the search suggestions you suggested in T284242#7206507 has now been merged and you can check it out on beta!

@alexhollender I was wondering if either T285259, T191021, and/or T284584 would fix these spacing issues. It's easy for me to add a right margin or padding to the input box, but I'm not sure if that's needed when the other tickets are done.

sounds good

Also, the stretching behavior for the search suggestions you suggested in T284242#7206507 has now been merged and you can check it out on beta!

woo! looks awesome

nray claimed this task.
nray moved this task from Code Review to QA on the Readers-Web-Backlog (Kanbanana-FY-2020-21) board.
nray added a subscriber: Edtadros.
nray updated the task description. (Show Details)