Follow up: Remove .vector-layout-grid, .mw-workspace-container classes
Bug: T313559 Change-Id: If93860d13fb3161c0b66f7ea9e3e1831b0a2fc1e
This commit is contained in:
bwang
parent
5204763967
commit
8eff2d0501
|
|
@ -30,7 +30,7 @@
|
|||
object data-portlets-sidebar. See Sidebar.mustache for documentation.
|
||||
object data-footer for footer template partial. see Footer.mustache for documentation.
|
||||
}}
|
||||
<div class="mw-page-container vector-layout-grid">
|
||||
<div class="mw-page-container">
|
||||
<span id="top-page"></span>
|
||||
<a class="mw-jump-link" href="#content">{{msg-vector-jumptocontent}}</a>
|
||||
<div class="mw-page-container-inner">
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
class="mw-checkbox-hack-checkbox"
|
||||
{{#sidebar-visible}}checked{{/sidebar-visible}}>
|
||||
{{>Header}}
|
||||
<div class="mw-workspace-container vector-sidebar-container {{^data-toc}}vector-sidebar-container-no-toc{{/data-toc}}">
|
||||
<div class="vector-sidebar-container {{^data-toc}}vector-sidebar-container-no-toc{{/data-toc}}">
|
||||
<div id="mw-navigation">
|
||||
{{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}}
|
||||
</div>
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
</main>
|
||||
{{{html-after-content}}}
|
||||
</div>
|
||||
<div class="mw-workspace-container mw-footer-container">
|
||||
<div class="mw-footer-container">
|
||||
{{#data-footer}}{{>Footer}}{{/data-footer}}
|
||||
</div>
|
||||
</div> {{! END mw-page-container-inner }}
|
||||
|
|
|
|||
|
|
@ -9,20 +9,6 @@
|
|||
// Default spacing separating the sidebar TOC from the main menu or viewport.
|
||||
@margin-top-sidebar-toc: 1.5em;
|
||||
|
||||
.mw-sidebar {
|
||||
box-sizing: border-box;
|
||||
|
||||
// Hide #p-navigation label
|
||||
#p-navigation .vector-menu-heading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Temporary magic number, will be calculated after TOC specs are finalized
|
||||
padding: 12px 19px 12px 9px;
|
||||
background-image: none;
|
||||
background-color: @background-color-secondary--modern;
|
||||
}
|
||||
|
||||
// Update styling to account for TOC.
|
||||
.mw-sidebar,
|
||||
.sidebar-toc,
|
||||
|
|
@ -42,24 +28,40 @@
|
|||
.sidebar-toc,
|
||||
.sidebar-toc:after {
|
||||
margin-left: -@margin-start-sidebar-content;
|
||||
// Use margin-top to align TOC rather than grid row gap
|
||||
// Applies when the TOC sticky and when the main menu is both open and closed.
|
||||
margin-top: @margin-top-sidebar-toc;
|
||||
|
||||
@media ( min-width: @min-width-desktop-wide ) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vector-layout-grid {
|
||||
.mw-sidebar {
|
||||
box-sizing: border-box;
|
||||
// Temporary magic number, will be calculated after TOC specs are finalized
|
||||
padding: 12px 19px 12px 9px;
|
||||
background-image: none;
|
||||
background-color: @background-color-secondary--modern;
|
||||
|
||||
@media ( min-width: @min-width-desktop ) {
|
||||
.mw-sidebar {
|
||||
// Prevent grid row gap from affecting TOC spacing when main menu is open
|
||||
margin-bottom: -@grid-row-gap;
|
||||
}
|
||||
// Prevent grid row gap from affecting TOC spacing when main menu is open
|
||||
margin-bottom: -@grid-row-gap;
|
||||
}
|
||||
|
||||
.sidebar-toc {
|
||||
// Use margin-top to align TOC rather than grid row gap
|
||||
// Applies when the TOC sticky and when the main menu is both open and closed.
|
||||
margin-top: @margin-top-sidebar-toc;
|
||||
@media ( max-width: @max-width-tablet ) {
|
||||
// Makes the sidebar full screen at lower resolutions.
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Hide sidebar entirely when the checkbox is disabled
|
||||
#mw-sidebar-checkbox:not( :checked ) ~ .vector-sidebar-container & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Hide #p-navigation label
|
||||
#p-navigation .vector-menu-heading {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -121,17 +123,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hide sidebar entirely when the checkbox is disabled
|
||||
@{selector-workspace-container-sidebar-closed} .mw-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Makes the sidebar full screen at lower resolutions.
|
||||
*/
|
||||
@media ( max-width: @max-width-tablet ) {
|
||||
.mw-sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@
|
|||
@supports ( display: grid ) {
|
||||
.client-js {
|
||||
// Collapsed to page title
|
||||
.vector-toc-collapsed .vector-layout-grid {
|
||||
.vector-toc-collapsed {
|
||||
.mixin-toc-collapsed-unmoved();
|
||||
|
||||
.mw-table-of-contents-container {
|
||||
|
|
@ -135,9 +135,7 @@
|
|||
body:not( .vector-sticky-header-visible ).vector-below-page-title& {
|
||||
.mixin-toc-collapsed-floating();
|
||||
}
|
||||
}
|
||||
|
||||
.vector-toc-collapsed {
|
||||
.vector-toc-uncollapse-button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
// On IE11 this leaves a clean single column grid.
|
||||
// To be revisited when table of contents is collapsible in which situation we should be able to
|
||||
// force it as sticky.
|
||||
.vector-layout-grid .mw-table-of-contents-container {
|
||||
.mw-table-of-contents-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@supports ( display: grid ) {
|
||||
.vector-layout-grid .mw-table-of-contents-container {
|
||||
.mw-table-of-contents-container {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,95 +22,92 @@
|
|||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.vector-layout-grid {
|
||||
.mw-content-container {
|
||||
max-width: @max-width-content-container;
|
||||
.mw-content-container {
|
||||
max-width: @max-width-content-container;
|
||||
// For container logic specific to special pages and history pages.
|
||||
.skin-vector-disable-max-width & {
|
||||
// Allow the max-width of content on history/special pages to be wider than
|
||||
// the max-width of content on article pages.
|
||||
// Note, we don't disable the max-width on .mw-article-toolbar-container intentionally
|
||||
// to support easier navigation between tabs.
|
||||
// See T293441 for further information on that.
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// For container logic specific to special pages and history pages.
|
||||
.skin-vector-disable-max-width & {
|
||||
// Allow the max-width of content on history/special pages to be wider than
|
||||
// the max-width of content on article pages.
|
||||
// Note, we don't disable the max-width on .mw-article-toolbar-container intentionally
|
||||
// to support easier navigation between tabs.
|
||||
// See T293441 for further information on that.
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
}
|
||||
.mw-footer-container {
|
||||
padding-top: @padding-top-footer;
|
||||
padding-bottom: 82px;
|
||||
}
|
||||
|
||||
@media ( max-width: @max-width-tablet ) {
|
||||
.mw-header {
|
||||
// Match header styles applied by grid-template-rows and row-gap
|
||||
// when grid is disabled on lower resolutions
|
||||
height: @height-header;
|
||||
margin-bottom: @grid-row-gap;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @min-width-desktop ) {
|
||||
.mw-page-container-inner {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template: ~'@{height-header} min-content min-content 1fr min-content / 232px @{width-gutter} minmax(0, 1fr)';
|
||||
grid-template-areas: 'header header header'
|
||||
'sitebanner sitebanner sitebanner'
|
||||
'sidebar gutter content'
|
||||
'toc gutter content'
|
||||
'footer footer footer';
|
||||
row-gap: @grid-row-gap;
|
||||
}
|
||||
|
||||
.mw-body {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#siteNotice {
|
||||
grid-area: sitebanner;
|
||||
}
|
||||
|
||||
.mw-table-of-contents-container {
|
||||
grid-area: toc;
|
||||
}
|
||||
|
||||
.mw-header {
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
.vector-sidebar-container {
|
||||
grid-area: sidebar;
|
||||
}
|
||||
|
||||
.mw-content-container {
|
||||
grid-area: content;
|
||||
}
|
||||
|
||||
// with sidebar closed, when no table of contents, align with hamburger menu
|
||||
@{selector-sidebar-no-toc-sidebar-closed} ~ .mw-content-container {
|
||||
.mixin-column-align-width-hamburger-icon();
|
||||
}
|
||||
|
||||
.mw-footer-container {
|
||||
padding-top: @padding-top-footer;
|
||||
padding-bottom: 82px;
|
||||
}
|
||||
|
||||
@media ( max-width: @max-width-tablet ) {
|
||||
.mw-header {
|
||||
// Match header styles applied by grid-template-rows and row-gap
|
||||
// when grid is disabled on lower resolutions
|
||||
height: @height-header;
|
||||
margin-bottom: @grid-row-gap;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @min-width-desktop ) {
|
||||
.mw-page-container-inner {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template: ~'@{height-header} min-content min-content 1fr min-content / 232px @{width-gutter} minmax(0, 1fr)';
|
||||
grid-template-areas: 'header header header'
|
||||
'sitebanner sitebanner sitebanner'
|
||||
'sidebar gutter content'
|
||||
'toc gutter content'
|
||||
'footer footer footer';
|
||||
row-gap: @grid-row-gap;
|
||||
}
|
||||
|
||||
.mw-body {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#siteNotice {
|
||||
grid-area: sitebanner;
|
||||
}
|
||||
|
||||
.mw-table-of-contents-container {
|
||||
grid-area: toc;
|
||||
}
|
||||
|
||||
.mw-header {
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
.vector-sidebar-container {
|
||||
grid-area: sidebar;
|
||||
}
|
||||
|
||||
.mw-content-container {
|
||||
grid-area: content;
|
||||
}
|
||||
|
||||
// with sidebar closed, when no table of contents, align with hamburger menu
|
||||
@{selector-sidebar-no-toc-sidebar-closed} ~ .mw-content-container {
|
||||
.mixin-column-align-width-hamburger-icon();
|
||||
}
|
||||
|
||||
.mw-footer-container {
|
||||
grid-area: footer;
|
||||
padding-top: @padding-top-footer - @grid-row-gap;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @min-width-desktop-wide ) {
|
||||
.mw-page-container-inner {
|
||||
/* Use of minmax is important to restrict the maximum grid column width
|
||||
more information: T314756 */
|
||||
grid-template-columns: ~'284px @{width-gutter} minmax(0, 1fr)';
|
||||
}
|
||||
}
|
||||
|
||||
@{selector-sidebar-no-toc-sidebar-closed} {
|
||||
& ~ .mw-content-container {
|
||||
.mixin-column-full-width();
|
||||
}
|
||||
grid-area: footer;
|
||||
padding-top: @padding-top-footer - @grid-row-gap;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @min-width-desktop-wide ) {
|
||||
.mw-page-container-inner {
|
||||
/* Use of minmax is important to restrict the maximum grid column width
|
||||
more information: T314756 */
|
||||
grid-template-columns: ~'284px @{width-gutter} minmax(0, 1fr)';
|
||||
}
|
||||
}
|
||||
|
||||
@{selector-sidebar-no-toc-sidebar-closed} {
|
||||
& ~ .mw-content-container {
|
||||
.mixin-column-full-width();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,6 @@
|
|||
@import '../../common/variables.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
@selector-workspace-container-sidebar-open: ~'#mw-sidebar-checkbox:checked ~ .mw-workspace-container';
|
||||
@selector-workspace-container-sidebar-closed: ~'#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container';
|
||||
@selector-sidebar-no-toc-sidebar-closed: ~'#mw-sidebar-checkbox:not( :checked ) ~ .vector-sidebar-container-no-toc';
|
||||
|
||||
// Content container
|
||||
|
|
|
|||
Loading…
Reference in New Issue