Put languages back in sidebar on desktop

Partially reverts I148707085059f458512d328c415ea0bf134163f3 plus some random
cleanup and stuff

Both of the following bugs involve wikibase stuff so I can't actually be entirely
sure this resolves them, but I thiiiink it does because it should be killing the
offending parts of the above change that caused this? Probably?

Bug: T231256
Bug: T231234
Change-Id: Id7c0d90a805450b577271a321572fcd552ecbc3e

includes/TimelessTemplate.php

@@ -139,7 +139,7 @@ class TimelessTemplate extends BaseTemplate {
 					'timeless-more',
 					[ 'extra-classes' => 'tools-inline' ]
 				) .
-				$this->getLanguageLinks() .
+				$this->getVariants() .
 				$this->getPortlet(
 					'views',
 					$this->pileOfTools['page-primary'],
@@ -305,15 +305,19 @@ class TimelessTemplate extends BaseTemplate {
 	 * @param string $id
 	 * @param string $headerMessage
 	 * @param string $content
+	 * @param array $classes
 	 *
 	 * @return string html
 	 */
-	protected function getSidebarChunk( $id, $headerMessage, $content ) {
+	protected function getSidebarChunk( $id, $headerMessage, $content, $classes = [] ) {
 		$html = '';
 
 		$html .= Html::rawElement(
 			'div',
-			[ 'id' => Sanitizer::escapeId( $id ), 'class' => 'sidebar-chunk' ],
+			[
+				'id' => Sanitizer::escapeId( $id ),
+				'class' => array_merge( [ 'sidebar-chunk' ], $classes )
+			],
 			Html::rawElement( 'h2', [],
 				Html::element( 'span', [],
 					$this->getMsg( $headerMessage )->text()
@@ -698,11 +702,21 @@ class TimelessTemplate extends BaseTemplate {
 				'id' => 't-pagelog'
 			];
 		}
+
+		// Mobile toggles
 		$pileOfTools['more'] = [
 			'text' => $this->getMsg( 'timeless-more' )->text(),
 			'id' => 'ca-more',
 			'class' => 'dropdown-toggle'
 		];
+		if ( $this->data['language_urls'] !== false || $this->pileOfTools['variants']
+			|| isset( $this->otherProjects ) ) {
+			$pileOfTools['languages'] = [
+				'text' => $this->getMsg( 'timeless-languages' )->escaped(),
+				'id' => 'ca-languages',
+				'class' => 'dropdown-toggle'
+			];
+		}
 
 		// This is really dumb, and you're an idiot for doing it this way.
 		// Obviously if you're not the idiot who did this, I don't mean you.
@@ -864,28 +878,15 @@ class TimelessTemplate extends BaseTemplate {
 	 *
 	 * @return string html
 	 */
-	protected function getLanguageLinks() {
+	protected function getVariants() {
 		$html = '';
 
-		$variants = $this->getPortlet(
+		if ( $this->pileOfTools['variants'] ) {
-			'variants',
+			$html .= $this->getPortlet(
-			$this->pileOfTools['variants']
+				'variants-desktop',
-		);
+				$this->pileOfTools['variants'],
-		$languages = $this->getPortlet(
+				'variants',
-			'lang',
+				[ 'body-extra-classes' => 'dropdown' ]
-			$this->data['language_urls'],
-			'otherlanguages'
-		);
-
-		if ( $this->data['language_urls'] || $this->pileOfTools['variants'] ) {
-			$html .= Html::rawElement( 'div', [ 'id' => 'ca-languages' ],
-				Html::rawElement( 'h2', [],
-					Html::element( 'span', [], $this->getMsg( 'timeless-languages' )->text() )
-				) .
-				Html::rawElement( 'div', [ 'id' => 'languages-inner', 'class' => 'dropdown' ],
-					$variants .
-					$languages
-				)
 			);
 		}
 
@@ -893,18 +894,51 @@ class TimelessTemplate extends BaseTemplate {
 	}
 
 	/**
-	 * Interwiki links block if using wikibase for 'in other projects'
+	 * Interwiki links block
 	 *
 	 * @return string html
 	 */
 	protected function getInterwikiLinks() {
 		$html = '';
-
+		$variants = '';
+		$otherprojects = '';
+		$languages = '';
+		$show = false;
+		$variantsOnly = false;
+
+		if ( $this->pileOfTools['variants'] ) {
+			$variants = $this->getPortlet(
+				'variants',
+				$this->pileOfTools['variants']
+			);
+			$show = true;
+			$variantsOnly = true;
+		}
+		if ( $this->data['language_urls'] !== false ) {
+			$languages = $this->getPortlet(
+				'lang',
+				$this->data['language_urls'] ?: [],
+				'otherlanguages'
+			);
+			$show = true;
+			$variantsOnly = false;
+		}
+		// if using wikibase for 'in other projects'
 		if ( isset( $this->otherProjects ) ) {
+			$otherprojects = $this->getPortlet(
+				'wikibase-otherprojects',
+				$this->otherProjects['content']
+			);
+			$show = true;
+			$variantsOnly = false;
+		}
+
+		if ( $show ) {
 			$html .= $this->getSidebarChunk(
-				'other-projects',
+				'other-languages',
 				'timeless-projects',
-				$this->getPortlet( 'wikibase-otherprojects', $this->otherProjects['content'] )
+				$variants . $languages . $otherprojects,
+				$variantsOnly ? [ 'variants-only' ] : []
 			);
 		}
 

resources/mobile.js

@@ -26,9 +26,9 @@ $( function () {
 		}
 	} );
 	$( '#ca-languages' ).on( 'click', function () {
-		$( '#languages-inner' ).css( 'top', $( '#ca-languages' ).offset().top + 25 );
+		$( '#other-languages .sidebar-inner' ).css( 'top', $( '#ca-languages' ).offset().top + 25 );
 		if ( $( window ).width() < 851 ) {
-			$( '#languages-inner, #menus-cover' ).fadeToggle( toggleTime );
+			$( '#other-languages .sidebar-inner, #menus-cover' ).fadeToggle( toggleTime );
 		}
 	} );
 
@@ -36,7 +36,6 @@ $( function () {
 	$( document ).on( 'click touchstart', function ( e ) {
 		if ( $( e.target ).closest( '#menus-cover' ).length > 0 ) {
 			$( '#personal-inner' ).fadeOut( toggleTime );
-			$( '#languages-inner' ).fadeOut( toggleTime );
 			$( '.sidebar-inner' ).fadeOut( toggleTime );
 			$( '#menus-cover' ).fadeOut( toggleTime );
 		}

resources/screen-common.less

@@ -299,31 +299,6 @@ body {
 	.ca-icon( 'images/page-grey' );
 }
 
-#ca-languages {
-	float: right;
-	margin: 0.25em 0 1em 1em;
-
-	h2 {
-		.dropdown-header();
-		.ca-icon( 'images/languages-grey' );
-		font-size: 1em;
-		font-family: @fonts;
-		border-bottom: transparent;
-	}
-
-	.dropdown {
-		display: none;
-
-		h3 {
-			font-family: @fonts;
-		}
-
-		.selected a {
-			color: @text;
-		}
-	}
-}
-
 #siteNotice {
 	font-size: 95%;
 	margin: 0.5em auto 1.5em;

resources/screen-desktop.less

@@ -115,14 +115,20 @@ div.mw-notification-area {
 	}
 }
 
-#ca-languages {
+#p-variants-desktop {
+	float: right;
+	margin: 0.25em 0 1em 1em;
 	position: relative;
 
-	h2 {
+	h3 {
+		.dropdown-header();
+		.ca-icon( 'images/languages-grey' );
+		font-size: 1em;
+		font-family: @fonts;
+		border-bottom: transparent;
 		margin: 0 0 -1em;
 		line-height: 1.5;
 		padding-bottom: 1em;
-		border-bottom: transparent;
 	}
 
 	.dropdown {
@@ -131,6 +137,11 @@ div.mw-notification-area {
 		.dropdown-pokey();
 		// Override the mobile thing
 		top: 2.25em !important;
+		padding-bottom: 2em;
+
+		.selected a {
+			color: @text;
+		}
 	}
 
 	&:hover .dropdown {
@@ -138,7 +149,13 @@ div.mw-notification-area {
 	}
 }
 
-#mw-page-header-links #p-more,
+#p-variants,
+#other-languages.variants-only,
+#mw-page-header-links #p-more {
+	display: none;
+}
+
+// TODO: use .hidden() for this instead (and unhide on desktop-small)
 .sidebar-chunk h2 {
 	display: none;
 }

resources/screen-mobile.less

@@ -5,6 +5,7 @@
 
 /* Layout */
 
+#mw-data-after-content,
 #mw-footer {
 	padding: 0 @content-padding;
 }
@@ -16,10 +17,7 @@
 
 .categories-bottom();
 
-#catlinks {
+#p-variants-desktop,
-	padding-bottom: 2em;
-}
-
 #mw-page-header-links #ca-view,
 #mw-header-nav-hack,
 #page-tools h2,
@@ -49,10 +47,6 @@
 .sidebar-inner,
 .dropdown {
 	display: none;
-}
-
-.sidebar-inner,
-.dropdown {
 	.nav-block();
 	background: @background;
 	box-shadow: 0 2px 3px 1px rgba( 0, 0, 0, 0.05 );
@@ -167,14 +161,6 @@ h1.firstHeading {
 	margin-right: 1.5em;
 }
 
-#p-pagetools li {
-	margin-left: 1.5em;
-
-	&#ca-languages {
-		margin-left: 1em;
-	}
-}
-
 .tools-inline li a {
 	.ca-icon-only();
 }
@@ -184,33 +170,20 @@ h1.firstHeading {
 	&:after {
 		margin-left: -0.35em;
 	}
-}
 
-#ca-more span,
+	span {
-#ca-languages h2 span {
+		.ca-icon-only();
-	.ca-icon-only();
+		display: inline-block;
-	display: inline-block;
+		overflow: visible;
-	overflow: visible;
+	}
 }
 
 #ca-more span {
 	.background-image-svg( 'images/gear-grey.svg', 'images/gear-grey.png' );
 }
 
-// TODO: consistentify dropdown header rendering and mobile toggle rendering
+#ca-languages span {
-#ca-languages h2 {
+	.background-image-svg( 'images/languages-grey.svg', 'images/languages-grey.png' );
-	border-bottom: solid 3px transparent;
-	line-height: 1.5;
-	margin: 0;
-	padding: 0;
-
-	&:hover {
-		border-bottom-color: @base70;
-	}
-
-	&:after {
-		width: 16px;
-	}
 }
 
 /* Full-width thumbnails */