Attempt to fix overflow issues with hsc- and mb-style implementations

* display:flex for three-column
* float content and some voodoo for two-column (same as monobook)

Also had to slightly rearrange dom to make the latter work. Content
is now before nav in dom.

Change-Id: I7209eb21473877592d89f8471f8f8ed1f6b87851

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()
 			)
 		);

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

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

resources/screen-desktop-small.less

@@ -64,8 +64,9 @@
 }
 
 #mw-site-navigation {
-	float: left;
-	margin-left: 2em;
+	position: absolute;
+	top: 3.1em;
+	left: 2em;
 
 	.sidebar-chunk {
 		margin: 0 1em 0 0;
@@ -75,8 +76,9 @@
 	}
 }
 #mw-related-navigation {
-	float: right;
-	margin-right: 2em;
+	position: absolute;
+	top: 3.1em;
+	right: 2em;
 
 	.sidebar-chunk {
 		margin: 0 0 0 1em;

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;