ui special cards for mobile

[jeannettegoecke]

Does anybody have a solution for class .ui.special.cards working on mobile? I would be very grateful for a few suggestions. Thanks. Or do I miss a solution in the documentation for mobile? https://fomantic-ui.com/views/card.html#image

[tobiasgoecke]

+1

[jamessampford]

Could probably do with some sort of mobile only class that has the button inside a div in the card which only shows when a mobile (or mobile-sized screen, or even a tablet for that matter)

[lubber-de]

What is the expected behavior / use case? When i try those examples on mobile (tried chrome an android 10), of course there is no hover.
However, when i tip/touch the card examples the hover/dimmer/reveal effect appears just as on desktop.
Yes, to make them vanish again, i have to touch somewhere outside the card.

[jamessampford]

In terms of user experience, I guess it’s possibly just not obvious for a touch user, but then, hovering isn’t that obvious unless you accidentally discover it (I guess touch could accidentally discover it too?). Having some utility classes for touch devices could possibly help by showing a button somewhere?

[jeannettegoecke]

Thanks for your answers. Touching on ui special cards on iPhone is not working. Nothing happens, especially no dimmer. Writing additional code for mobile devices is not my intention due to performance reasons. So every time I decide against the ui special cards, which it's a pity, because they are not working on mobile. @jamessampford thanks for the solution.

[lubber-de]

@jeannettegoecke Try this to have only one codebase:

$('.special.cards .image').dimmer({
  on: 'ontouchstart' in document.documentElement ? 'click' : 'hover'
});

See https://jsfiddle.net/lubber/0zgas1Le/15/
Try directly on mobile here https://fomantic-ui.com/jsfiddle/#!lubber/0zgas1Le/15

[jeannettegoecke]

Thanks for your help. This is working now and I am happy now that I can use it. Is there a way to put this in the documentation? I would do that too. Thank you very much. 💐

[lubber-de]

Added to the docs by fomantic/Fomantic-UI-Docs#327 🙂

[jeannettegoecke]

Great 🎉. Thank you very much 🙂