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

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
parent ed0fd37d03 5beadc4bc2
commit a34b564192
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}} {{>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}} {{#data-toc}}
<input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox"> <input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox">
{{/data-toc}} {{/data-toc}}

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

@ -2,6 +2,14 @@
// Grid layout // 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 { .vector-layout-grid {
@media ( max-width: @width-breakpoint-tablet ) { @media ( max-width: @width-breakpoint-tablet ) {
.mw-header { .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 ) { @media ( max-width: @width-breakpoint-desktop ) {
@{selector-workspace-container-sidebar-closed} { @{selector-sidebar-container-sidebar-closed} {
.mw-navigation { display: none;
display: none;
}
& + .mw-content-container { & + .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-open: ~'.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container';
@selector-workspace-container-sidebar-closed: ~'.mw-checkbox-hack-checkbox:not( :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 // Sidebar
@width-grid-column-one: 11em; @width-grid-column-one: 11em;