jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix empty space on left when bucketed in the control/unsampled group 

When the AB test is enabled both the old and new TOC's are in the page's
html but only one is visible. The `.vector-toc-visible` class is also
present and will try to apply a left margin even if the page has been
bucketed into the control or unsampled group.

This patch takes the simplest approach to fix this problem with CSS only
especially given the transient nature of this code (will be removed when
AB test is finished):

* When the page bucketed in the control or unsampled group, prevent
  .vector-toc-visible from applying a left-margin through the use of
  `:not` selectors.

Additionally:

* Remove unnecessary `margin-left` rule that used to apply to the
  mw-workspace-container. Due to the work done in
  I2f95d5938674bb8263b6203c5f6a469762bf0cc2, the workspace container
  will now always have a computed left margin of zero because it is the
  same width as the page container.

Bug: T306366
Change-Id: Icd9572353bb5e29cfda91b095ceb8c2e652864e7
This commit is contained in:
Nicholas Ray 2022-04-19 14:08:53 -06:00
parent b2c1625d48
commit 718bcef6f9
1 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
resources/skins.vector.styles/layouts/screen.less
View File

@ -266,12 +266,6 @@ body {
.transform( translateX( -( @max-width-page-container - @max-width-workspace-container ) / 2 ) );
}
.skin-vector-toc-experiment-control .mw-table-of-contents-container,
.skin-vector-toc-experiment-unsampled .mw-table-of-contents-container,
.skin-vector-toc-experiment-treatment #toc {
display: none;
}
// Hide sidebar entirely when the checkbox is disabled and the TOC is enabled
.vector-toc-enabled #mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar {
display: none;
@ -320,10 +314,21 @@ body {
}
}
.skin-vector-toc-experiment-control .mw-table-of-contents-container,
.skin-vector-toc-experiment-unsampled .mw-table-of-contents-container,
.skin-vector-toc-experiment-treatment #toc {
display: none;
}
// Update article page's content container when
// TOC is visible and when TOC is enabled and the sidebar is open
.vector-toc-visible .mw-workspace-container .mw-content-container,
.vector-toc-visible .mw-workspace-container .mw-article-toolbar-container,
// TOC is visible and when TOC is enabled and the sidebar is open.
//
// T306366: When the TOC AB test is enabled, both the old and new TOC are in the
// HTML but only one is actually visible. Prevent the left margin from undesirably
// applying if bucketed into the control or unsampled groups which won't show
// the new TOC.
body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment-unsampled ) .vector-toc-visible .mw-workspace-container .mw-content-container,
body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment-unsampled ) .vector-toc-visible .mw-workspace-container .mw-article-toolbar-container,
.vector-toc-enabled .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
.vector-toc-enabled .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container {
@media ( min-width: @width-breakpoint-tablet ) {
@ -331,11 +336,6 @@ body {
}
}
// Prevent center align when TOC is visible
.vector-toc-visible .mw-workspace-container {
margin-left: initial;
}
@media ( min-width: @width-breakpoint-desktop ) {
.mw-page-container {
padding-left: @padding-horizontal-page-container;