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

Merge "Follow-up: Clean up sticky header and collapsed TOC styles"

This commit is contained in:
jenkins-bot 2022-09-17 00:11:40 +00:00 committed by Gerrit Code Review
parent e00603010b 88d4aef088
commit 5e96b277a7
3 changed files with 62 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
resources/common/variables.less
View File

@ -140,9 +140,6 @@
@width-sidebar-px: 220px; @width-sidebar-px: 220px;
@width-sidebar-px-wide: 244px; @width-sidebar-px-wide: 244px;
// TOC
@sidebar-toc-selector: ~'.mw-table-of-contents-container .sidebar-toc';
// Search // Search
@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em T270202 @max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em T270202
@min-width-search-button: 28px; @min-width-search-button: 28px;

72
resources/skins.vector.styles/components/StickyHeader.less
View File

@ -12,7 +12,6 @@
right: 0; right: 0;
z-index: @z-index-header; z-index: @z-index-header;
transition: @transition-sticky-header; transition: @transition-sticky-header;
display: none;
align-items: center; align-items: center;
margin: 0 auto; margin: 0 auto;
background: @background-color-base; background: @background-color-base;
@ -28,24 +27,10 @@
max-width: @max-width-page-container + ( @padding-horizontal-page-container-desktop-wide * 2 ); max-width: @max-width-page-container + ( @padding-horizontal-page-container-desktop-wide * 2 );
} }
// Hide sticky header and it's children until visible class is applied to the body // Hide sticky header until visible class is applied to the body
.client-js.vector-sticky-header-enabled :not( .vector-sticky-header-visible ) & { display: none;
transform: translateY( -100% ); transform: translateY( -100% );
opacity: 0;
> div {
display: none;
}
}
// Hide sticky header for no-js users
.client-nojs & {
display: none;
}
// T298836 Only show sticky header at higher resolutions.
@media ( min-width: @min-width-desktop ) {
display: flex;
}
// //
// Layout // Layout
@ -81,15 +66,15 @@
min-width: 0; min-width: 0;
} }
// Hide TOC in sticky header by default
&-toc-container { &-toc-container {
display: none; display: none;
}
.vector-toc-collapsed &-toc-container {
display: block;
position: relative; position: relative;
margin-left: -@icon-padding-md; margin-left: -@icon-padding-md;
// Only show TOC in sticky header when collapsed class is present
.vector-toc-collapsed & {
display: block;
}
} }
&-context-bar-primary { &-context-bar-primary {
@ -146,7 +131,8 @@
} }
} }
@media ( min-width: @min-width-tablet ) { // T298836 Sticky header is only shown at higher resolutions
@media ( min-width: @min-width-desktop ) {
.client-js.vector-sticky-header-enabled { .client-js.vector-sticky-header-enabled {
// T290518: When the sticky header is enabled (feature flag is on, js is // T290518: When the sticky header is enabled (feature flag is on, js is
// enabled, and viewport is at higher resolutions), add scroll padding to the // enabled, and viewport is at higher resolutions), add scroll padding to the
@ -159,21 +145,29 @@
// sticky header isn't visible yet but we still need scroll padding applied // sticky header isn't visible yet but we still need scroll padding applied
// (e.g. when the user navigates to a page with a hash fragment in the URI). // (e.g. when the user navigates to a page with a hash fragment in the URI).
scroll-padding-top: @height-sticky-header; scroll-padding-top: @height-sticky-header;
}
}
// T298836 Sticky header is only shown at higher resolutions .vector-sticky-header {
@media ( min-width: @min-width-desktop ) { // Sticky header is only enabled for js users and when feature flag is enabled
.client-js .vector-sticky-header-visible { display: flex;
// T289817 Override other sticky element offsets to ensure that other }
// sticky elements (i.e. table headers) appear below the sticky header.
// .vector-sticky-header-visible {
// @stable See the Integration notes for developers section at .vector-sticky-header {
// https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements/Features/Sticky_Header // Show sticky header with transition when visible class is applied to the body
.mw-sticky-header-element, opacity: 1;
.charts-stickyhead th { transform: translateY( 0 );
/* stylelint-disable-next-line declaration-no-important */ }
top: @height-sticky-header !important;
// T289817 Override other sticky element offsets to ensure that other
// sticky elements (i.e. table headers) appear below the sticky header.
//
// @stable See the Integration notes for developers section at
// https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements/Features/Sticky_Header
.mw-sticky-header-element,
.charts-stickyhead th {
/* stylelint-disable-next-line declaration-no-important */
top: @height-sticky-header !important;
}
} }
} }
} }

54
resources/skins.vector.styles/components/TableOfContentsCollapsed.less
View File

@ -34,7 +34,7 @@
} }
} }
// Override button styles for the "move to sidebar/hide" links. Default hide. // Styles for the "move to sidebar/hide" buttons, hidden by default.
.vector-toc-collapse-button, .vector-toc-collapse-button,
.vector-toc-uncollapse-button { .vector-toc-uncollapse-button {
display: none; display: none;
@ -59,7 +59,7 @@
} }
} }
// Shared collapsed TOC styles, applies across all collapsed cases (page title, floating, sticky header) // Shared collapsed TOC styles, applies across all collapsed cases (header, floating, sticky header)
.mixin-toc-collapsed() { .mixin-toc-collapsed() {
margin: 0; margin: 0;
// T316056 Remove TOC menu fixed width and apply max-width // T316056 Remove TOC menu fixed width and apply max-width
@ -68,18 +68,18 @@
max-width: ~'min( @{max-width-collapsed-toc}, 75vw )'; // 51em max-width: ~'min( @{max-width-collapsed-toc}, 75vw )'; // 51em
} }
// Applies when TOC is collapsed in it's original DOM location // TOC styles when collapsed to header
// Doesn't apply to the collapsed TOC in the sticky header .mixin-toc-collapsed-header() {
.mixin-toc-collapsed-unmoved() {
#vector-toc-collapsed-button { #vector-toc-collapsed-button {
display: block; display: block;
} }
.vector-sticky-toc-container { .vector-sticky-toc-container {
// Override TOC container's sticky positioning
position: relative; position: relative;
} }
@{sidebar-toc-selector} { .sidebar-toc {
.mixin-toc-collapsed(); .mixin-toc-collapsed();
display: none; display: none;
position: absolute; position: absolute;
@ -89,12 +89,13 @@
border: @border-width-base @border-style-base @border-color-base; border: @border-width-base @border-style-base @border-color-base;
} }
@{selector-collapsed-toc-open} ~ @{sidebar-toc-selector} { @{selector-collapsed-toc-open} ~ .mw-table-of-contents-container .sidebar-toc {
// Hide the TOC when the button is not checked // Hide the TOC when the button is not checked
display: block; display: block;
} }
} }
// TOC styles when collapsed to floating button
.mixin-toc-collapsed-floating() { .mixin-toc-collapsed-floating() {
#vector-toc-collapsed-button { #vector-toc-collapsed-button {
position: fixed; position: fixed;
@ -111,14 +112,18 @@
} }
@media ( max-width: @max-width-tablet ) { @media ( max-width: @max-width-tablet ) {
// Collapsed to page title on narrow screens //
.mixin-toc-collapsed-unmoved(); // Collapsed to header on narrow screens
//
.mixin-toc-collapsed-header();
@{sidebar-toc-selector} { .sidebar-toc {
left: -@icon-padding-md; left: -@icon-padding-md;
} }
// Collapsed to floating icon on narrow screens when below page //
// Collapsed to floating button on narrow screens when below page title
//
.vector-below-page-title { .vector-below-page-title {
.mixin-toc-collapsed-floating(); .mixin-toc-collapsed-floating();
} }
@ -127,29 +132,28 @@
@media ( min-width: @min-width-desktop ) { @media ( min-width: @min-width-desktop ) {
@supports ( display: grid ) { @supports ( display: grid ) {
.client-js { .client-js {
// Collapsed to page title .vector-toc-collapsed:not( .vector-sticky-header-visible ) {
.vector-toc-collapsed { //
.mixin-toc-collapsed-unmoved(); // Collapsed to header
//
.mixin-toc-collapsed-header();
.mw-table-of-contents-container { .mw-table-of-contents-container {
grid-area: content; grid-area: content;
} }
// Collapsed to floating icon //
// when sticky header not visible and below page title // Collapsed to floating icon when below page title
body:not( .vector-sticky-header-visible ).vector-below-page-title& { //
.vector-below-page-title& {
.mixin-toc-collapsed-floating(); .mixin-toc-collapsed-floating();
} }
.vector-toc-uncollapse-button {
display: inline-block;
}
} }
.vector-toc-not-collapsed { // Show the "move to sidebar/hide" buttons
.vector-toc-collapse-button { .vector-toc-collapsed .vector-toc-uncollapse-button,
display: inline-block; .vector-toc-not-collapsed .vector-toc-collapse-button {
} display: inline-block;
} }
} }
} }