Merge "Fix truncated text showing through icons & last-modified bar"

includes/skins/history.mustache

@@ -1,11 +1,13 @@
-<div class="content last-modified-bar view-border-box footer-element">
-	<div class="last-modifier-tagline truncated-text {{clockIconClass}}">
-		<span class="{{arrowIconClass}}"></span>
-		<a href="{{href}}"
-			data-user-name="{{data-user-name}}"
-			data-user-gender="{{data-user-gender}}"
-			data-timestamp="{{data-timestamp}}">
-			<span>{{text}}</span>
-		</a>
+<div class="last-modified-bar view-border-box footer-element">
+	<div class="content">
+		<div class="last-modified-bar__text truncated-text {{clockIconClass}}">
+			<span class="{{arrowIconClass}}"></span>
+			<a href="{{href}}"
+				data-user-name="{{data-user-name}}"
+				data-user-gender="{{data-user-gender}}"
+				data-timestamp="{{data-timestamp}}">
+				<span>{{text}}</span>
+			</a>
+		</div>
 	</div>
 </div>

resources/skins.minerva.base.styles/footer.less

@@ -26,15 +26,28 @@ footer {
 		padding: 0 @contentPadding;
 	}
 
+	// for compatibility with cached HTML. Can be returned 2 weeks after
+	// I53fa45058dbc81c91089840073e03113ff1a4b9c lands.
 	.last-modifier-tagline {
+		height: 40px;
+		line-height: 40px;
+		font-size: @font-size-minerva-small;
+	}
+
+	.last-modified-bar__text {
 		@end-padding: @iconGutterWidth + @iconGutterWidth + @iconSize;
 		display: block;
+		height: auto;
+		padding-right: 40px;
 		.truncated-text();
 
+		&:before {
+			float: left;
+		}
+
 		> a,
 		> span > span,
 		> span:last-child {
-			display: inline-block;
 			font-size: @font-size-minerva-small;
 		}
 	}

resources/skins.minerva.base.styles/ui.less

@@ -63,7 +63,7 @@ main {
 	a:visited {
 		color: @colorGray5;
 		// If browser supports
-		&:nth-child( 2 ) {
+		&:nth-child( 1 ) {
 			font-weight: bold;
 		}
 	}

resources/skins.minerva.scripts/init.js

@@ -323,7 +323,7 @@
 		initModifiedInfo();
 		initRegistrationInfo();
 		// eslint-disable-next-line no-jquery/no-global-selector
-		initHistoryLink( $( '.last-modifier-tagline a' ) );
+		initHistoryLink( $( '.last-modified-bar__text a' ) );
 		if ( toolbarElement ) {
 			Toolbar.bind( window, toolbarElement );
 			Toolbar.render( window, toolbarElement );

skinStyles/mediawiki.ui.icon/mediawiki.ui.icon.less

@@ -65,7 +65,6 @@
 	vertical-align: middle;
 	line-height: 0;
 	overflow: hidden;
-	white-space: nowrap;
 
 	// resetting styles for <button> elements
 	-moz-appearance: none;
@@ -99,6 +98,7 @@
 
 	// screen-reader text. Not using `text-indent: -999px` because
 	// the inner :before element is `display: block` so text-indent has no effect.
+	line-height: 999px;
 	color: transparent;
 
 	&:focus, &:active, &:visited {
@@ -127,6 +127,7 @@
 
 .mw-ui-icon-before {
 	width: auto;
+	max-width: 100%;
 
 	&:before {
 		.mixin-background-square();

tests/selenium/features/support/pages/article_page.js

@@ -26,8 +26,7 @@ class ArticlePage extends MinervaPage {
 	get overlay_category_topic_item_element() { return $( '.topic-title-list li' ); }
 	get red_link_element() { return $( 'a.new' ); }
 	get is_authenticated_element() { return $( 'body.is-authenticated' ); }
-	get last_modified_bar_history_link_element() { return $( '.last-modifier-tagline a[href*=\'Special:History\']' ); }
-
+	get last_modified_bar_history_link_element() { return $( '.last-modified-bar__text a[href*=\'Special:History\']' ); }
 }
 
 module.exports = new ArticlePage();