Page MenuHomePhabricator
Create Task
Maniphest T284242

Search: treatment at smaller resolutions
Closed, ResolvedPublic5 Estimated Story Points
Actions

Assigned To
ovasileva
Authored By
Jdlrobson
Jun 3 2021, 5:49 PM
Tags
Referenced Files
F34569855: Screen Recording 2021-07-29 at 3.22.01 PM.mov.gif
Jul 29 2021, 10:48 PM
F34569861: Screen Recording 2021-07-29 at 3.25.51 PM.mov.gif
Jul 29 2021, 10:48 PM
F34569864: Screen Shot 2021-07-29 at 3.29.59 PM.png
Jul 29 2021, 10:48 PM
F34569873: Screen Recording 2021-07-29 at 3.43.09 PM.mov.gif
Jul 29 2021, 10:48 PM
F34569869: Screen Recording 2021-07-29 at 3.40.52 PM.mov.gif
Jul 29 2021, 10:48 PM
F34569867: Screen Recording 2021-07-29 at 3.40.09 PM.mov.gif
Jul 29 2021, 10:48 PM
F34569859: Screen Recording 2021-07-29 at 3.25.04 PM.mov.gif
Jul 29 2021, 10:48 PM
F34569875: Screen Recording 2021-07-29 at 3.44.29 PM.mov.gif
Jul 29 2021, 10:48 PM
View All 16 Files
Subscribers
Aklapper
• alexhollender_WMF
cjming
Edtadros
Jdlrobson
Jdrewniak
• nray
ovasileva
Tokens
"Love" token, awarded by Jdlrobson.

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.

QA Results - Beta

ACStatusDetails
1✅T284242#7247665
2✅T284242#7247665
3✅T284242#7247665

Details

SubjectRepoBranchLines +/-
Make #p-search's start margin dependent on .vector-search-box-show-thumbnailmediawiki/skins/Vectormaster+7 -1
Widen WVUI search suggestions to edge of search button when search is toggledmediawiki/skins/Vectormaster+7 -0
Make search toggleable at smaller screen widthsmediawiki/skins/Vectormaster+126 -7
POC: Search is hidden and expandable at lower resolutionsmediawiki/skins/Vectormaster+89 -17
Customize query in gerrit

Related Objects
Search...

Event Timeline

Jdlrobson created this task.Jun 3 2021, 5:49 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 3 2021, 5:49 PM
Jdlrobson updated the task description. (Show Details)Jun 3 2021, 5:50 PM
Jdlrobson added a parent task: T266536: [EPIC] Consolidate user links into a single menu.Jun 3 2021, 5:58 PM
Jdlrobson mentioned this in T276566: User links: treatment at smaller resolutions.
• alexhollender_WMF updated the task description. (Show Details)Jun 4 2021, 5:13 PM

@Jdlrobson I've added a basic mock

ovasileva triaged this task as Medium priority.Jun 7 2021, 3:55 PM
ovasileva edited projects, added Web-Team-Backlog (Kanbanana-FY-2020-21); removed Web-Team-Backlog.
ovasileva added a parent task: T283505: [EPIC] Fixed "sticky" site header.
Jdlrobson awarded a token.Jun 7 2021, 4:44 PM
Jdlrobson mentioned this in T219659: Improve initial, empty screen search experience.Jun 8 2021, 7:18 PM
Jdlrobson claimed this task.Jun 9 2021, 4:16 PM
gerritbot added a comment.Jun 11 2021, 7:23 PM

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

gerritbot added a project: Patch-For-Review.Jun 11 2021, 7:23 PM
Jdlrobson removed Jdlrobson as the assignee of this task.Jun 11 2021, 7:24 PM
Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
gerritbot added a comment.Jun 11 2021, 7:25 PM

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)Jun 11 2021, 7:25 PM
Jdlrobson updated the task description. (Show Details)
Maintenance_bot removed a project: Patch-For-Review.Jun 11 2021, 8:10 PM
• alexhollender_WMF updated the task description. (Show Details)Jun 14 2021, 9:22 PM
gerritbot added a comment.Jun 22 2021, 5:34 PM

Change 699462 restored by Jdlrobson:

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

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

gerritbot added a project: Patch-For-Review.Jun 22 2021, 5:34 PM
LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Jun 22 2021, 5:43 PM
LGoto set the point value for this task to 5.
gerritbot added a comment.Jun 23 2021, 6:30 PM

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

• nray claimed this task.Jun 23 2021, 11:14 PM
• nray moved this task from Ready for Development to Doing on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
gerritbot added a comment.Jun 30 2021, 11:24 PM

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

PatchDemoBot added a comment.Jul 1 2021, 11:43 PM

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

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

• nray added a comment.EditedJul 1 2021, 11:47 PM

@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.Jul 2 2021, 8:56 PM
• nray moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
• nray subscribed.
LGoto assigned this task to cjming.Jul 12 2021, 5:25 PM
• nray reassigned this task from cjming to • alexhollender_WMF.Jul 12 2021, 5:26 PM
• nray moved this task from Code Review to Design Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
• nray added a subscriber: cjming.
• alexhollender_WMF added a comment.Jul 12 2021, 5:38 PM
In T284242#7191747, @nray wrote:

@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:

• alexhollender_WMF added a comment.Jul 12 2021, 6:58 PM

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
• nray claimed this task.Jul 12 2021, 10:39 PM
• nray moved this task from Design Review to Doing on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
PatchDemoBot added a comment.Jul 12 2021, 11:40 PM

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

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

• nray added a comment.Jul 12 2021, 11:47 PM
In T284242#7206819, @alexhollender wrote:

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.

In T284242#7206507, @alexhollender wrote:
In T284242#7191747, @nray wrote:

@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.Jul 12 2021, 11:56 PM
• nray assigned this task to • alexhollender_WMF.
• nray moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
• nray moved this task from Code Review to Design Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
gerritbot added a comment.Jul 14 2021, 12:33 AM

Change 702486 merged by jenkins-bot:

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

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

ReleaseTaggerBot added a project: MW-1.37-notes (1.37.0-wmf.15; 2021-07-19).Jul 14 2021, 1:00 AM
• nray added a comment.Jul 14 2021, 3:50 PM

@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_WMF removed • alexhollender_WMF as the assignee of this task.Jul 14 2021, 5:14 PM
• alexhollender_WMF moved this task from Design Review to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
• alexhollender_WMF 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)

gerritbot added a comment.Jul 14 2021, 7:23 PM

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

gerritbot added a comment.Jul 14 2021, 7:30 PM

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

gerritbot added a comment.Jul 14 2021, 8:35 PM

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

gerritbot added a comment.Jul 14 2021, 8:41 PM

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

Jdlrobson moved this task from Code Review to Design Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Jul 14 2021, 8:45 PM
• nray added a comment.Jul 14 2021, 9:08 PM

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_WMF moved this task from Design Review to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Jul 15 2021, 12:01 AM
In T284242#7213473, @nray wrote:

@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 assigned this task to Edtadros.Jul 15 2021, 3:41 PM
• nray claimed this task.
• nray moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
• nray added a subscriber: Edtadros.
• nray reassigned this task from • nray to Edtadros.Jul 15 2021, 8:06 PM
• nray updated the task description. (Show Details)
Edtadros moved this task from QA to QA in Prod on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Jul 29 2021, 10:48 PM

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

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

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

BrowserLogged inLogged Out
Chrome
Screen Recording 2021-07-29 at 3.22.01 PM.mov.gif (868×718 px, 348 KB)
Screen Recording 2021-07-29 at 3.22.39 PM.mov.gif (868×718 px, 353 KB)
Firefox
Screen Recording 2021-07-29 at 3.25.51 PM.mov.gif (868×718 px, 417 KB)
Screen Recording 2021-07-29 at 3.25.04 PM.mov.gif (868×718 px, 392 KB)
Safari
Screen Recording 2021-07-29 at 3.40.09 PM.mov.gif (868×718 px, 376 KB)
Screen Recording 2021-07-29 at 3.40.52 PM.mov.gif (868×718 px, 361 KB)
Edge
Screen Recording 2021-07-29 at 3.44.29 PM.mov.gif (868×718 px, 341 KB)
Screen Recording 2021-07-29 at 3.43.09 PM.mov.gif (868×718 px, 386 KB)

@nray , the specific criteria of this task pass, however, the layout is off in Firefox. See below:

Screen Shot 2021-07-29 at 3.29.59 PM.png (139×710 px, 21 KB)

The heights of the Search button, Search Field, and what appears to be the outline of both are off.
Also, the orange talk page message notification overlaps the menu.

Edtadros updated the task description. (Show Details)Jul 29 2021, 10:50 PM
Edtadros reassigned this task from Edtadros to ovasileva.Aug 1 2021, 5:18 AM
Edtadros moved this task from QA in Prod to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
Edtadros added a subscriber: ovasileva.

@ovasileva , I believe this is a user links task so I'm moving it directly to Ready for Signoff.

LGoto edited projects, added Web-Team-Backlog (Kanbanana-FY-2021-22); removed Web-Team-Backlog (Kanbanana-FY-2020-21).Aug 2 2021, 9:30 PM
LGoto moved this task from Needs Analysis to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
ovasileva closed this task as Resolved.Aug 3 2021, 5:10 PM
PatchDemoBot added a comment.Jan 20 2022, 1:40 PM

Test wiki on Patch demo by NRay (WMF) using patch(es) linked to this task was deleted:

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

PatchDemoBot added a comment.Jan 20 2022, 1:41 PM

Test wiki on Patch demo by NRay (WMF) using patch(es) linked to this task was deleted:

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

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits