Page MenuHomePhabricator

Outstanding improvements to the results layout on special:search page
Closed, ResolvedPublic

Description

{F35462447}This ticket is a follow up to T307463

Outstanding AC

  • Ellipses are added at the end of snippets to indicate the omission of words from quoted material and to give user an indication that there is more to explore.

Tweaks we agreed on after discussion.

  • Changes to Vector2022 the ensure search result max-width is no greater than 50em (width of AdvancedSearch) We will also ensure that the interwiki results remain floated to right.

QAs scenario that should be tested to cover all the scenarios mentioned above:

  • Vector - No change it should be 38em wide
  • Vector + interwiki - No change it should be 60% wide
  • Vector 2022 - Changed it should be 50em wide
  • Vector 2022 + interwiki - changed it should be 50 em wide
  • Different messages (create link, not found and interwiki header ) - changed it should be 50 em wide
@media only screen and (min-width: 720px)
.mw-searchresults-has-iw .mw-search-createlink, 
.mw-searchresults-has-iw .mw-search-nonefound, 
.mw-searchresults-has-iw .mw-search-results, 
.mw-searchresults-has-iw .mw-search-interwiki-header {
    ++max-width: 50em
}

@media only screen and (min-width: 720px)
.mw-searchresults-has-iw #mw-interwiki-results {
    ++float: right; 
}
  • //Here is an example how we want the search column widths to look. This is a screenshot of the current special:search with menu open. If we can make the page look the same without menu open it will get us closer to where we want to go.

Screen Shot 2022-08-16 at 12.38.35 PM.png (1×3 px, 705 KB)

.mw-content-container{
    TBD
}
  • There should be no changes to old Vector

Event Timeline

Sneha renamed this task from [S] Outstanding improvements to the results layout on special:search page to Outstanding improvements to the results layout on special:search page.Aug 16 2022, 2:08 PM
Sneha updated the task description. (Show Details)
Sneha updated the task description. (Show Details)
Sneha updated the task description. (Show Details)
Seddon updated the task description. (Show Details)

The spacing produced by the above AC needs some decision as it produces unwanted empty spaces. Here are three possibilities:

Option 1: middle align the sidebar, so that it is always in the middle of the available space, if needed I can set a min space between the middle content and the sidebar (for situation when the screen shrinks)

Option 2: Left align the sidebar and set a margin to 8% or something similar (this will add a lot of space on the righthand side

Option 3: We align the sidebar to the RIGH with a margin.

image-1.png (1×3 px, 286 KB)

image.png (978×3 px, 233 KB)

image-2.png (968×3 px, 234 KB)

Change 828674 had a related patch set uploaded (by Simone Cuomo; author: Simone Cuomo):

[mediawiki/skins/Vector@master] Outstanding improvements to the results layout on special:search page

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

Change 828675 had a related patch set uploaded (by Simone Cuomo; author: Simone Cuomo):

[mediawiki/core@master] Outstanding improvements to the results layout on special:search page

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

I have raised two patches that should solve the above issue by completing the third AC of the ticket "Here is an example how we want the search column widths to look."

By always showing a white space on the left, we have reduced the extra white space shown in my above images.

Looks like we don't have to chose from the three options above if we are able to always show white space on the left and it will get us closer to how we want it to align in future with grids. Can you share the screenshot of how it will look with the latest implementation?

After the feedback on the review and a discussion I had in Slack with Matthias, I come to the conclusion that we need to clarify what and where things should actually be developed:

  • Search result width: **Probably to be set everywhere (need to check which Skins require to override)
  • Interwiki sidebar **- CSS to be defined within the IW module. This may have to be applied ONLY if the width of the search result is altered, so it is dependent on the above change.
  • Grid-column-start **- Vector 2022 specific. This should prob go in vector - maybe Jon to help me understand where to place this.

cc: @Jdlrobson @Sneha

Change 828674 abandoned by Simone Cuomo:

[mediawiki/skins/Vector@master] Outstanding improvements to the results layout on special:search page

Reason:

Solved in the core extension with the use of skinStyles

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

Change 828675 merged by jenkins-bot:

[mediawiki/core@master] Outstanding improvements to the results layout on special:search page

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

Change 830613 had a related patch set uploaded (by Matthias Mullie; author: Matthias Mullie):

[mediawiki/core@master] Use container div instead of styling elements individually

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

Checked in betalabs and compared with current production enwiki wmf.28 - looks according to the specs.

@Sneha - does the case Vector 2022 collapsed(marked with look as intended?

QA Notes for testing in production
(1) Vector legacy

betalabsenwiki wmf.28
No results found
Screen Shot 2022-09-09 at 5.19.50 PM.png (976×2 px, 378 KB)
No results found
Screen Shot 2022-09-09 at 5.17.56 PM.png (772×2 px, 298 KB)
Results are found (no interwiki links)
Screen Shot 2022-09-09 at 5.38.37 PM.png (1×2 px, 471 KB)
Results are found (no interwiki links)
Screen Shot 2022-09-09 at 5.38.50 PM.png (1×2 px, 488 KB)
Results are found (interwiki links are present)
Screen Shot 2022-09-09 at 5.33.18 PM.png (1×2 px, 502 KB)
Results are found (interwiki links are present)
Screen Shot 2022-09-09 at 5.39.19 PM.png (1×2 px, 479 KB)

(2) Vector 2022

betalabsenwiki wmf.28
No results found un-collapsed
Screen Shot 2022-09-10 at 9.51.37 AM.png (1×2 px, 302 KB)
No results found un-collapsed
Screen Shot 2022-09-10 at 9.53.00 AM.png (1×2 px, 256 KB)
collapsed
Screen Shot 2022-09-10 at 9.51.48 AM.png (1×2 px, 208 KB)
collapsed
Screen Shot 2022-09-10 at 9.52.39 AM.png (912×2 px, 168 KB)
Screen Shot 2022-09-09 at 5.23.01 PM.png (912×2 px, 208 KB)
Results are found (no interwiki links)
Screen Shot 2022-09-09 at 5.23.17 PM.png (1×2 px, 342 KB)
Results are found (no interwiki links)
Screen Shot 2022-09-10 at 9.52.11 AM.png (1×2 px, 431 KB)
Screen Shot 2022-09-10 at 9.52.20 AM.png (1×2 px, 336 KB)
Results are found (interwiki links are present)
Screen Shot 2022-09-09 at 5.09.22 PM.png (1×2 px, 354 KB)
Screen Shot 2022-09-09 at 5.09.32 PM.png (1×2 px, 444 KB)
Results are found (interwiki links are present)
Screen Shot 2022-09-09 at 5.08.50 PM.png (1×2 px, 431 KB)
Screen Shot 2022-09-10 at 10.14.59 AM.png (1×2 px, 502 KB)

Change 831579 had a related patch set uploaded (by Simone Cuomo; author: Simone Cuomo):

[mediawiki/core@master] Outstanding improvements to the results layout on special:search page

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

@Etonkovidova I just noticed that my changes were also affecting the mobile "look and feel" of the search result. There is a breaking change on Mobile where the SearchResult is bigger than the mobile view.

I have moved this ticket into "core-review" awaiting for the PR to be merged (please let me know if you want things to be handled differently)

Change 830613 merged by jenkins-bot:

[mediawiki/core@master] Use container divs instead of styling elements individually

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

Change 831579 merged by jenkins-bot:

[mediawiki/core@master] Outstanding improvements to the results layout on special:search page

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

For @Sneha review.

I checked cawiki wmf.1 - below are the screenshots with Vector 2022 collapsed state:

No results foundMatching result (sister projects are displayedNo matching results (sister projects suggestions)
Screen Shot 2022-09-15 at 10.55.49 AM.png (1×2 px, 302 KB)
Screen Shot 2022-09-15 at 10.56.10 AM.png (1×2 px, 456 KB)
Screen Shot 2022-09-15 at 10.56.32 AM.png (1×2 px, 468 KB)
Searching in different language
Screen Shot 2022-09-15 at 11.04.38 AM.png (924×2 px, 203 KB)

@Etonkovidova The search results column width and addition of ellipses both look good to me. I am going to have a separate discussion with Simone and Seddon to understand what other adjustments we can do with respect to the position of columns on the page but for this ticket I don't have any further fixes to suggest.

Etonkovidova updated the task description. (Show Details)

@Etonkovidova The search results column width and addition of ellipses both look good to me. I am going to have a separate discussion with Simone and Seddon to understand what other adjustments we can do with respect to the position of columns on the page but for this ticket I don't have any further fixes to suggest.

Thanks @Sneha! Resolved after additional check in wmf.3(the task description is updated, i.e. are removed.