Addressing https://github.com/woocommerce/woocommerce/issues/30625 caused by iOS's behaviour around taps and hover, https://humanwhocodes.com/blog/2012/07/05/ios-has-a-hover-problem/. Adding `no-touch` class to body if we're not on a touch device. Adjusted CSS to take this class into account.

This commit is contained in:
And Finally 2021-09-13 14:29:32 +01:00
parent a6e4cf2023
commit 77528d9dd6
2 changed files with 33 additions and 12 deletions

View File

@ -182,7 +182,6 @@
}
}
.current-section-dropdown:hover,
.current-section-dropdown.is-open {
ul {
@ -775,6 +774,24 @@
}
}
.no-touch,
.no-js {
.wc-addons-wrap {
.current-section-dropdown:hover {
ul {
display: flex;
}
.current-section-name::after {
transform: rotate(0.5turn);
}
}
}
}
.wc-subscriptions-wrap {
max-width: 1200px;
}

View File

@ -412,17 +412,21 @@
var marketplaceMenuIsOpen = false;
// Add event listener to toggle Marketplace menu on touch devices
if ( marketplaceSectionDropdown.length && isTouchDevice() ) {
marketplaceSectionName.on( 'click', function() {
marketplaceMenuIsOpen = ! marketplaceMenuIsOpen;
if ( marketplaceMenuIsOpen ) {
marketplaceSectionDropdown.addClass( 'is-open' );
$( document ).on( 'click', maybeToggleMarketplaceMenu );
} else {
marketplaceSectionDropdown.removeClass( 'is-open' );
$( document ).off( 'click', maybeToggleMarketplaceMenu );
}
} );
if ( marketplaceSectionDropdown.length ) {
if ( isTouchDevice() ) {
marketplaceSectionName.on( 'click', function() {
marketplaceMenuIsOpen = ! marketplaceMenuIsOpen;
if ( marketplaceMenuIsOpen ) {
marketplaceSectionDropdown.addClass( 'is-open' );
$( document ).on( 'click', maybeToggleMarketplaceMenu );
} else {
marketplaceSectionDropdown.removeClass( 'is-open' );
$( document ).off( 'click', maybeToggleMarketplaceMenu );
}
} );
} else {
document.body.classList.add( 'no-touch' );
}
}
// Close menu if the user clicks outside it