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:
parent
a6e4cf2023
commit
77528d9dd6
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue