Page MenuHomePhabricator

Change autosuggest "wordmatch" style
Closed, ResolvedPublic1 Estimated Story Points


Currently we underline the text match from our search

In case of typing edward norton, those words are underlined. the contrast is not enough, and we are adding another element on top (the underline)

Change the styles so that matched words would be bold, otherwise the headings (h3) would be regular font weight. it will bring better contrast in what is an exact match vs what is not.

Google's matching technique is different but they use the bold/normal pair of contrast

Developer notes

  • font-weight of unhighlighted text should be "normal"
  • font-weight of highlighted text should be "bold"

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 16 2017, 1:50 AM
Jdlrobson added a subscriber: Jdlrobson.

For background, editors can add bold tags to title so this is why we went with underline originally, although it seems we may have moved away from rendering the display title (iPod renders as IPod for example - note uppercase)

Currently the whole title is wrapped in a strong tag so we'd need to use something else as you can't have a strong tag inside a strong tag. So I think what you are asking for is increasing font-weight instead of underlining?

Yes. the screenshot above in the description is done by font-weight change in inspector which worked for me.

TIL display title can also contain styling. why not. /s

ovasileva triaged this task as Medium priority.Jun 20 2017, 12:09 PM
Jdlrobson updated the task description. (Show Details)Jun 21 2017, 11:58 PM

@Nirzar what font-weights do you suggest? just to be explicit can you please update the description in the blanks I've provided? Then please move to triaged but future.

Nirzar updated the task description. (Show Details)Jun 23 2017, 7:30 PM
Nirzar updated the task description. (Show Details)
ovasileva set the point value for this task to 1.Jul 4 2017, 4:41 PM

1 because:

  • Search result is an h3, needs styling changed .search-overlay h3 { font-weight: normal }
  • Higlighting is done with a strong tag, with an added underline, so we need to remove it .search-overlay h3 strong { /* Remove underline */ }
Nirzar removed Nirzar as the assignee of this task.Jul 11 2017, 10:55 PM
pmiazga claimed this task.Jul 13 2017, 4:22 PM

Moved to blocked as MobileFrontend is in read-only state till T166748 gets resolved.

It's no longer read only so go for it.

Change 365083 had a related patch set uploaded (by Pmiazga; owner: Pmiazga):
[mediawiki/extensions/MobileFrontend@master] Make autosuggest wordmatch bold without underline

Jdlrobson reassigned this task from pmiazga to Nirzar.Jul 17 2017, 11:40 PM
Jdlrobson added a subscriber: pmiazga.

@Nirzar not sure if this can skip QA. Will leave that up to you. If it needs QA it needs a test plan otherwise please sign off. The patch should be live on beta cluster by 5pm PST.

Change 365083 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Make autosuggest wordmatch bold without underline

Nirzar closed this task as Resolved.Jul 18 2017, 9:49 PM

Macro votecat: looks  good