diff --git a/src/wp-admin/css/wp-admin.css b/src/wp-admin/css/wp-admin.css index 7d0c2962aa..e72f777088 100644 --- a/src/wp-admin/css/wp-admin.css +++ b/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) { diff --git a/src/wp-admin/js/theme.js b/src/wp-admin/js/theme.js index 9a525895a2..ac5e51d907 100644 --- a/src/wp-admin/js/theme.js +++ b/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; } });