Codex Typeahead search should be adapted for mobile (Vector and Minerva)
Open, MediumPublic
Actions

Assigned To

None

Authored By

	Jdlrobson
	Feb 19 2021, 10:20 PM

Description

In the interest of unifying mobile and desktop (Vector and Minerva) I explored using the existing WvuiTypeaheadSearch component as a swap in replacement for the existing search experience. While it works fine for the tablet and desktop experience of Minerva, it reveals problems in the current mobile friendliness of the component, here are my findings.

Existing experience:

Screen Shot 2021-02-19 at 1.57.21 PM.png (1×844 px, 330 KB)

With WVUI (as is now)

Screen Shot 2021-02-19 at 2.19.34 PM.png (1×960 px, 217 KB)

Differences

These should be turned into actionables for a future iteration of wvui:

In mobile the search within pages appears at the top rather than the bottom, this means for large amounts of search results it must be scrolled to. Is that a problem?
In Vector focusing the search causes the input to shift to the left. In mobile this focus state doesn't make sense. Proposal: Limit the existing focus state with a media query.
In mobile we currently snap the search results to the entire viewport. Proposal: For lower resolutions, make search results position fixed and full screen.

With wvui proposed changes:

Screen Shot 2021-02-19 at 1.57.34 PM.png (1×778 px, 277 KB)

POC: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/665434

Details

	Subject	Repo	Branch	Lines +/-
	POC: use Codex search widget in mobile	mediawiki/extensions/MobileFrontend	master	+178 -5

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved		Jdlrobson	T195473 [GOAL] Invest in the MobileFrontend & MinervaNeue frontend architecture
Resolved		Jdlrobson	T195478 [EPIC] Speed up unit test execution and increase code coverage
Resolved		Jdlrobson	T195482 [EPIC] Review and refactor MobileFrontend components used by Minerva
Open		None	T281930 [EPIC] Migrate MobileFrontend's code to Vue.js and Codex
Declined		None	T212465 [EPIC] None of our View's should exhibit 2 levels of inheritance
Declined	BUG REPORT	Jdlrobson	T289084 MinervaNeue shows 2 search elements when JS is disabled
Open		None	T282473 [GOAL] Use the Codex search widget inside the mobile site
Open		None	T275252 Codex Typeahead search should be adapted for mobile (Vector and Minerva)

Event Timeline

Jdlrobson created this task.Feb 19 2021, 10:20 PM

Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald TranscriptFeb 19 2021, 10:20 PM

Jdlrobson added a project: Desktop Improvements (Vector 2022).Feb 19 2021, 10:20 PM

For vector the proposed changes would look like this on a mobile device:

Screen Shot 2021-02-19 at 2.23.25 PM.png (1×782 px, 267 KB)

Jdlrobson updated the task description. (Show Details)Feb 19 2021, 10:24 PM

Mainframe98 subscribed.Feb 20 2021, 6:41 AM

Volker_E subscribed.Feb 22 2021, 12:17 PM

Jdlrobson mentioned this in T282473: [GOAL] Use the Codex search widget inside the mobile site.May 10 2021, 5:34 PM

Jdlrobson added a parent task: T282473: [GOAL] Use the Codex search widget inside the mobile site.May 10 2021, 5:59 PM

Volker_E updated the task description. (Show Details)May 10 2021, 6:39 PM

Volker_E added a project: Design.May 10 2021, 8:02 PM

@alexhollender @Volker_E I would like the team to tackle this task as part of a technical goal. Would it be possible to chat through this some time soon (within next 2 weeks)?

Jdlrobson moved this task from Incoming to unsed on the Web-Team-Backlog board.Jul 20 2021, 7:07 PM

In T275252#7225467, @Jdlrobson wrote:

@alexhollender @Volker_E I would like the team to tackle this task as part of a technical goal. Would it be possible to chat through this some time soon (within next 2 weeks)?

yea sounds good

Jdlrobson renamed this task from WvuiTypeaheadSearch should be adapted for mobile to WvuiTypeaheadSearch should be adapted for mobile (Vector and Minerva).Jul 20 2021, 7:31 PM

Jdlrobson moved this task from unsed to Needs Prioritization (Tech) on the Web-Team-Backlog board.Aug 10 2021, 8:52 PM

Jdlrobson edited projects, added Web-Team-Backlog (Needs Prioritization (Tech)); removed Web-Team-Backlog.

Jdlrobson moved this task from Backlog to Using Codex in web team products / Skin unification on the Web-Team-Backlog (Needs Prioritization (Tech)) board.Aug 11 2021, 6:01 PM

ovasileva moved this task from Incoming to Search on the Desktop Improvements (Vector 2022) board.Aug 31 2021, 8:39 PM

Jdlrobson renamed this task from WvuiTypeaheadSearch should be adapted for mobile (Vector and Minerva) to Codex Typeahead search should be adapted for mobile (Vector and Minerva).Mar 22 2022, 3:43 PM

Jdlrobson edited projects, added Codex, Design-Systems-team-20200324-20220422; removed WVUI.

• STH moved this task from Requests to Review to Patches for Code Review (let's try to clear this out) on the Design-Systems-team-20200324-20220422 board.Mar 23 2022, 7:21 PM

• STH moved this task from Patches for Code Review (let's try to clear this out) to Requests to Review on the Design-Systems-team-20200324-20220422 board.Mar 23 2022, 7:49 PM

Jdlrobson moved this task from Using Codex in web team products / Skin unification to Codex focus on the Web-Team-Backlog (Needs Prioritization (Tech)) board.Apr 28 2022, 10:05 PM

Jdlrobson moved this task from Search to Work with other teams on the Desktop Improvements (Vector 2022) board.Jun 8 2022, 3:57 PM

Jdlrobson moved this task from Codex focus to Using Codex in web team products / Skin unification on the Web-Team-Backlog (Needs Prioritization (Tech)) board.Oct 4 2022, 8:59 PM

Restricted Application added a project: Design-System-Team. · View Herald TranscriptOct 4 2022, 8:59 PM

egardner moved this task from Inbox to Following on the Design-System-Team board.Dec 20 2022, 11:25 PM

egardner moved this task from Inbox to Planned Component Updates on the Codex board.Feb 21 2023, 11:42 PM

Jdlrobson triaged this task as Medium priority.Mar 15 2023, 10:41 PM

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

[mediawiki/extensions/MobileFrontend@master] POC: use Codex search widget in mobile

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

Change 665434 abandoned by Jdlrobson:

[mediawiki/extensions/MobileFrontend@master] POC: use Codex search widget in mobile

Reason:

Not active right now (T275252)

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

Maintenance_bot removed a project: Patch-For-Review.Mar 16 2023, 12:10 AM

Jdlrobson mentioned this in T343052: Evaluate Wikidata's mobile site: Reconsider how Wikidata uses MobileFrontend/Minerva.Jul 28 2023, 9:23 PM

CCiufo-WMF moved this task from Planned Component Updates to Inbox on the Codex board.Feb 2 2024, 7:58 PM

Jdlrobson moved this task from Work with other teams to Tracking (Waiting on other teams) on the Desktop Improvements (Vector 2022) board.Feb 8 2024, 5:29 PM

Jdlrobson mentioned this in T251840: Design improvements for empty search results page.May 22 2024, 11:19 PM

Jdlrobson edited projects, added Desktop Improvements (Vector 2022) (Tracking); removed Desktop Improvements (Vector 2022).May 28 2024, 9:00 PM

	F34114365: Screen Shot 2021-02-19 at 2.23.25 PM.png
	Feb 19 2021, 10:23 PM

	F34114337: Screen Shot 2021-02-19 at 1.57.21 PM.png
	Feb 19 2021, 10:20 PM

	F34114338: Screen Shot 2021-02-19 at 1.57.34 PM.png
	Feb 19 2021, 10:20 PM

	F34114357: Screen Shot 2021-02-19 at 2.19.34 PM.png
	Feb 19 2021, 10:20 PM

Codex Typeahead search should be adapted for mobile (Vector and Minerva)Open, MediumPublicActions