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

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

Browse source 
Bug: T316056
Change-Id: I4c803bfd820aeb7270afa65cf8412415b437ff42
This commit is contained in:
bwang 2022-09-09 11:56:44 -05:00
parent c6bf88520e
commit 88d4aef088
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-wide: 244px;
// TOC
@sidebar-toc-selector: ~'.mw-table-of-contents-container .sidebar-toc';
// Search
@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em T270202
@min-width-search-button: 28px;

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

@ -12,7 +12,6 @@
right: 0;
z-index: @z-index-header;
transition: @transition-sticky-header;
display: none;
align-items: center;
margin: 0 auto;
background: @background-color-base;
@ -28,24 +27,10 @@
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
.client-js.vector-sticky-header-enabled :not( .vector-sticky-header-visible ) & {
transform: translateY( -100% );
> 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;
}
// Hide sticky header until visible class is applied to the body
display: none;
transform: translateY( -100% );
opacity: 0;
//
// Layout
@ -81,15 +66,15 @@
min-width: 0;
}
// Hide TOC in sticky header by default
&-toc-container {
display: none;
}
.vector-toc-collapsed &-toc-container {
display: block;
position: relative;
margin-left: -@icon-padding-md;
// Only show TOC in sticky header when collapsed class is present
.vector-toc-collapsed & {
display: block;
}
}
&-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 {
// 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
@ -159,21 +145,29 @@
// 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).
scroll-padding-top: @height-sticky-header;
}
}
// T298836 Sticky header is only shown at higher resolutions
@media ( min-width: @min-width-desktop ) {
.client-js .vector-sticky-header-visible {
// 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;
.vector-sticky-header {
// Sticky header is only enabled for js users and when feature flag is enabled
display: flex;
}
.vector-sticky-header-visible {
.vector-sticky-header {
// Show sticky header with transition when visible class is applied to the body
opacity: 1;
transform: translateY( 0 );
}
// 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-uncollapse-button {
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() {
margin: 0;
// T316056 Remove TOC menu fixed width and apply max-width
@ -68,18 +68,18 @@
max-width: ~'min( @{max-width-collapsed-toc}, 75vw )'; // 51em
}
// Applies when TOC is collapsed in it's original DOM location
// Doesn't apply to the collapsed TOC in the sticky header
.mixin-toc-collapsed-unmoved() {
// TOC styles when collapsed to header
.mixin-toc-collapsed-header() {
#vector-toc-collapsed-button {
display: block;
}
.vector-sticky-toc-container {
// Override TOC container's sticky positioning
position: relative;
}
@{sidebar-toc-selector} {
.sidebar-toc {
.mixin-toc-collapsed();
display: none;
position: absolute;
@ -89,12 +89,13 @@
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
display: block;
}
}
// TOC styles when collapsed to floating button
.mixin-toc-collapsed-floating() {
#vector-toc-collapsed-button {
position: fixed;
@ -111,14 +112,18 @@
}
@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;
}
// 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 {
.mixin-toc-collapsed-floating();
}
@ -127,29 +132,28 @@
@media ( min-width: @min-width-desktop ) {
@supports ( display: grid ) {
.client-js {
// Collapsed to page title
.vector-toc-collapsed {
.mixin-toc-collapsed-unmoved();
.vector-toc-collapsed:not( .vector-sticky-header-visible ) {
//
// Collapsed to header
//
.mixin-toc-collapsed-header();
.mw-table-of-contents-container {
grid-area: content;
}
// Collapsed to floating icon
// when sticky header not visible and below page title
body:not( .vector-sticky-header-visible ).vector-below-page-title& {
//
// Collapsed to floating icon when below page title
//
.vector-below-page-title& {
.mixin-toc-collapsed-floating();
}
.vector-toc-uncollapse-button {
display: inline-block;
}
}
.vector-toc-not-collapsed {
.vector-toc-collapse-button {
display: inline-block;
}
// Show the "move to sidebar/hide" buttons
.vector-toc-collapsed .vector-toc-uncollapse-button,
.vector-toc-not-collapsed .vector-toc-collapse-button {
display: inline-block;
}
}
}