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

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

* `mw-content-container` now wraps the footer (as well as the content)
because we want the footer to match the content width at all times and
to expand with the content when the sidebar is closed (at small viewport
widths or when on history/special pages)

* `mw-footer-container` margins were replaced with padding to avoid
issues with margin collapsing.

* Applied a white background to sidebar to handle the case of the
sidebar overflowing the `mw-page-container`. When that happens, we at
least want the text in the sidebar to be legible.

* Closely related, `mw-page-container`'s `overflow: hidden` style was
removed to prevent `mw-page-container` from cutting off the sidebar. The
purpose of this style was make it appear as if the sidebar was being
hidden by `mw-page-container`, but tweaking the sidebar's translation
animation to achieves this effect as well.

Bug: T257518
Change-Id: I89edf89b2ac4abe2053f0c9b366f143133ff420f
This commit is contained in:
Nicholas Ray 2020-07-13 13:12:53 -06:00
parent c4cc51d744
commit d5cb58b3f0
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

@ -123,7 +123,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;
}
}