golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Merge "Max-Width Layout: Make footer width match content width to avoid overlap with sidebar"

This commit is contained in:
jenkins-bot 2020-07-14 01:27:27 +00:00 committed by Gerrit Code Review
parent 7a16ae249e d5cb58b3f0
commit b540dadfb3
2 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
includes/templates/skin.mustache
View File

@ -113,7 +113,9 @@
</div>
<div class="mw-workspace-container mw-footer-container">
{{#data-footer}}{{>Footer}}{{/data-footer}}
<div class="mw-content-container">
{{#data-footer}}{{>Footer}}{{/data-footer}}
</div>
</div>
</div> {{! END mw-page-container-inner }}
</div> {{! END mw-page-container }}

21
resources/skins.vector.styles/layout-max-width.less
View File

@ -99,7 +99,8 @@
}
.mw-footer {
padding: 0;
border-top: @border-base;
padding: 32px 0 0 0;
}
// Container logic.
@ -109,7 +110,6 @@
margin-left: auto;
margin-right: auto;
padding: 0 @padding-horizontal-page-container;
overflow: hidden;
background-color: @background-color-page-container;
}
@ -144,10 +144,8 @@
}
.mw-footer-container {
margin-top: 50px;
margin-bottom: 50px;
padding: 32px 0;
border-top: @border-base;
padding-top: 50px;
padding-bottom: 82px;
}
// For container logic specific to special pages and history pages.
@ -173,6 +171,15 @@
}
}
// 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-header .mw-sidebar {
.transform( translateX( -( @max-width-page-container - @max-width-workspace-container ) / 2 ) );
}
// Responsive overrides.
@media ( min-width: @min-width-page-container--padded ) {
@border-color: @border-color-sidebar;
@ -198,7 +205,7 @@
@media ( min-width: ( @max-width-workspace-container + ( 2 * @padding-horizontal-page-container ) ) ) {
#mw-panel {
background: none;
background: @background-color-page-container;
border-right: 1px solid @border-color-sidebar;
}
}