diff --git a/includes/TimelessTemplate.php b/includes/TimelessTemplate.php index 8258341..1816a5b 100644 --- a/includes/TimelessTemplate.php +++ b/includes/TimelessTemplate.php @@ -36,6 +36,47 @@ class TimelessTemplate extends BaseTemplate { $html .= Html::rawElement( 'div', [ 'id' => 'mw-content-container', 'class' => 'ts-container' ], Html::rawElement( 'div', [ 'id' => 'mw-content-block', 'class' => 'ts-inner' ], + Html::rawElement( 'div', [ 'id' => 'mw-content-wrapper' ], + Html::rawElement( 'div', [ 'id' => 'mw-content' ], + Html::rawElement( 'div', [ 'id' => 'content', 'class' => 'mw-body', 'role' => 'main' ], + $this->getSiteNotices() . + $this->getIndicators() . + Html::rawElement( + 'h1', + [ + 'id' => 'firstHeading', + 'class' => 'firstHeading', + 'lang' => $this->get( 'pageLanguage' ) + ], + $this->get( 'title' ) + ) . + Html::rawElement( 'div', [ 'id' => 'mw-page-header-links' ], + $this->getPortlet( + 'namespaces', + $this->pileOfTools['namespaces'], + 'timeless-namespaces' + ) . + $this->getPortlet( + 'more', + $this->pileOfTools['more'], + 'timeless-more' + ) . + $this->getPortlet( + 'views', + $this->pileOfTools['page-primary'], + 'timeless-pagetools' + ) + ) . + $this->getClear() . + Html::rawElement( 'div', [ 'class' => 'mw-body-content', 'id' => 'bodyContent' ], + $this->getContentSub() . + $this->get( 'bodytext' ) . + $this->getClear() + ) + ) + ) + ) . + $this->getAfterContent() . Html::rawElement( 'div', [ 'id' => 'mw-site-navigation' ], $this->getLogo( 'p-logo', 'image' ) . $this->getMainNavigation() . @@ -54,45 +95,6 @@ class TimelessTemplate extends BaseTemplate { $this->getInterlanguageLinks() . $this->getCategories() ) . - Html::rawElement( 'div', [ 'id' => 'mw-content' ], - Html::rawElement( 'div', [ 'id' => 'content', 'class' => 'mw-body', 'role' => 'main' ], - $this->getSiteNotices() . - $this->getIndicators() . - Html::rawElement( - 'h1', - [ - 'id' => 'firstHeading', - 'class' => 'firstHeading', - 'lang' => $this->get( 'pageLanguage' ) - ], - $this->get( 'title' ) - ) . - Html::rawElement( 'div', [ 'id' => 'mw-page-header-links' ], - $this->getPortlet( - 'namespaces', - $this->pileOfTools['namespaces'], - 'timeless-namespaces' - ) . - $this->getPortlet( - 'more', - $this->pileOfTools['more'], - 'timeless-more' - ) . - $this->getPortlet( - 'views', - $this->pileOfTools['page-primary'], - 'timeless-pagetools' - ) - ) . - $this->getClear() . - Html::rawElement( 'div', [ 'class' => 'mw-body-content', 'id' => 'bodyContent' ], - $this->getContentSub() . - $this->get( 'bodytext' ) . - $this->getClear() - ) - ) - ) . - $this->getAfterContent() . $this->getClear() ) ); diff --git a/resources/screen-desktop-full.less b/resources/screen-desktop-full.less index afddfa8..24630a2 100644 --- a/resources/screen-desktop-full.less +++ b/resources/screen-desktop-full.less @@ -1,17 +1,22 @@ @import 'variables.less'; +#mw-content-block { + .flex-display; + clear: both; +} + #mw-site-navigation { .column-left(); + .flex(0, 0, @column-left-size, 1); } -#mw-content { - margin-left: @column-left-size; - margin-right: @column-right-size; - overflow: auto; +#mw-content-wrapper { + .flex(1, 1, auto, 2); } #mw-related-navigation { .column-right(); + .flex(0, 0, @column-right-size, 3); } // Redundant content category list diff --git a/resources/screen-desktop-mid.less b/resources/screen-desktop-mid.less index 22da9a1..e1c0ade 100644 --- a/resources/screen-desktop-mid.less +++ b/resources/screen-desktop-mid.less @@ -1,17 +1,28 @@ @import 'variables.less'; +#mw-content-block { + clear: both; +} + #mw-site-navigation, #mw-related-navigation { .column-left(); + display: block; + width: @column-left-size; + position: relative; } #mw-related-navigation > div.sidebar-chunk:first-child { margin-top: 0; } +#mw-content-wrapper { + float: right; + margin-left: -@column-left-size; + width: 100%; +} #mw-content { margin-left: @column-left-size; - overflow: auto; } // Redundant content category list diff --git a/resources/screen-desktop-small.less b/resources/screen-desktop-small.less index bfa352b..d3924b5 100644 --- a/resources/screen-desktop-small.less +++ b/resources/screen-desktop-small.less @@ -69,8 +69,9 @@ } #mw-site-navigation { - float: left; - margin-left: 2em; + position: absolute; + top: 3.1em; + left: 2em; .sidebar-chunk { margin: 0 1em 0 0; @@ -80,8 +81,9 @@ } } #mw-related-navigation { - float: right; - margin-right: 2em; + position: absolute; + top: 3.1em; + right: 2em; .sidebar-chunk { margin: 0 0 0 1em; diff --git a/resources/variables.less b/resources/variables.less index 5799e87..014dfbe 100644 --- a/resources/variables.less +++ b/resources/variables.less @@ -109,7 +109,6 @@ .nav-block() { .box(); - overflow: auto; padding: 1.5em 1.5em 0; margin: 1em 0; line-height: 1.1; @@ -136,9 +135,6 @@ } .column-right() { - width: @column-right-size; - float: right; - clear: right; padding-left: 1em; box-sizing: border-box; @@ -147,9 +143,6 @@ } } .column-left() { - width: @column-left-size; - float: left; - clear: left; padding-right: 1em; box-sizing: border-box;