Remove tablet specific styles for collapsed TOC, and misc CSS clean up
This patch also fixes a regression for non grid layout Vector on tablet viewports when the sidebar and collapsed TOC is open https://jmp.sh/xZhkU6q No pixel regressions Change-Id: Ic371f9b7ddd017af835565834e26a65ad3c2afc8
This commit is contained in:
bwang
Bernard Wang
parent
9ef3149c90
commit
a84549f243
|
|
@ -126,7 +126,6 @@
|
|||
@margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
|
||||
|
||||
// Sidebar
|
||||
@selector-checkbox-hack: ~'.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container';
|
||||
@width-sidebar-px: 220;
|
||||
@width-sidebar-px-wide: 244;
|
||||
@margin-toc-start-content: unit( ( @width-sidebar-px + 24 ) / @font-size-browser, em );
|
||||
|
|
|
|||
|
|
@ -6,19 +6,14 @@
|
|||
// 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.
|
||||
// Spacing when the main menu is closed, aligns sidebar TOC aligns with bottom of the page title.
|
||||
@top-margin-sidebar-toc_title_inline: 3.5em;
|
||||
// Top of sidebar TOC border normal spacing.
|
||||
// Default spacing separating the sidebar TOC from the main menu or viewport
|
||||
@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
|
||||
// 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;
|
||||
|
||||
// Hide #p-navigation label
|
||||
|
|
@ -27,6 +22,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
// FIXME: Delete this selector when .vector-toc-enabled is removed (T310527)
|
||||
body:not( .vector-toc-enabled ) .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% );
|
||||
}
|
||||
|
||||
// FIXME: Can be removed when "VectorTitleAboveTabs" is enabled and old layout is removed.
|
||||
.vector-article-toolbar + .mw-sidebar {
|
||||
margin-top: @top-margin-sidebar-content;
|
||||
|
|
@ -34,6 +38,15 @@
|
|||
|
||||
// Update styling when TOC is enabled
|
||||
.vector-toc-enabled {
|
||||
.mw-sidebar,
|
||||
.sidebar-toc {
|
||||
margin-left: 0;
|
||||
|
||||
@media ( min-width: @min-width-desktop-wide ) {
|
||||
margin-left: @margin-start-sidebar-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-sidebar {
|
||||
width: @width-sidebar;
|
||||
// Temporary magic number, will be calculated after TOC specs are finalized
|
||||
|
|
@ -46,41 +59,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
.sidebar-toc {
|
||||
margin-top: @top-margin-sidebar-toc_title_inline;
|
||||
}
|
||||
|
||||
.mw-sidebar,
|
||||
.sidebar-toc {
|
||||
margin-left: 0;
|
||||
|
||||
@media ( min-width: @min-width-desktop-wide ) {
|
||||
margin-left: @margin-start-sidebar-content;
|
||||
}
|
||||
}
|
||||
|
||||
@selector-checkbox-hack: ~'.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container';
|
||||
// T305069 Apply different top spacing to the topmost sidebar element during menu toggling when sidebar is open.
|
||||
@{selector-checkbox-hack} {
|
||||
.sidebar-toc {
|
||||
margin-top: @top-margin-sidebar-toc;
|
||||
}
|
||||
|
||||
/* FIXME: The following selector can be removed when the option to disable `VectorTitleAboveTabs` is removed. */
|
||||
@{selector-workspace-container-sidebar-open} {
|
||||
@media ( max-width: @max-width-tablet ) {
|
||||
.mw-sidebar {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sidebar-toc {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// T305069 When scrolling down, override the top margin of the sticky TOC
|
||||
// so that the top of sticky TOC remains at the top of the viewport with normal padding.
|
||||
&.vector-sticky-header-visible .sidebar-toc {
|
||||
// FIXME: Merge margin-top styles with above when .vector-toc-enabled is removed (T310527)
|
||||
.sidebar-toc {
|
||||
.vector-toc-enabled & {
|
||||
margin-top: @top-margin-sidebar-toc_title_inline;
|
||||
}
|
||||
|
||||
.vector-toc-enabled @{selector-workspace-container-sidebar-open} & {
|
||||
// Main menu is open
|
||||
margin-top: @top-margin-sidebar-toc;
|
||||
}
|
||||
|
||||
.vector-toc-enabled.vector-sticky-header-visible & {
|
||||
// Sticky header is visible
|
||||
margin-top: @top-margin-sidebar-toc;
|
||||
}
|
||||
}
|
||||
|
|
@ -147,7 +148,7 @@
|
|||
|
||||
// Use the MediaWiki checkbox hack class from checkboxHack.less. This class exists on the
|
||||
// checkbox input for the menu panel.
|
||||
#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar {
|
||||
@{selector-workspace-container-sidebar-closed} .mw-sidebar {
|
||||
// Turn off presentation so that screen readers get the same effect as visually hiding.
|
||||
// Visibility and opacity can be animated. If animation is unnecessary, use `display: none`
|
||||
// instead to avoid hidden rendering.
|
||||
|
|
|
|||
|
|
@ -77,23 +77,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @min-width-tablet ) and ( max-width: @max-width-tablet ) {
|
||||
body:not( .vector-below-page-title ) @{selector-checkbox-hack} .sidebar-toc {
|
||||
// Adjust TOC for when the main menu is open, which pushes the page title to the right
|
||||
left: 22px;
|
||||
}
|
||||
|
||||
@{selector-collapsed-toc-button-checked} {
|
||||
// Apply float styles to the TOC and main menu to ensure the absolute positioned TOC
|
||||
// can remain in the correct location even when the main menu is open
|
||||
& ~ .mw-table-of-contents-container {
|
||||
clear: none;
|
||||
float: left;
|
||||
}
|
||||
|
||||
& ~ #mw-navigation .mw-sidebar {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@
|
|||
@import '../../common/variables.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
@selector-workspace-container-sidebar-open: ~'.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container';
|
||||
@selector-workspace-container-sidebar-closed: ~'.mw-checkbox-hack-checkbox:not( :checked ) ~ .mw-workspace-container';
|
||||
@selector-sidebar-container-sidebar-closed: ~'.mw-checkbox-hack-checkbox:not( :checked ) ~ .vector-sidebar-container';
|
||||
@selector-sidebar-no-toc-sidebar-closed: ~'.mw-checkbox-hack-checkbox:not( :checked ) ~ .vector-sidebar-container-no-toc';
|
||||
@selector-workspace-container-sidebar-open: ~'#mw-sidebar-checkbox:checked ~ .mw-workspace-container';
|
||||
@selector-workspace-container-sidebar-closed: ~'#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container';
|
||||
@selector-sidebar-container-sidebar-closed: ~'#mw-sidebar-checkbox:not( :checked ) ~ .vector-sidebar-container';
|
||||
@selector-sidebar-no-toc-sidebar-closed: ~'#mw-sidebar-checkbox:not( :checked ) ~ .vector-sidebar-container-no-toc';
|
||||
|
||||
// Sidebar
|
||||
@width-grid-column-one: 11em;
|
||||
|
|
@ -198,16 +198,17 @@ body {
|
|||
.mw-table-of-contents-container {
|
||||
// stylelint-disable-next-line plugin/no-unsupported-browser-features
|
||||
position: sticky;
|
||||
float: left;
|
||||
// Defaults to -2em to account for the TOC's top margin
|
||||
// ensuring the TOC is 1.5em (24px) from the top of the viewport
|
||||
// unless .mw-sticky-header-element overrides it.
|
||||
top: ~'calc( 1.5em - @{top-margin-sidebar-toc_title_inline} )';
|
||||
|
||||
// To ensure the TOC is 1.5em (24px) from the top of the viewport when sticky
|
||||
// we account for the TOC's top margin
|
||||
top: ~'calc( 1.5em - @{top-margin-sidebar-toc_title_inline} )'; // top: -2em
|
||||
// When main menu is open the TOC's top margin is reduced
|
||||
@{selector-workspace-container-sidebar-open} & {
|
||||
top: 0;
|
||||
top: ~'calc( 1.5em - @{top-margin-sidebar-toc} )'; // top: 0
|
||||
}
|
||||
|
||||
.vector-layout-legacy & {
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
|
@ -312,17 +313,18 @@ body {
|
|||
padding-bottom: 82px;
|
||||
}
|
||||
|
||||
// FIXME: Delete when .vector-toc-enabled is removed (T310527)
|
||||
// We want it to appear like the sidebar is going into/coming out of
|
||||
// `.mw-page-container`, but we can't use `overflow: hidden` on
|
||||
// `.mw-page-container` because that will cut off the sidebar. Therefore, we
|
||||
// calculate the maximum distance from the start of `mw-page-container` to the
|
||||
// start of the sidebar.
|
||||
#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar {
|
||||
@{selector-workspace-container-sidebar-closed} .mw-sidebar {
|
||||
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 {
|
||||
.vector-toc-enabled @{selector-workspace-container-sidebar-closed} .mw-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -414,8 +416,6 @@ body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment
|
|||
@{selector-workspace-container-sidebar-open} {
|
||||
#mw-panel {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// !important as we always want to disable the margin-left on these elements
|
||||
|
|
|
|||
Loading…
Reference in New Issue