mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-24 02:39:20 +00:00
Fix TOC scrollable indicator
Causes 4 minor visual regressions where the collapsed toc width is slightly smaller will be fixed when page tools is deployed. https://jmp.sh/o3vlGVlb - Remove @padding-vertical-toc, @padding-right-toc and @padding-left-toc variables, which would need to be removed after page tools is enabled anyway - Remove @height-collapsed-toc-button, @padding-top-content-px and @max-width-collapsed-toc variables which weren't needed - Greatly simplify CSS for collapsed TOC width Bug: T324877 Change-Id: I6d44d4b49fb5dccd776dfe0e96740fdb9bff4c5d
This commit is contained in:
parent
b18ecb143c
commit
4efafaf374
|
@ -141,12 +141,7 @@
|
|||
|
||||
// TOC
|
||||
@height-toc-scroll-indicator: 30px;
|
||||
@padding-vertical-toc: 20px;
|
||||
@padding-right-toc: 12px;
|
||||
// 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
|
||||
@padding-left-toc: 15px + @padding-right-toc;
|
||||
@scrollbar-offset-toc-scroll-indicator: 12px;
|
||||
@spacing-subsection-toggle: 22px; // @size-toc-subsection-toggle-icon @ 12
|
||||
@size-toc-subsection-toggle-icon: 1.834em;
|
||||
// Calculated with: 1.5em (TOC top padding) + @margin-top-pinned-toc = 0.5em (.mw-body padding) + 2.34 (height of #firstHeading)
|
||||
|
|
|
@ -48,8 +48,6 @@
|
|||
// Align the left edge of the text with the page container
|
||||
margin-left: -@padding-horizontal-dropdown-menu-item;
|
||||
padding: @padding-vertical-dropdown-menu-item @padding-horizontal-dropdown-menu-item;
|
||||
// Ensure main menu takes up full width of its container factoring in the negative left margin
|
||||
width: ~'calc( 100% + @{padding-horizontal-dropdown-menu-item} )';
|
||||
background-color: @background-color-secondary--modern;
|
||||
|
||||
// Match styles of .mw-list-item a in PinnableElement.less
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
background-color: @background-color-page-container;
|
||||
|
||||
.vector-feature-page-tools-disabled & {
|
||||
padding: @padding-vertical-toc @padding-right-toc @padding-vertical-toc @padding-left-toc;
|
||||
padding: 20px 12px 20px 27px;
|
||||
|
||||
.vector-toc-pinnable-header {
|
||||
// Override default pinnable header styles
|
||||
|
@ -75,7 +75,7 @@
|
|||
.vector-toc-text {
|
||||
// Increase width to prevent line wrapping due to bold text
|
||||
// Avoid applying on link element to avoid focus indicator changing size
|
||||
width: ~'calc( 100% + @{padding-right-toc} )';
|
||||
width: ~'calc( 100% + @{padding-horizontal-dropdown-menu-item} )';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -28,6 +28,12 @@
|
|||
margin-top: @margin-top-pinned-toc;
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-enabled & .vector-toc {
|
||||
padding-right: @padding-horizontal-dropdown-menu-item;
|
||||
// Add extra padding for the fade scrollable indicator, which is 30px tall
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
// FIXME: Remove all .sidebar-toc selectors after I5b9228380f5c4674ef424d33127a5cb4010822da is in prod for 5 days
|
||||
.sidebar-toc,
|
||||
.sidebar-toc:after,
|
||||
|
@ -35,15 +41,13 @@
|
|||
.vector-toc:after {
|
||||
.vector-feature-page-tools-disabled & {
|
||||
// Align the left edge of the TOC text with the main menu button icon.
|
||||
margin-left: -@padding-left-toc;
|
||||
margin-left: -27px;
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-enabled & {
|
||||
// Align the left edge of the TOC text with the page container
|
||||
margin-left: -@spacing-subsection-toggle;
|
||||
padding: 0 @padding-horizontal-dropdown-menu-item 0 @spacing-subsection-toggle;
|
||||
// Ensure TOC takes up full width of its container factoring in the negative left margin
|
||||
width: ~'calc( 100% + @{spacing-subsection-toggle} )';
|
||||
padding-left: @spacing-subsection-toggle;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -61,7 +65,7 @@
|
|||
height: @height-toc-scroll-indicator;
|
||||
background: linear-gradient( rgba( 255, 255, 255, 0 ), @background-color-page-container );
|
||||
background-repeat: no-repeat;
|
||||
background-position: -@padding-right-toc; // T311436 Hacky way to prevent the fade from covering the scrollbar
|
||||
background-position: -@scrollbar-offset-toc-scroll-indicator; // T311436 Hacky way to prevent the fade from covering the scrollbar
|
||||
pointer-events: none; // Make the link below the fade clickable
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,11 +1,7 @@
|
|||
@import '../../common/variables.less';
|
||||
@import '../../common/mixins.less';
|
||||
|
||||
@height-collapsed-toc-button: 36px;
|
||||
@padding-top-content-px: unit( @padding-top-content * @font-size-browser, px );
|
||||
@selector-collapsed-toc-open: ~'#vector-toc-collapsed-checkbox:checked';
|
||||
// Use calc so that the same max width can apply even when the TOC is in different containers
|
||||
@max-width-collapsed-toc: 0.85 * @max-width-content-container; // 51em
|
||||
@selector-nojs-collapsed-toc-open: ~'#vector-toc-collapsed-checkbox:checked';
|
||||
|
||||
.vector-feature-page-tools-enabled #vector-page-titlebar-toc-unpinned-container,
|
||||
.vector-feature-page-tools-enabled #vector-sticky-header-toc-unpinned-container {
|
||||
|
@ -55,25 +51,22 @@
|
|||
// FIXME: Remove all .sidebar-toc selectors after I5b9228380f5c4674ef424d33127a5cb4010822da is in prod for 5 days
|
||||
.sidebar-toc,
|
||||
.vector-toc {
|
||||
.mixin-toc-collapsed();
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: auto;
|
||||
min-width: 200px;
|
||||
// using min() so that the TOC menu doesn't fully cover the text even on small viewports
|
||||
max-width: ~'min( @{max-width-collapsed-toc}, 75vw )';
|
||||
top: @height-collapsed-toc-button; // TOC button height
|
||||
top: 36px; // TOC button height
|
||||
// FIXME: Don't use a magic number. This used to be tied to the private variable in core
|
||||
// @icon-padding-md so perhaps this needs to make use of the flush classes?
|
||||
left: -12px;
|
||||
margin-top: @padding-top-content-px; // Account for padding-top from .mw-body
|
||||
margin-top: @padding-top-content; // Account for padding-top from .mw-body
|
||||
// FIXME: Collapsed TOC styles are not consistent with other vector dropdowns
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
z-index: @z-index-menu;
|
||||
}
|
||||
|
||||
// FIXME: Remove all .sidebar-toc selectors after I5b9228380f5c4674ef424d33127a5cb4010822da is in prod for 5 days
|
||||
@{selector-collapsed-toc-open} ~ .mw-table-of-contents-container .sidebar-toc,
|
||||
@{selector-collapsed-toc-open} ~ .mw-table-of-contents-container .vector-toc {
|
||||
@{selector-nojs-collapsed-toc-open} ~ .mw-table-of-contents-container .sidebar-toc,
|
||||
@{selector-nojs-collapsed-toc-open} ~ .mw-table-of-contents-container .vector-toc {
|
||||
// Hide the TOC when the button is not checked
|
||||
display: block;
|
||||
}
|
||||
|
@ -97,20 +90,11 @@
|
|||
|
||||
// Shared collapsed TOC styles, applies across all cases (page titlebar, sticky header, floating)
|
||||
.mixin-toc-collapsed() {
|
||||
// T316056 Use max-content because collapsed TOC is absolutely positioned, width is relative to the collapsed TOC button
|
||||
// max-content doesn't account for padding even when we use box-sizing, so use content-box instead
|
||||
// and manually account for horizontal padding in the max width
|
||||
width: max-content;
|
||||
box-sizing: content-box;
|
||||
|
||||
// T316056 Remove TOC menu fixed width and apply min/max-width
|
||||
// Account for padding so that the TOC has an effective max width of @max-width-collapsed-toc, or 51em
|
||||
@padding-left-toc-em: unit( @padding-left-toc / @font-size-browser, em );
|
||||
@padding-right-toc-em: unit( @padding-right-toc / @font-size-browser, em );
|
||||
@max-width-collapsed-toc-content-box: @max-width-collapsed-toc - @padding-right-toc-em - @padding-left-toc-em;
|
||||
min-width: 200px - @padding-right-toc - @padding-left-toc;
|
||||
// using min() so that the TOC menu doesn't fully cover the text even on small viewports
|
||||
max-width: ~'min( @{max-width-collapsed-toc-content-box}, 75vw )';
|
||||
width: max-content;
|
||||
min-width: 200px;
|
||||
// Collapsed TOC should be smaller than 85% of the content container (51em) and 75vw
|
||||
max-width: ~'min( 0.85 * @{max-width-content-container}, 75vw )'; // min( 51em, 75vw )
|
||||
}
|
||||
|
||||
// TOC styles when in page titlebar
|
||||
|
|
Loading…
Reference in a new issue