diff --git a/resources/common/variables.less b/resources/common/variables.less index f665f217..05644554 100644 --- a/resources/common/variables.less +++ b/resources/common/variables.less @@ -113,8 +113,8 @@ @margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em ); // 0.75em @ 16 // Sidebar -@margin-toc-start-content: 16em; -@space-end-sidebar: 2em; +@margin-toc-start-content: 18.5em; +@space-end-sidebar: 3.25em; @width-sidebar: @margin-toc-start-content - @space-end-sidebar; // Search @@ -171,5 +171,5 @@ // // Layout // -@max-width-page-container: unit( 1650px / @font-size-browser, em ); // 103.125em @ 16 -@padding-horizontal-page-container: unit( 30px / @font-size-browser, em ); // 1.875em @ 16 +@max-width-page-container: unit( 1514px / @font-size-browser, em ); // 99.75em @ 16 +@padding-horizontal-page-container: unit( 40px / @font-size-browser, em ); // 1.875em @ 16 diff --git a/resources/skins.vector.es6/scrollObserver.js b/resources/skins.vector.es6/scrollObserver.js index bd17267e..c3159c80 100644 --- a/resources/skins.vector.es6/scrollObserver.js +++ b/resources/skins.vector.es6/scrollObserver.js @@ -6,7 +6,9 @@ const SCROLL_TOC_HOOK = 'vector.table_of_contents_scroll', SCROLL_TOC_CONTEXT_ABOVE = 'scrolled-above-table-of-contents', SCROLL_TOC_CONTEXT_BELOW = 'scrolled-below-table-of-contents', - SCROLL_TOC_ACTION = 'scroll-to-toc'; + SCROLL_TOC_ACTION = 'scroll-to-toc', + SCROLL_TOC_PARAMETER = 'table_of_contents', + SCROLL_TOC_BELOW_CLASS = 'vector-scrolled-below-table-of-contents'; /** * @typedef {Object} scrollVariables @@ -29,7 +31,7 @@ function getScrollVariables( hook ) { scrollVariables.scrollContextBelow = SCROLL_TITLE_CONTEXT_BELOW; scrollVariables.scrollContextAbove = SCROLL_TITLE_CONTEXT_ABOVE; scrollVariables.scrollAction = SCROLL_TITLE_ACTION; - } else if ( hook === 'table_of_contents' ) { + } else if ( hook === SCROLL_TOC_PARAMETER ) { scrollVariables.scrollHook = SCROLL_TOC_HOOK; scrollVariables.scrollContextBelow = SCROLL_TOC_CONTEXT_BELOW; scrollVariables.scrollContextAbove = SCROLL_TOC_CONTEXT_ABOVE; @@ -53,11 +55,19 @@ function fireScrollHook( direction, hook ) { mw.hook( scrollVariables.scrollHook ).fire( { context: scrollVariables.scrollContextBelow } ); + // Piggy back on this function to apply needed class for shifting TOC. + if ( hook === SCROLL_TOC_PARAMETER ) { + document.body.classList.add( SCROLL_TOC_BELOW_CLASS ); + } } else { mw.hook( scrollVariables.scrollHook ).fire( { context: scrollVariables.scrollContextAbove, action: scrollVariables.scrollAction } ); + // Piggy back on this function to apply needed class for shifting TOC. + if ( hook === SCROLL_TOC_PARAMETER ) { + document.body.classList.remove( SCROLL_TOC_BELOW_CLASS ); + } } } diff --git a/resources/skins.vector.styles/components/Header.less b/resources/skins.vector.styles/components/Header.less index db446461..298be120 100644 --- a/resources/skins.vector.styles/components/Header.less +++ b/resources/skins.vector.styles/components/Header.less @@ -3,8 +3,8 @@ // Header sizes defined in the description of T246170 and comment T246170#5957100 @padding-vertical-header: 0.125em; -@margin-top-header: 0.625em; -@margin-bottom-header: 0.3125em; +@margin-top-header: 0.5em; +@margin-bottom-header: 2em; // Logo sizes per specification in T245190. @height-logo-icon: 3.125em; @@ -18,7 +18,7 @@ // A min-height is set to account for projects where no icon is set. min-height: @height-logo-icon; margin: @margin-top-header 0 @margin-bottom-header 0; - padding: @padding-vertical-header 0; + padding: 0; // Vertical centering of header elements (IE>=11), requires flex. // Non-flex fallback for IE<=9: float rule on the child elements. .flex-display(); @@ -38,10 +38,7 @@ } @media ( min-width: @width-breakpoint-desktop ) { - @margin-start-search: 40px; - .vector-search-box { - margin-left: unit( @margin-start-search / @font-size-browser / @font-size-base, em ); // 2.85714286em @ 16 & 0.875em margin-right: @margin-end-search; // Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-. @@ -57,8 +54,6 @@ } &.vector-search-box-auto-expand-width { - margin-left: unit( ( @margin-start-search - @size-search-expand ) / @font-size-browser / @font-size-base, em ); // 1.14285714em @ 16 & 0.875em - > div { max-width: @max-width-search + unit( @size-search-expand / @font-size-browser / @font-size-base, em ); // 37.42857143em @ 16 & 0.875em } diff --git a/resources/skins.vector.styles/components/Logo.less b/resources/skins.vector.styles/components/Logo.less index 1eb39166..ce108e6a 100644 --- a/resources/skins.vector.styles/components/Logo.less +++ b/resources/skins.vector.styles/components/Logo.less @@ -8,6 +8,10 @@ height: 100%; // Center vertically. align-items: center; + // Hamburger menu icon with padding (22px + 12px = 46px) + right margin (12px) + logo (226px @ 16) + space between + // logo and searchbox (24px) = 296px which equals the sum of widths of sidebar elements (i.e. TOC) when toggled. + // 226px @ 16 provides correct spacing between the right edge of logo container + left edge of searchbox input. + min-width: 14.125em; // 226px @ 16 } .mw-logo-icon { diff --git a/resources/skins.vector.styles/components/Sidebar.less b/resources/skins.vector.styles/components/Sidebar.less index b7cbb911..54a3fd03 100644 --- a/resources/skins.vector.styles/components/Sidebar.less +++ b/resources/skins.vector.styles/components/Sidebar.less @@ -4,6 +4,16 @@ @import '../../skins.vector.styles.legacy/components/Sidebar.less'; @import './checkboxHack.less'; +// T305069 Layout adjustments of sidebar elements: +// Vertically align the left edge of sidebar elements with the visible edge of the sidebar toggle hamburger menu. +@margin-start-sidebar-content: unit( 12px / @font-size-browser, em ); // 0.75em @ 16 +// Top of sidebar TOC border horizontally aligns with page title underline rule. +@top-margin-sidebar-toc_title_inline: 3.5em; +// Top of sidebar TOC border normal spacing. +@top-margin-sidebar-toc: 1.5em; +// Top of sidebar main menu border horizontally aligns with top of tool tabs above page title. +@top-margin-sidebar-content: -2.5em; + .mw-sidebar { width: @width-grid-column-one; // To avoid the white part of the gradient colliding with the sidebar links @@ -14,13 +24,46 @@ } // Update styling when TOC is enabled -.vector-toc-enabled .mw-sidebar { - width: @width-sidebar; - // Temporary magic number, will be calculated after TOC specs are finalized - padding: 12px 19px 12px 9px; - background-image: none; - background-color: @border-color-sidebar; - border: @border-base; +.vector-toc-enabled { + .mw-sidebar { + width: @width-sidebar; + // Temporary magic number, will be calculated after TOC specs are finalized + padding: 12px 19px 12px 9px; + margin-top: @top-margin-sidebar-content; + margin-left: @margin-start-sidebar-content; + background-image: none; + background-color: @border-color-sidebar; + } + + .sidebar-toc { + margin-top: @top-margin-sidebar-toc_title_inline; + margin-left: @margin-start-sidebar-content; + } + + // T305069 Apply different top spacing to the topmost sidebar element during menu toggling when sidebar is open. + .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container { + .sidebar-toc { + margin-top: @top-margin-sidebar-toc; + } + + @media ( max-width: @width-breakpoint-tablet ) { + .mw-sidebar { + margin-top: 0; + margin-left: 0; + } + + .sidebar-toc { + display: none; + margin-top: 0; + } + } + } + + // T305069 When scrolling down, override the top padding of the sticky TOC that is applied during menu toggling + // so that the top of sticky TOC remains at the top of the viewport with normal padding. See scrollObserver.js. + &.vector-scrolled-below-table-of-contents .sidebar-toc { + margin-top: @top-margin-sidebar-toc; + } } .mw-sidebar-action { diff --git a/resources/skins.vector.styles/components/TableOfContents.less b/resources/skins.vector.styles/components/TableOfContents.less index 775ee3c3..710118b5 100644 --- a/resources/skins.vector.styles/components/TableOfContents.less +++ b/resources/skins.vector.styles/components/TableOfContents.less @@ -1,18 +1,18 @@ @import '../../common/variables.less'; -@subcategory-indent: 8px; +@subcategory-padding: 8px; @fade-height: 40px; -@vertical-padding: 25px; +@vertical-padding: 20px; +@toggle-icon-size: 1.834em; .sidebar-toc { display: none; width: @width-sidebar; max-height: 75vh; - padding: @vertical-padding 12px 0 26px; + padding: @vertical-padding @subcategory-padding @vertical-padding ~'calc( @{subcategory-padding} * 4 )'; .box-sizing( border-box ); overflow: auto; background-color: @border-color-sidebar; - border: @border-base; .sidebar-toc-header { padding-bottom: 12px; @@ -20,7 +20,7 @@ .sidebar-toc-title { font-weight: bold; - font-size: @font-size-heading-3; + font-size: @font-size-reset; margin: 0; padding: 0; border: 0; @@ -37,7 +37,7 @@ } .sidebar-toc-text { - padding-bottom: 5px; + padding: ~'calc( @{subcategory-padding} / 2 )' 0; } .sidebar-toc-contents, @@ -48,14 +48,14 @@ } .sidebar-toc-contents { - padding-bottom: @vertical-padding; + padding-bottom: ~'calc( @{vertical-padding} / 2 )'; } .sidebar-toc-list-item { display: block; position: relative; list-style-type: none; - padding-left: @subcategory-indent; + padding-left: @subcategory-padding; a { color: @color-base; @@ -82,7 +82,7 @@ content: ''; display: block; position: absolute; - bottom: @border-width-base; + bottom: 0; left: 0; right: 0; height: @fade-height; @@ -115,11 +115,14 @@ .sidebar-toc-toggle { position: absolute; + top: 1px; // visually center icon + left: ~'calc( -1 * @{toggle-icon-size} - 1px )'; // leaves 6px between icon + text display: block; - font-size: 0.7em; // reduces size of toggle icon (by an arbitrary amount) - top: 4px; // visually center icon (at least at default font size) - left: -18px; + width: @toggle-icon-size; // ~22px @ 12 + height: @toggle-icon-size; + font-size: 0.75em; // reduces size of toggle icon to 12px @ 16 transform: rotate( -90deg ); + transition: 100ms; } .sidebar-toc-level-1.sidebar-toc-list-item-expanded .sidebar-toc-toggle { diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less index afd35bbe..f023a613 100644 --- a/resources/skins.vector.styles/layouts/screen.less +++ b/resources/skins.vector.styles/layouts/screen.less @@ -26,7 +26,7 @@ // Content containers -@max-width-workspace-container: unit( 1440px / @font-size-browser, em ); // 90em @ 16 +@max-width-workspace-container: unit( 1514px / @font-size-browser, em ); // 99.75em @ 16 @max-width-content-container: unit( 960px / @font-size-browser, em ); // 60em @ 16 // Note this uses variables defined in mediawiki.skin.variables so that VisualEditor can read them @@ -170,7 +170,6 @@ body { // Defaults to the top of the viewport unless .mw-sticky-header-element // overrides it. top: 0; - padding-top: 1.5em; } .parsoid-body {