Merge "Render sidebar menu above TOC"
This commit is contained in:
jenkins-bot
Gerrit Code Review
commit
9205554552
|
|
@ -112,6 +112,11 @@
|
|||
// Menu button
|
||||
@margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
|
||||
|
||||
// Sidebar
|
||||
@margin-toc-start-content: 16em;
|
||||
@space-end-sidebar: 2em;
|
||||
@width-sidebar: @margin-toc-start-content - @space-end-sidebar;
|
||||
|
||||
// Search
|
||||
@min-width-search-button: 28px;
|
||||
@width-search-button: unit( 28 / @font-size-browser / @font-size-search-input, em );
|
||||
|
|
|
|||
|
|
@ -4,6 +4,25 @@
|
|||
@import '../../skins.vector.styles.legacy/components/Sidebar.less';
|
||||
@import './checkboxHack.less';
|
||||
|
||||
.mw-sidebar {
|
||||
width: @width-grid-column-one;
|
||||
// To avoid the white part of the gradient colliding with the sidebar links
|
||||
// we apply top and bottom padding.
|
||||
padding: 8px 0 40px @padding-left-sidebar;
|
||||
background-image: linear-gradient( to bottom, @background-color-base 0%, @background-color-secondary--modern 10%, @background-color-secondary--modern 90%, @background-color-base 100% );
|
||||
.box-sizing( border-box );
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
.mw-sidebar-action {
|
||||
// Align with the portal heading/links
|
||||
// `.portal` + `.portal .body`
|
||||
|
|
@ -75,6 +94,13 @@
|
|||
.transform( translateX( -100% ) );
|
||||
}
|
||||
|
||||
@media ( min-width: ( @max-width-workspace-container + ( 2 * @padding-horizontal-page-container ) ) ) {
|
||||
.mw-sidebar {
|
||||
background: @background-color-page-container;
|
||||
border-right: 1px solid @border-color-sidebar;
|
||||
}
|
||||
}
|
||||
|
||||
// Disable transitions on page load. No-JS users will unfortunately miss out. A similar pattern is
|
||||
// used in Minerva's DropDownList. See enableCssAnimations() in skin.vector.js/index.js for context
|
||||
// and additional details on how this class is added.
|
||||
|
|
@ -100,10 +126,3 @@
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Update article page's content container when table of contents is enabled
|
||||
.vector-toc-enabled #mw-panel {
|
||||
width: @margin-toc-start-content;
|
||||
background-color: @background-color-base;
|
||||
background-image: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
@subcategory-indent: 8px;
|
||||
|
||||
.sidebar-toc {
|
||||
width: 200px;
|
||||
width: @width-sidebar;
|
||||
max-height: 90vh;
|
||||
padding: 20px 12px 20px 26px;
|
||||
.box-sizing( border-box );
|
||||
overflow: auto;
|
||||
padding: 12px 12px 12px 26px;
|
||||
background-color: @background-color-base;
|
||||
background-color: @border-color-sidebar;
|
||||
border: @border-base;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
.sidebar-toc-header {
|
||||
padding-bottom: 12px;
|
||||
|
|
@ -65,11 +65,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Hide TOC when sidebar is open
|
||||
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .sidebar-toc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Highlight active section
|
||||
.sidebar-toc .sidebar-toc-list-item-active > .sidebar-toc-link {
|
||||
font-weight: bold;
|
||||
|
|
|
|||
|
|
@ -36,8 +36,6 @@
|
|||
// content container for aesthetic reasons. The sidebar is already displaced
|
||||
// -30px so we simply add 30px of space to the width of the sidebar.
|
||||
@margin-start-content: @width-grid-column-one + unit( 8px / @font-size-browser, em ); // 11.5em @ 16
|
||||
// Ensure there's enough space between the TOC and content container
|
||||
@margin-toc-start-content: 16em;
|
||||
|
||||
// Tabs
|
||||
|
||||
|
|
@ -152,19 +150,30 @@ body {
|
|||
}
|
||||
|
||||
#mw-panel {
|
||||
background-image: linear-gradient( to bottom, @background-color-base 0%, @background-color-secondary--modern 10%, @background-color-secondary--modern 90%, @background-color-base 100% );
|
||||
position: absolute;
|
||||
top: 0;
|
||||
// Sidebar is displaced from the workspace container so that the
|
||||
// sidebar is flush with the edge of the screen at small widths.
|
||||
left: -@padding-horizontal-page-container;
|
||||
width: @width-grid-column-one;
|
||||
.box-sizing( border-box );
|
||||
// To avoid the white part of the gradient colliding with the sidebar links
|
||||
// we apply top and bottom padding.
|
||||
padding: 8px 0 40px @padding-left-sidebar;
|
||||
z-index: @z-index-sidebar;
|
||||
}
|
||||
|
||||
// Update positioning when TOC is enabled
|
||||
.vector-toc-enabled #mw-panel {
|
||||
position: static;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.mw-table-of-contents-container {
|
||||
position: sticky;
|
||||
float: left;
|
||||
clear: both;
|
||||
// Defaults to the top of the viewport unless .mw-sticky-header-element
|
||||
// overrides it.
|
||||
top: 0;
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
|
||||
.parsoid-body {
|
||||
padding: @padding-content;
|
||||
}
|
||||
|
|
@ -240,22 +249,6 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.mw-sidebar-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.mw-table-of-contents-container {
|
||||
float: left;
|
||||
position: sticky;
|
||||
// Defaults to the top of the viewport unless .mw-sticky-header-element
|
||||
// overrides it.
|
||||
top: 0;
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
|
||||
.mw-footer-container {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 82px;
|
||||
|
|
@ -270,6 +263,11 @@ body {
|
|||
.transform( translateX( -( @max-width-page-container - @max-width-workspace-container ) / 2 ) );
|
||||
}
|
||||
|
||||
// Hide sidebar entirely when the checkbox is disabled and the TOC is enabled
|
||||
.vector-toc-enabled #mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Responsive overrides.
|
||||
@media ( min-width: @min-width-page-container--padded ) {
|
||||
.mw-page-container {
|
||||
|
|
@ -319,8 +317,7 @@ body {
|
|||
.vector-toc-visible .mw-workspace-container .mw-article-toolbar-container,
|
||||
.vector-toc-enabled .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
|
||||
.vector-toc-enabled .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container {
|
||||
// Use !important to override checkbox status dependent styles applied above
|
||||
margin-left: @margin-toc-start-content !important; /* stylelint-disable-line declaration-no-important */
|
||||
margin-left: @margin-toc-start-content;
|
||||
}
|
||||
|
||||
// Prevent center align when TOC is visible
|
||||
|
|
@ -328,13 +325,6 @@ body {
|
|||
margin-left: initial;
|
||||
}
|
||||
|
||||
@media ( min-width: ( @max-width-workspace-container + ( 2 * @padding-horizontal-page-container ) ) ) {
|
||||
#mw-panel {
|
||||
background: @background-color-page-container;
|
||||
border-right: 1px solid @border-color-sidebar;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
.mw-page-container {
|
||||
padding-left: @padding-horizontal-page-container;
|
||||
|
|
@ -351,6 +341,7 @@ body {
|
|||
width: 100%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
float: none;
|
||||
}
|
||||
|
||||
// !important as we always want to disable the margin-left on these elements
|
||||
|
|
|
|||
Loading…
Reference in New Issue