jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjust table of contents margins at 1000-1200 breakpoint 

Bug: T307004
Change-Id: Ibb7be459305eaee57503d4efd67e19cd0f00046b
This commit is contained in:
Jon Robson 2022-04-28 11:21:52 -07:00 committed by Jdlrobson
parent ff3d879ee2
commit 9c26833af6
5 changed files with 53 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
resources/common/variables.less
View File

@ -113,9 +113,12 @@
@margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
// Sidebar
@margin-toc-start-content: 18.5em;
@space-end-sidebar: 3.25em;
@width-sidebar: @margin-toc-start-content - @space-end-sidebar;
@width-sidebar-px: 220;
@width-sidebar-px-wide: 244;
@margin-toc-start-content: unit( ( @width-sidebar-px + 24 ) / @font-size-browser, em );
@margin-toc-start-content-wide: unit( ( @width-sidebar-px-wide + 52 ) / @font-size-browser, em ); // 18.5em;
@width-sidebar: unit( @width-sidebar-px / @font-size-browser, em );
@width-sidebar-wide: unit( @width-sidebar-px-wide / @font-size-browser, em );
// Search
@min-width-search-button: 28px;
@ -172,4 +175,5 @@
// Layout
//
@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
@padding-horizontal-page-container: unit( 32px / @font-size-browser, em );
@padding-horizontal-page-container-wide: unit( 40px / @font-size-browser, em );

15
resources/skins.vector.styles/components/Sidebar.less
View File

@ -30,15 +30,26 @@
// 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;
@media ( min-width: @width-breakpoint-desktop-wide ) {
width: @width-sidebar-wide;
}
}
.sidebar-toc {
position: relative;
margin-top: @top-margin-sidebar-toc_title_inline;
margin-left: @margin-start-sidebar-content;
}
.mw-sidebar,
.sidebar-toc {
margin-left: 0;
@media ( min-width: @width-breakpoint-desktop-wide ) {
margin-left: @margin-start-sidebar-content;
}
}
// T305069 Apply different top spacing to the topmost sidebar element during menu toggling when sidebar is open.

7
resources/skins.vector.styles/components/StickyHeader.less
View File

@ -13,7 +13,6 @@
transition: @transition-sticky-header;
display: flex;
align-items: center;
max-width: @max-width-page-container + @padding-horizontal-page-container + @padding-horizontal-page-container;
margin: 0 auto;
background: @background-color-base;
background-color: #fffffff7;
@ -25,6 +24,12 @@
@media ( min-width: @width-breakpoint-desktop ) {
padding: 6px 25px;
max-width: @max-width-page-container + ( @padding-horizontal-page-container * 2 );
}
@media ( min-width: @width-breakpoint-desktop-wide ) {
padding: 6px 25px;
max-width: @max-width-page-container + ( @padding-horizontal-page-container-wide * 2 );
}
// T298836 Hide the sticky header at lower resolutions.

12
resources/skins.vector.styles/components/TableOfContents.less
View File

@ -1,6 +1,5 @@
@import '../../common/variables.less';
@subcategory-padding: 8px;
@fade-height: 40px;
@vertical-padding: 20px;
@toggle-icon-size: 1.834em;
@ -9,11 +8,16 @@
display: none;
width: @width-sidebar;
max-height: 75vh;
padding: @vertical-padding @subcategory-padding @vertical-padding ~'calc( @{subcategory-padding} * 4 )';
padding: @vertical-padding 12px @vertical-padding 32px;
.box-sizing( border-box );
overflow: auto;
background-color: @border-color-sidebar;
@media ( min-width: @width-breakpoint-desktop-wide ) {
width: @width-sidebar-wide;
padding-right: 8px;
}
.sidebar-toc-header {
padding-bottom: 12px;
}
@ -45,7 +49,7 @@
}
.sidebar-toc-text {
padding: ~'calc( @{subcategory-padding} / 2 )' 0;
padding: 4px 0;
}
.sidebar-toc-contents,
@ -63,7 +67,7 @@
display: block;
position: relative;
list-style-type: none;
padding-left: @subcategory-padding;
padding-left: 8px;
a {
font-size: @font-size-base;

31
resources/skins.vector.styles/layouts/screen.less
View File

@ -57,7 +57,7 @@
// smaller and will start horizontal scrolling instead.
@min-width-supported:
unit( 500px / @font-size-browser, em ) -
( 2 * @padding-horizontal-page-container );
( 2 * @padding-horizontal-page-container-wide );
// 31.25em - 3.75em = 27.5em @ 16
@border-color-sidebar: @background-color-secondary--modern;
@background-color-secondary--modern: #f8f9fa;
@ -155,6 +155,10 @@ body {
// sidebar is flush with the edge of the screen at small widths.
left: -@padding-horizontal-page-container;
z-index: @z-index-sidebar;
@media ( min-width: @width-breakpoint-desktop-wide ) {
left: -@padding-horizontal-page-container-wide;
}
}
// Update positioning when TOC is enabled
@ -207,6 +211,16 @@ body {
// For devices too small, they should be more useable with horizontal scrolling.
// e.g. Portrait on an iPad
min-width: @min-width-supported;
@media ( min-width: @width-breakpoint-desktop ) {
padding-left: @padding-horizontal-page-container;
padding-right: @padding-horizontal-page-container;
}
@media ( min-width: @width-breakpoint-desktop-wide ) {
padding-left: @padding-horizontal-page-container-wide;
padding-right: @padding-horizontal-page-container-wide;
}
}
.skin--responsive .mw-page-container {
@ -287,13 +301,6 @@ body {
}
}
// Increase margin when TOC is enabled
.vector-toc-enabled .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container {
.skin-vector-disable-max-width & {
margin-left: @margin-toc-start-content;
}
}
@media ( max-width: @max-width-margin-start-content ) {
// Adjusts the content and mw-article-toolbar-container.
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
@ -327,6 +334,7 @@ body {
// HTML but only one is actually visible. Prevent the left margin from undesirably
// applying if bucketed into the control or unsampled groups which won't show
// the new TOC.
.skin-vector-disable-max-width .vector-toc-enabled .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment-unsampled ) .vector-toc-visible .mw-workspace-container .mw-content-container,
body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment-unsampled ) .vector-toc-visible .mw-workspace-container .mw-article-toolbar-container,
.vector-toc-enabled .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
@ -334,12 +342,9 @@ body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment
@media ( min-width: @width-breakpoint-desktop ) {
margin-left: @margin-toc-start-content;
}
}
@media ( min-width: @width-breakpoint-desktop ) {
.mw-page-container {
padding-left: @padding-horizontal-page-container;
padding-right: @padding-horizontal-page-container;
@media ( min-width: @width-breakpoint-desktop-wide ) {
margin-left: @margin-toc-start-content-wide;
}
}