Refactor TimelessTemplate.php

Structure is generally the same. All html is rendered into a
single variable, output with a single unholy 'echo'.

getPortlet is now more general, and generally used.

Should generally address the issues raised in T158011.
Should also be technically compatible with VE (DOM), but
without styling, and requiring the user to edit
LocalSettings.php (hopefully that gets fixed soon).
Fixed a slight bug with the languages rendering on mobile.

Some randomly missing things were added back in. (Variants,
some hooks)

bug: T161428
bug: T158011
bug: T132005
Change-Id: I3b691c8bfe7aed4a544236d5ac031b77ec4e8337

resources/mobile.js

@@ -6,7 +6,7 @@ $( function() {
 	// Open the various menus
 	$( '#user-tools h2' ).on( 'click', function( e ) {
 		if ( $( window ).width() < 851 ) {
-			$( '#p-personal-inner, #menus-cover' ).fadeToggle( toggleTime );
+			$( '#personal-inner, #menus-cover' ).fadeToggle( toggleTime );
 		}
 	} );
 	$( '#site-navigation h2' ).on( 'click', function( e ) {
@@ -35,7 +35,7 @@ $( function() {
 	// Close menus on click outside
 	$( document ).click( function( e ) {
 		if ( $( e.target ).closest( '#menus-cover' ).length > 0 ) {
-			$( '#p-personal-inner' ).fadeOut( toggleTime );
+			$( '#personal-inner' ).fadeOut( toggleTime );
 			$( '.sidebar-inner' ).fadeOut( toggleTime );
 			$( '#menus-cover' ).fadeOut( toggleTime );
 		}
@@ -44,10 +44,9 @@ $( function() {
 	// Include alternative closing method for ios
 	$( window ).on( 'swiperight', function( e ) {
 		if ( $( window ).width() < 851 ) {
-			$( '#p-personal-inner' ).fadeOut( toggleTime );
+			$( '#personal-inner' ).fadeOut( toggleTime );
 			$( '.sidebar-inner' ).fadeOut( toggleTime );
 			$( '#menus-cover' ).fadeOut( toggleTime );
 		}
 	} );
 } );
-

resources/screen-common.less

@@ -179,7 +179,7 @@ div.suggestions {
 		list-style: none;
 		padding: 0;
 	}
-	#footer-icons {
+	.footer-icons {
 		float: right;
 		margin: 0 0 0 1em;
 
@@ -187,10 +187,13 @@ div.suggestions {
 			margin: 0 0 1em 0;
 		}
 	}
-}
+	.footer-places li {
-#footer-places li {
+		display: inline;
-	display: inline;
+		padding-right: 1em;
-	padding-right: 1em;
+	}
+	#lastmod {
+		display: block;
+	}
 }
 
 /* Content */
@@ -481,13 +484,13 @@ table.wikitable > * > tr > th {
 
 /* Echo */
 
-#p-personal h2,
+#personal h2,
-#p-personal-extra,
+#personal-extra,
-#p-personal-extra ul,
+#personal-extra ul,
-#p-personal-extra li {
+#personal-extra li {
 	display: inline-block;
 }
-#p-personal-extra {
+#personal-extra {
 	// Position and keep it from randomly overflowing massively for no apparent reason
 	margin: .7em 0 -2em 0;
 

resources/screen-desktop-small.less

@@ -104,7 +104,7 @@
 
 // Personal menu
 
-#p-personal {
+#personal {
 	float: right;
 
 	h2 span {
@@ -129,6 +129,6 @@
 .extension-icons #p-search {
 	margin-right: 11em;
 }
-#p-personal-extra {
+#personal-extra {
 	margin-left: -2.5em;
 }

resources/screen-desktop.less

@@ -66,7 +66,7 @@
 	display: none !important;
 }
 
-#p-personal {
+#personal {
 	display: inline-block;
 	position: relative;
 	padding-left: 1.5em;
@@ -108,7 +108,7 @@
 }
 
 /* Echo stuff */
-#p-personal-extra {
+#personal-extra {
 	float: left;
 	margin-left: -4.5em;
 }

resources/screen-mobile.less

@@ -19,6 +19,7 @@
 #mw-page-header-links #ca-view,
 #mw-header-nav-hack,
 #page-tools h2,
+#other-languages h2,
 #p-logo {
 	display: none;
 }
@@ -128,7 +129,7 @@
 .mw-echo-ui-notificationBadgeButtonPopupWidget {
 	z-index: 2;
 }
-#p-personal-extra {
+#personal-extra {
 	position: absolute;
 	top: .9em;
 	right: 11.75em;