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

This commit is contained in:
jenkins-bot 2022-06-27 15:26:21 +00:00 committed by Gerrit Code Review
commit a34b564192
3 changed files with 27 additions and 7 deletions

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}}

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();
}
}
}

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;