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

Layout: Don't hide footer < 1000px when sidebar closed 

The 'mw-workspace-container' class is present on both
the footer and the sidebar. The CSS rule should only hide
the latter.

When there is no table of contents on the page, and the sidebar
is closed, the content
should always span the grid columns and the sidebar container
closed.

Bug: T293443
Change-Id: I852b9024fbd21339b7c78dbb4deba811ab17c7e7
This commit is contained in:
Jon Robson 2022-06-13 14:07:36 -07:00 committed by Jdlrobson
parent 61e723c541
commit 5beadc4bc2
3 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
includes/templates/skin.mustache
View File

@ -43,7 +43,7 @@
{{>Header}}
<div class="mw-workspace-container vector-sidebar-container">
<div class="mw-workspace-container vector-sidebar-container {{^data-toc}}vector-sidebar-container-no-toc{{/data-toc}}">
{{#data-toc}}
<input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox">
{{/data-toc}}

30
resources/skins.vector.styles/layouts/grid.less
View File

@ -2,6 +2,14 @@
// Grid layout
//
.mixin-column-full-width() {
grid-column: sidebar / content;
margin-left: auto;
margin-right: auto;
// Needed for minimal content e.g. one word articles.
width: 100%;
}
.vector-layout-grid {
@media ( max-width: @width-breakpoint-tablet ) {
.mw-header {
@ -50,16 +58,26 @@
}
}
/* Special handling for sidebar when table of contents is visible */
/**
* Special handling for sidebar when table of contents is visible.
* Cover the cases where:
* 1) the main menu is closed, there is no TOC in the sidebar
* 2) the main menu is closed, the sidebar TOC is hidden at the breakpoint.
* In these situation content should span the entire page.
*/
@media ( max-width: @width-breakpoint-desktop ) {
@{selector-workspace-container-sidebar-closed} {
.mw-navigation {
display: none;
}
@{selector-sidebar-container-sidebar-closed} {
display: none;
& + .mw-content-container {
grid-column: sidebar / content;
.mixin-column-full-width();
}
}
}
@{selector-sidebar-no-toc-sidebar-closed} {
& + .mw-content-container {
.mixin-column-full-width();
}
}
}

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

@ -10,6 +10,8 @@
@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';
// Sidebar
@width-grid-column-one: 11em;