Themes: fix overlays and buttons in responsive mode, props matveb, fixes #26481.

git-svn-id: https://develop.svn.wordpress.org/trunk@26838 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/wp-admin.css

@@ -7194,15 +7194,26 @@ body.folded .theme-overlay .theme-wrap {
 	.theme-browser .theme .theme-actions {
 		padding: 5px 10px 4px 10px;
 	}
+
 	.theme-overlay.small-screenshot .theme-screenshots {
 		position: static;
 		float: none;
 		max-width: 302px;
 	}
+
 	.theme-overlay.small-screenshot .theme-info {
 		margin-left: 0;
 		width: auto;
 	}
+
+	.theme:not(.active):hover .theme-actions,
+	.theme:hover .more-details {
+		display: none;
+	}
+
+	.theme-browser.rendered .theme:hover .theme-screenshot img {
+		opacity: 1.0;
+	}
 }
 
 @media only screen and (max-width: 480px) {

src/wp-admin/js/theme.js

@@ -187,9 +187,13 @@ themes.view.Theme = wp.Backbone.View.extend({
 	html: themes.template( 'theme' ),
 
 	events: {
-		'click': 'expand'
+		'click': 'expand',
+		'touchend': 'expand',
+		'touchmove': 'preventExpand'
 	},
 
+	touchDrag: false,
+
 	render: function() {
 		var data = this.model.toJSON();
 		// Render themes using the html template
@@ -215,6 +219,11 @@ themes.view.Theme = wp.Backbone.View.extend({
 	expand: function( event ) {
 		var self = this;
 
+		// Bail if the user scrolled on a touch device
+		if ( this.touchDrag === true ) {
+			return this.touchDrag = false;
+		}
+
 		event = event || window.event;
 
 		// Prevent the modal from showing when the user clicks
@@ -224,6 +233,10 @@ themes.view.Theme = wp.Backbone.View.extend({
 		}
 
 		this.trigger( 'theme:expand', self.model.cid );
+	},
+
+	preventExpand: function() {
+		this.touchDrag = true;
 	}
 });