Search…

X3 Photo Gallery Support Forums

Search…
 
traxnamibia
Experienced
Topic Author
Posts: 36
Joined: 17 May 2021, 08:16

Mega menu bug on touch devices

05 Jan 2022, 03:48

Hi Karl, Happy New Year and all that good stuff!

First off, I am not (YET) a licensed user of X3, but am a licensed user of the Files and Embed app. I was so impressed with Files and Embed, that 3 days ago, I started to experiment with X3 and the excellent built-in mega menu.

I love the the fact that X3 does not use a database as there are few sites which need that complexity, so I have been looking at alternatives to other flat-file CMSs such as Bludit (which I am currently using), Kirby and others. It took about a day or so to get my head around the core functions, but it's clear to me that X3 is probably the way ahead for me. However, this leads me on to a deal-breaking issue with the mega menu.
  1. It's only an issue on touch devices and obviously only applies when the mega menu is in play - a screen width over 1024px. Devices such as Chromebooks (where I stumbled upon the bug) MS Surfaces, Yogas and other touch enable ultrabooks are now common, so this issue can't be ignored. In my use-case, I really want to use the mega menu and not a sidebar alternative.
  2. To recreate the issue, open X3 Demo and use your browser's dev tools set to a touch device with a screen width over 1024px. Or, just use a real touch device which has a large enough screen.
  3.  Examples:
    a. Tap on 'Galleries', tap on an active nav arrow - the menu disappears.
    b. Tap on 'Examples', tap on a nav arrow under the preview image - the menu disappears.
    c. Tap on 'Contacts', tap inside any form field - the menu disappears. In fact, it's impossible to complete the form.
Is there any fix for this by perhaps providing some custom code?  
 
traxnamibia
Experienced
Topic Author
Posts: 36
Joined: 17 May 2021, 08:16

Re: Mega menu bug on touch devices

05 Jan 2022, 22:48

Here's my quick and dirty fix:
a. Tap on 'Galleries', tap on an active nav arrow - the menu disappears.
Manage> Galleries> Menu> Dropdown options> carousel> amount> 10. Not ideal, but provided the number of items is less than 10, the arrow buttons will not appear. I assume this can be fixed if the latest version of Owl Carousel which supports touch devices is incorporated into X3?
b. Tap on 'Examples', tap on a nav arrow under the preview image - the menu disappears.
I added the following custom css to hide the arrows:
Code
.mega.list .preview>div:last-child button:first-of-type {
    display: none;
}
.mega.list .preview>div:last-child button {
    display: none;
}
c. Tap on 'Contacts', tap inside any form field - the menu disappears. In fact, it's impossible to complete the form.
I removed the dropdown for 'Contact' and left the contact form in the main body.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Mega menu bug on touch devices

05 Jan 2022, 23:21

Hi, sorry for the late reply.
traxnamibia wrote:I was so impressed with Files and Embed, that 3 days ago, I started to experiment with X3 and the excellent built-in mega menu.
Files app is ahead of X3 when it comes to the frontend (JS/CSS) functionality, and I am looking forwards to move X3 in the same direction. To accommodate this, I may first be looking at a major core upgrade, so things may take a while.

About the X3 mega menu issue on touch devices, I will take note and look into it for next release which I will be looking into shortly. X3 was initially created back in the days when touch screens were mobile devices and desktops were mouse ... Now of course, there are touchscreens larger than desktops, and desktops with touchscreens that report as "mouse" until you detach the screen. The mega menu was therefore primarily created for mouse-HOVER devices with little testing for touch devices.
traxnamibia wrote: I assume this can be fixed if the latest version of Owl Carousel which supports touch devices is incorporated into X3?
I don't think the issue is related to Owl. The Owl version we use also supports touch/drag as you can see. The problem is about the menu and underlying elements that trigger a mouse event that mistakingly closes the menu.