wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-24 07:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Align text of main menu and ToC to main menu button

Browse source 
Instead of aligning the edge of the main menu and
ToC with the edge of the main menu button, this
aligns the text of those sidebar items with the
edge of the main menu button.

NOTE: Currently not working with the
vectorvisualenhancementnext feature flag enabled.
This will be addressed in If3aed0ac401b0abc80c3ad52806eb85b33d43f06

Bug: T317583
Change-Id: I01f639c5ca63ac50235dc21ca5273c91213f041c
This commit is contained in:
Jan Drewniak 2022-10-27 18:19:39 -04:00 committed by Jdlrobson
parent 685a3171bd
commit 8c63ac7c55
4 changed files with 14 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
includes/templates/TableOfContentsContainer.mustache
View file

@ -1,4 +1,4 @@
<div class="mw-table-of-contents-container mw-ui-icon-flush-left">
<div class="mw-table-of-contents-container">
{{! T313060 Additional container div needed to prevent the sticky element from being siblings with the footer }}
{{#data-toc}}
<div class="vector-sticky-toc-container">

10
resources/skins.vector.styles/components/MainMenu.less
View file

@ -16,17 +16,15 @@
// Align the left edge of main menu with the main menu button.
width: @width-sidebar-px;
.vector-feature-visual-enhancement-next-disabled & {
.mixin-vector-flush-left-margin-left();
//FIXME: This media query will be replaced with the pinned menu class in T317897
@media ( min-width: @min-width-desktop ) {
// Magic number from the edge of the main menu to the start of the main menu text.
margin-left: -28px;
}
// Align the left edge of main menu with the main menu button icon.
@media ( min-width: @min-width-desktop-wide ) {
width: @width-sidebar-px-wide;
.vector-feature-visual-enhancement-next-disabled & {
margin-left: 0;
}
}
}

23
resources/skins.vector.styles/components/TableOfContents.less
View file

@ -6,7 +6,7 @@
// Sidebar TOC uses increased left padding and a negative left margin to achieve
// a 15px spacing without clipping the chevron icon
// https://phabricator.wikimedia.org/T312156#8095894
@sidebar-toc-left-padding: 15px + @icon-padding-md;
@sidebar-toc-left-padding: 15px + @sidebar-toc-right-padding;
@toc-subsection-toggle-icon-size: 1.834em;
.mw-table-of-contents-container {
@ -24,10 +24,6 @@
position: sticky;
top: 0;
.vector-feature-visual-enhancement-next-disabled & {
margin-left: 0;
}
@media ( min-width: @min-width-desktop ) {
.vector-toc-not-collapsed & {
// Default spacing separating the sidebar TOC from the main menu or viewport.
@ -42,18 +38,11 @@
}
}
.vector-feature-visual-enhancement-next-disabled {
.sidebar-toc,
.sidebar-toc:after {
// T312156 Update TOC spacing after removing background color
// Align the left edge of the TOC text with the main menu button icon.
margin-left: -@sidebar-toc-left-padding;
@media ( min-width: @min-width-desktop-wide ) {
// Align the TOC subsection toggle button icon with the main menu button icon.
margin-left: -@icon-padding-md;
}
}
.sidebar-toc,
.sidebar-toc:after {
// T312156 Update TOC spacing after removing background color
// Align the left edge of the TOC text with the main menu button icon.
margin-left: -@sidebar-toc-left-padding;
}
.sidebar-toc {

8
resources/skins.vector.styles/components/TableOfContentsCollapsed.less
View file

@ -161,11 +161,9 @@
}
// Disable left and right margin
&.vector-feature-visual-enhancement-next-disabled {
.sidebar-toc {
margin-left: 0;
margin-right: 0;
}
.sidebar-toc {
margin-left: 0;
margin-right: 0;
}
}