Page MenuHomePhabricator

Refinements to search box in site header
Closed, ResolvedPublic2 Estimated Story Points

Description

Description

There are currently three refinements needing to be made to the search box in the site header:

1. Reduce max-width

Currently the max-width seems to be set at 36.25em (580px) .
We should reduce it to 28.25em (around 450px).

currentupdated
wide screen
narrow screen
2. Adjust margin-left

Currently margin-left on #searchform is set to auto which pulls the search box into the center of the screen.
Instead it should be anchored to the right of the logo. So we need to 1) remove margin: auto from #searchform, and 2) increase margin-left on #p-search from 2.5em to 3.5em.

currentupdated
3. Shift search box to be aligned-right once user tools drop below

At a screen width of 1014px the user tools drop below the search bar. At this point it should shift to the right edge of the container.

currentupdated

(it appears a patch for this has already been pushed up)

Developer notes:
From my investigations so far, this has a few complications

  • The search has a max-width - when this is altered to be width: 100% the input is larger than the max-width but we get the desired effect
  • It would mean managing a larger gap between search and logo at low resolutions - is it worth it while the personal tools implementation is prone to change in future?
  • It is not helped by the move away from absolutely positioned layout.

QA Results - Beta

ACStatusDetails
1T261686#6462539
2T261686#6462539
3T261686#6471305

QA Results - Prod

ACStatusDetails
1T261686#6499366
2T261686#6499366
3T261686#6499366

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 31 2020, 7:32 PM

Change 623445 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Flush search to right on smaller resolutions

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

I have a possible solution here but wanted to check in before code reviewing.

ovasileva triaged this task as Medium priority.Sep 1 2020, 4:10 PM

Change 623445 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Flush search to right on smaller resolutions

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

alexhollender renamed this task from Search bar should shift to right edge of container at low resolutions to Refinements to search box in site header.Sep 3 2020, 3:52 PM
alexhollender updated the task description. (Show Details)

Change 624125 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Reduce max-width and adjust margin-left

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

ovasileva raised the priority of this task from Medium to High.Sep 3 2020, 5:36 PM
ovasileva set the point value for this task to 2.Sep 3 2020, 5:45 PM

Need to follow up with Alex with a comment he made in a google hangout around margin-left being auto.

alexhollender removed alexhollender as the assignee of this task.Sep 9 2020, 5:46 PM

Everything is looking good here: https://patchdemo.wmflabs.org/wikis/8ffa80ac67d564b7881bfe79d77691cb/w/index.php/Main_Page?useskinversion=2

1. Reduce max width

2. Adjust margin-left


(I updated the logo locally just to get a better sense)

3. Shift search box to be aligned-right once user tools drop below

Change 624125 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Reduce max-width and adjust margin-left

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

Status: ❓ Need More Info
Environment: beta
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1. Reduce max-width
Currently the max-width seems to be set at 36.25em (580px) .
We should reduce it to 28.25em (around 450px).

ActualExpected
wide screen
narrow screen

✅ AC2. Adjust margin-left
Currently, margin-left on #searchform is set to auto which pulls the search box into the center of the screen.
Instead it should be anchored to the right of the logo. So we need to 1) remove margin: auto from #searchform, and 2) increase margin-left on #p-search from 2.5em to 3.5em.

ActualExpected

❓ AC3. Shift search box to be aligned-right once user tools drop below
At a screen width of 1014px the user tools drop below the search bar. At this point it should shift to the right edge of the container.

ActualExpected

@Jdlrobson: The field is right-justified, but the screen width where the user tools drop below occurs at 1046px. Is this acceptable?

Edtadros updated the task description. (Show Details)Sep 15 2020, 1:33 PM

Per @Jdlrobson , the specific pixel width where the field would become right justified is expected to vary slightly, so AC3 above is considered Passed.

Edtadros updated the task description. (Show Details)Sep 17 2020, 4:17 PM
Edtadros reassigned this task from Edtadros to ovasileva.Mon, Sep 28, 4:51 PM
Edtadros added a subscriber: Edtadros.

Status: ✅ PASS
Environment: enwiki
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1. Reduce max-width
Currently the max-width seems to be set at 36.25em (580px) .
We should reduce it to 28.25em (around 450px).

ActualExpected
wide screen
narrow screen

✅ AC2. Adjust margin-left
Currently, margin-left on #searchform is set to auto which pulls the search box into the center of the screen.
Instead it should be anchored to the right of the logo. So we need to 1) remove margin: auto from #searchform, and 2) increase margin-left on #p-search from 2.5em to 3.5em.

ActualExpected

|

✅ AC3. Shift search box to be aligned-right once user tools drop below
At a screen width of 1014px the user tools drop below the search bar. At this point it should shift to the right edge of the container.

ActualExpected
Edtadros updated the task description. (Show Details)Mon, Sep 28, 4:52 PM
ovasileva closed this task as Resolved.Wed, Sep 30, 1:08 PM

Done!