Page MenuHomePhabricator

Restore styling of siteSub (aka site tagline) when article indicators are present
Open, HighPublic2 Estimated Story Points

Assigned To
Authored By
alexhollender_WMF
Jun 27 2022, 2:56 PM

Description

Description

It seems that when we switched the position of these elements we unintentionally lost some of the styling of the siteSub (aka the "From Wikipedia..." tagline):

margin above tagline (should be 8px)
image.png (2×3 px, 1 MB)
image.png (2×3 px, 1 MB)
font-size (should be 12.8px)
image.png (2×4 px, 568 KB)
image.png (2×4 px, 509 KB)

This only impacts pages which have article indicators.

TODO

  • Clear the float of the indicators
  • Restore font-size of message to 14px
  • Reduce margin-top on .mw-body-subheader to 8px

AC

We should test this change across various namespaces and special/administrative pages to make sure the change doesn't cause any overlapping text.

  • There should always be an 8px space between the top of the tagline (#siteSub) element ( e.g. "From Wikipedia, the free encyclopedia") and the toolbar
  • Notices such as redirects or breadcrumbs (on subpages) do no overlap with the content, toolbar, or tagline.
  • The text of the #contentSub element does not overlap the content or toolbar on history, talk or diff pages.
  • Check Wikivoyage, the image banners used widely on that project are inside the #contentSub element. The breadcrumb navigation or image should not overlap the toolbar.
  • The top of the VisualEditor toolbar is still flush with the bottom of the article toolbar.

Sign off steps

Event Timeline

What does "previous" refer to here? Looking at previous versions of MediaWiki nothing seems to have changed here.

Okay I think I'm up to speed.

The siteSub should be hidden by default so this is why it was not picked up by our UI regression suite - how are you making that appear Alex? https://gerrit.wikimedia.org/g/mediawiki/core/+/65dee0142655e33209e6458348649bdfb56496b4/resources/src/mediawiki.skinning/interface.less#32

Does "previous" mean last weeks release? This is what I'm currently seeing on production with last week's release (I had to show the siteSub since it's hidden by editors):

Screen Shot 2022-06-27 at 8.18.55 AM.png (560×2 px, 183 KB)

compared to beta cluster going out this week:

Screen Shot 2022-06-27 at 8.23.01 AM.png (624×2 px, 194 KB)

A clear: both on contentSub would fix this (As indicators are floated, the siteSub is not)

Font-size has also changed.

Since it's hidden and it only impacts pages with indicators (does not impact https://en.wikipedia.org/wiki/Kenar_Rud?vectortitleabovetabs=1 for example) I'm not sure how urgent it is to fix this.

Jdlrobson renamed this task from Restore spacing below siteSub (aka tagline) to Restore spacing below siteSub when article indicators are present (aka site tagline).Jun 27 2022, 3:25 PM
Jdlrobson renamed this task from Restore spacing below siteSub when article indicators are present (aka site tagline) to Restore spacing below siteSub (aka site tagline) when article indicators are present.
Jdlrobson updated the task description. (Show Details)

I was seeing this on https://en.wikipedia.beta.wmflabs.org/wiki/Polar_bear, although now the siteSub is now not showing (it probably should as it shows in en.wiki). The "previous" I referred to was old vector.

ow the siteSub is now not showing (it probably should as it shows in en.wiki)

Per https://meta.wikimedia.beta.wmflabs.org/wiki/Main_Page:

its long term goal is to replicate configuration of all production sites, so that we can test any software here first to avoid any issues on the main Wikimedia projects

I've restored the display of the siteSub - it is helpful to have the beta site as close to production as possible, even if this is not the default config for MediaWiki.

alexhollender_WMF renamed this task from Restore spacing below siteSub (aka site tagline) when article indicators are present to Restore styling of siteSub (aka site tagline) when article indicators are present.Jun 27 2022, 9:04 PM
alexhollender_WMF updated the task description. (Show Details)
Jdlrobson triaged this task as Medium priority.Jun 27 2022, 9:38 PM
ovasileva raised the priority of this task from Medium to High.Jun 29 2022, 4:41 PM
bwang removed bwang as the assignee of this task.Jul 8 2022, 3:37 PM
bwang added a subscriber: bwang.

Change 811773 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Restore #siteSub font size

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

Change 811773 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Restore #siteSub font size

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

Jdlrobson updated the task description. (Show Details)

@alexhollender can you design review this on the beta cluster. I guess design review would be more useful than QA here. Move to sign off if looks good.

alexhollender_WMF added a subscriber: Edtadros.

@Jdlrobson the font size looks correct. the spacing seems ~6px too much...was previously 24px and is now 30px?

✅ font-size
Screen Shot 2022-07-19 at 9.18.03 AM.png (236×294 px, 26 KB)
❓spacing
Screen Shot 2022-07-19 at 9.25.27 AM.png (655×1 px, 114 KB)

Change 816844 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Conditionally render contentSub and contentSub2 to fix spacing

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

bwang removed bwang as the assignee of this task.Tue, Jul 26, 2:53 PM

While discussing this with @alexhollender_WMF we found that the spacing between #siteSub and the rest of the page wont always be consistent even after this patch due to padding/margin inconsistencies between the text content from the parser, and any additional elements above the text content on certain pages (i.e. ambox and disambiguation elements). The result is that the spacing for pages with those additional elements might be slightly less

I've updated the task description:

  • removed the to-do about adjusting spacing below the tagline element
  • added a to-do about adjusting spacing above the tagline element (I recently realized this had changed from legacy vector)

Test wiki created on Patch demo by BWang (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/bda9e597b5/w

Test wiki created on Patch demo by BWang (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/5272481097/w

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

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

Reedy renamed this task from Restore styling of siteSub (aka site tagline) when article indicators are present to Restore styling of siteSub (aka site tagline) when article indicators are present.Tue, Aug 2, 6:00 PM

@alexhollender_WMF Here's the patchdemo with the spacing changes @Jdrewniak and I landed on:

Article with hatnote
Article with no content before main content

I would also check what it looks like when you remove the tagline

Test wiki created on Patch demo by BWang (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/462c183ea8/w

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

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

Test wiki created on Patch demo by BWang (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/a69bd5c45f/w

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

https://patchdemo.wmflabs.org/wikis/462c183ea8/w/

Just to give a clearer picture of the change, here are the results from Pixel visual regression tool.

The tagline now has an 8px top-margin. This is now a hard-coded to compensate for different font sizes. The spacing between the tagline and the content (bottom margin) hasn't changed much.

MediaWiki_Main_Page_vector-2022_0_viewport_0_phone.png (480×320 px, 27 KB)
MediaWiki_Main_Page_vector-2022_0_viewport_0_phone-1.png (480×320 px, 27 KB)
failed_diff_MediaWiki_Main_Page_vector-2022_0_viewport_0_phone.png (480×320 px, 28 KB)
referencetestdiff

The breadcrumb link (in the #contentSub element) is more equally spaced between the tagline and the content.

MediaWiki_Testing_user_sub_pages_vector-2022_0_document_0_phone.png (755×452 px, 58 KB)
MediaWiki_Testing_user_sub_pages_vector-2022_0_document_0_phone-1.png (754×452 px, 58 KB)
failed_diff_MediaWiki_Testing_user_sub_pages_vector-2022_0_document_0_phone.png (755×452 px, 65 KB)
referencetestdiff

When no tagline is present, the content is closer to the toolbar, but with a minimum 16px top margin.

MediaWiki_SpecialBlankPage_vector-2022_sidebar-open_0_viewport_3_desktop-wide.png (900×1 px, 44 KB)
MediaWiki_SpecialBlankPage_vector-2022_sidebar-open_0_viewport_3_desktop-wide-1.png (900×1 px, 44 KB)
failed_diff_MediaWiki_SpecialBlankPage_vector-2022_sidebar-open_0_viewport_3_desktop-wide.png (900×1 px, 52 KB)
referencetestdiff

The content top-margin can be more than 16px, depending on the first element. Here the <H2> has a top-margin of 1em (which is larger than 16px).

MediaWiki_SpecialRecentChanges_vector-2022_no_max_width_sidebar-closed_0_viewport_0_phone.png (480×320 px, 21 KB)
MediaWiki_SpecialRecentChanges_vector-2022_no_max_width_sidebar-closed_0_viewport_0_phone-1.png (480×320 px, 22 KB)
failed_diff_MediaWiki_SpecialRecentChanges_vector-2022_no_max_width_sidebar-closed_0_viewport_0_phone.png (480×320 px, 23 KB)
referencetestdiff

In some cases though, it looks like the top-margin is less than 16px. This is actually due to the line-height of the subtitle elements, which actually come from core from interface.less, ( and just my opinion, but those style seem a little overly opinionated).

MediaWiki_TestactionHistory_vector-2022_0_viewport_1_tablet.png (768×720 px, 87 KB)
MediaWiki_TestactionHistory_vector-2022_0_viewport_1_tablet-1.png (768×720 px, 87 KB)
failed_diff_MediaWiki_TestactionHistory_vector-2022_0_viewport_1_tablet.png (768×720 px, 82 KB)
referencetestdiff

thanks for the update @bwang and thanks for this comprehensive review @Jdrewniak.

all of the test images look better than the reference images to me (aside from the last set, which you've explained), so I think we're good to go here.
👍 👍 👍 👍

Change 816844 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Update #siteSub, #contentSub and #contentSub2 to fix spacing, conditionally render #contentSub and #contentSub2

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

As I was writing the AC in the description, I realized Wikivoyage makes heavy use of the #contentSub element to place the page banner and the breadcrumbs. With an updated patch (forthcoming) we expect there will be slightly more spacing near the top and bottom of the that banner.

screen_shot_2022-08-03_at_4.33.24_pm-1.png (445×990 px, 337 KB)

current vs. expected

Change 820226 had a related patch set uploaded (by Jdrewniak; author: Bernard Wang):

[mediawiki/skins/Vector@master] Followup contentSub contentSub2 styling

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

Change 820226 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Followup contentSub contentSub2 styling

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