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

Merge "Make space between top of TOC/Page tools and top of viewport/bottom of sticky header 30px"

Browse source
This commit is contained in:
jenkins-bot 2023-02-10 19:58:28 +00:00 committed by Gerrit Code Review
parent 2304326a31 0440eeada4
commit be0476b17f
4 changed files with 29 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
resources/common/variables.less
View file

@ -146,13 +146,20 @@
// bottom of the scroll indicator.
@max-height-bottom-spacing-scroll-indicator: 16px;
// TOC and Page tools Pinned elements
@padding-top-pinned-element: unit( (30px - @padding-top-tabs) / @font-size-browser, em);
// Page Tools
// 2.34 (height of #firstHeading) - the padding on the pinned element to allow
// for 30px of space between the top of the pinned element and the top of the viewport.
@margin-top-pinned-page-tools: (@font-size-heading-1 * @line-height-heading) - @padding-top-pinned-element;
// TOC
@spacing-subsection-toggle: 22px; // @size-toc-subsection-toggle-icon @ 12
@size-toc-subsection-toggle-icon: 1.834em;
// Calculated with: @margin-top-pinned-toc = 0.5em (.mw-body padding) + 2.34 (height of #firstHeading)
@margin-top-pinned-toc: @padding-top-content + (@font-size-heading-1 * @line-height-heading);
// The design spec specifies 30px of space from the top of the viewport to the top of the pinned TOC (excluding top padding).
@top-sticky-toc: 30px - @padding-top-tabs;
// Add the top padding of .mw-body element to @margin-top-pinned-page-tools
// since it starts higher on the page.
@margin-top-pinned-toc: @margin-top-pinned-page-tools + @padding-top-content;
// Search
@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em T270202

2
resources/skins.vector.styles/components/PageTools.less
View file

@ -17,6 +17,7 @@
// stylelint-disable-next-line plugin/no-unsupported-browser-features
position: sticky;
top: 0;
margin-top: @margin-top-pinned-page-tools;
}
}
@ -28,6 +29,7 @@
max-height: ~'calc( 100vh - @{max-height-bottom-spacing-scroll-indicator} )';
overflow-y: auto;
box-sizing: border-box;
padding-top: @padding-top-pinned-element;
// Add fade indicator.
.mixin-vector-scroll-indicator();
}

28
resources/skins.vector.styles/components/TableOfContentsPinned.less
View file

@ -33,15 +33,10 @@
#vector-toc-pinned-container {
// stylelint-disable-next-line plugin/no-unsupported-browser-features
position: sticky;
// The design spec specifies 30px of space from the top of the viewport to the top of the pinned TOC (excluding top padding).
top: @top-sticky-toc;
.vector-toc {
max-height: ~'calc( 100vh - @{top-sticky-toc} - @{max-height-bottom-spacing-scroll-indicator} )';
}
top: 0;
.vector-toc-pinned & {
// Default spacing separating the sidebar TOC from the main menu or viewport.
// Default spacing separating the sidebar TOC from the main menu.
margin-top: 1.5em;
}
@ -55,15 +50,22 @@
margin-top: @margin-top-pinned-toc;
}
// T302076: Add fade scrollable indicator when TOC is in sidebar
// Avoid showing indicator when the TOC is floating, or collapsed in the page title/sticky header
.vector-toc {
max-height: ~'calc( 100vh - @{max-height-bottom-spacing-scroll-indicator} )';
.mixin-vector-scroll-indicator();
}
.vector-feature-page-tools-disabled & .vector-toc {
padding-top: ~'calc( @{padding-top-pinned-element} + @{padding-top-tabs} )';
}
.vector-feature-page-tools-enabled & .vector-toc {
padding-top: @padding-top-pinned-element;
padding-left: @spacing-subsection-toggle;
padding-right: @padding-horizontal-dropdown-menu-item;
}
// T302076: Add fade scrollable indicator when TOC is in sidebar
// Avoid showing indicator when the TOC is floating, or collapsed in the page title/sticky header
.vector-toc-pinned & .vector-toc {
.mixin-vector-scroll-indicator();
}
}
}

2
resources/skins.vector.styles/layouts/grid.less
View file

@ -140,7 +140,7 @@
* FIXME: This can be removed when T322740 is resolved.
*/
grid-template-areas: 'titlebar-cx .'
'titlebar .'
'titlebar columnEnd'
'toolbar columnEnd'
'content columnEnd';