Core: Fix discussion list slide gestures on non-mobile touch screens (e.g. iPad)

[tobyzerner]

Touch gestures are enabled on all touch screens, but they are only styled properly on smaller screen sizes. So if you swipe a discussion on iPad, funky stuff happens :O

[jordanjay29]

What is this? Description please?

[luceos]

I assume, reading the title again, that touch control is only enabled on mobile devices (with smaller screen sizes) whereas these should also be enabled on larger touch-enabled devices like iPads.

[tobyzerner]

Sorry, other way around - touch gestures are enabled on all touch screens, but they are only styled properly on smaller screen sizes. So if you swipe a discussion on iPad, funky stuff happens :O

[datitisev]

Demo:

[ardacebi]

[This issue needs the mobile tag]

[ardacebi]

I may have a solution to this, but first I need to know something.

Is there a way we can make Flarum detect if the client is a mobile device (touchscreen) or a computer (non-touchscreen)?

PS: Here, I don't mean detection by screen size, like can we recognize the screen itself.

[datitisev]

@ardacebi CSS or JS?

With CSS one can use the screen media like

@media screen {}

[ardacebi]

Doesn't matter, as I understand: you can.

Then I was going to suggest: if the user is using a mobile device like the iPad, let's use the vertical layout of Flarum where tags and other buttons move to the top of the discussion list, scrollable, giving space to the discussion list for them to slide without interfering with other elements.

[tobyzerner]

@ardacebi we already do adapt the layout according to the screen size

[ardacebi]

@tobscure No, what I mean is different.

Flarum already recognizes touch screens and adds that gesture thing. But the thing is when using iPad (or related devices) in landscape mode, it displays like on desktop, tags, and buttons on the left side, discussions on the right side. That causes that funky stuff to happen.

I'm saying that let's use the vertical layout I sent you above on "all" touch screens, not just vertical iPad but also on horizontal iPad.

Are you getting what I'm saying?

[tobyzerner]

I get what you're saying and I disagree. The horizontal iPad screen is wide enough to display the sidebar so it should. The funky behaviour with the gestures is a bug.

[ardacebi]

I may have another fix while displaying the sidebar. I’ll open a PR.

[luceos]

@ardacebi we would be appreciative would you first bounce the idea here 👍

[ardacebi]

@luceos Instead of just setting the secondary color to the first area where the extension was located, I will apply the secondary color to itself. So all elements on it will be visible. I may also add a box shadow if it looks good 🤔

But not sure about the shadow.

[luceos]

If I'm not mistaken the original issue is about non-mobile -yet- handheld devices using part of the mobile functionality, but not it's styling. From what I can tell from the screenshot the discussion entry shifts away from the list, changing layout or looks therefore is not a solution and should not be discussed in this issue.

Please do correct me if I'm wrong.

[ardacebi]

You're wrong and right. The issue is about tablet styled devices (not phones). Giving them a background will solve the whole issue as it's overlapping the sidebar without a background giving it a bad looking.

If you look at @datitisev's screenshot, you will see that the background layer stays where it was not following the discussion item itself. But if the discussion has a background (Secondary color in this case), it won't overlap the sidebar text and maybe with a box shadow, we may create a better look (idea from search box issue).