Layout + visual style changes for sticky TOC
- Layout updates per design review. - Visual updates per design review. Bug: T304166 Bug: T305069 Change-Id: I2f95d5938674bb8263b6203c5f6a469762bf0cc2
This commit is contained in:
Clare Ming
parent
66ee043a6e
commit
f12659fff6
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue