Habitica: Items can't be purchased on mobile browser due to tooltip overlap

[shanaqui]

From @ieahleen:

"[Mobile browser] I can't buy the pinned items, tapping on them bring up the tooltip which covers them. In the Market the tooltip doesn't appear on the items and Ican buy them."

I can't replicate this, but here's their screenshots: https://drive.google.com/drive/folders/1bBkpAuQlUKo9Y3LcGegn8YyuciSFgD7l

[GiacomoLaw]

Isn't that what the mobile app is for?

[shanaqui]

It's not usable for everybody, e.g. people with older or incompatible phones. We have no Windows app, for instance.

[GiacomoLaw]

Ah, true. My apologies!

[Rillus]

Two potential solutions here: disable the tooltip for narrow viewports, or add a 'BUY' button to the tooltip.

There's actually some odd behaviour I can see on Chrome/Mac where narrowing the window to single column and hovering over some equipment items makes the tooltips flicker and the item itself unclickable.

Based on this and the complications a 'Buy' button on the tooltip might cause for the UI on full desktop, I'd suggest simply hiding the tooltip on viewports below 768px: the information contained within is accessible by simply clicking the item anyway.

I've not got a local copy of the website running yet, I was just weighing in with my observation, but I'm happy to try and have a look if you agree with my assessment.

[paglias]

I think the idea of hiding the tooltip under 768px makes sense. @Tressley what do you think?

[Tressley]

I agree that hiding the tooltip makes sense for now. 👍

[eduardoltorres]

Hey! Here coming from the Blacksmiths guild.

The screenshots don't work but I agree this sounds like HTML/CSS. I can try to recreate it myself.

Can I work on this?

Edit: @Rillus I don't mean to steal the request. I just re-read your comment and if I understood correctly you were asking first to try and work on this issue. Whichever the situation is, I'm available.

[Rillus]

Hey @eduardoltorres - I've been bogged down with paid work, so still don't have a local version running. I don't mind passing the baton, but don't have the authority to officially authorise anything!

[ieahleen]

I had to clean up my drive
But confirm that the issue is still there
I don't know if with a cursor does any difference, but a touch screen with a small enough browser window cause the tooltip to cover up the item you wanted to buy

[Alys]

@eduardoltorres Thanks! Please go ahead. Comment here if you have any questions.

[eduardoltorres]

Awesome, thank you! @Alys

[eduardoltorres]

Just to make sure I'm understanding correctly, the issue here is buying a pinned item from the market using a mobile browser?

I've tried recreating this through a resized desktop browser and by USB Debugging with a phone. This is an image of the debugging recreation I was trying to make with a phone. For me, there's always the option to scroll down. Please let me know where I'm getting it wrong.

[shanaqui]

My understanding is that it isn't referring to the modal you see when you click on the item, but the pop-up when you hover over an item.

[ieahleen]

The issue is with pinned items in the reward column, when you tap on one the tooltip appear exactly over the item and it is impossible to tap on the item to bring up the modal to buy it

Here a video of me tapping on the item (I will need to remove it at one point, but for now here it is)
https://drive.google.com/file/d/1ktrjpFsUh1XV7wM7QNpMwazTZAp7rb-5/view?usp=drivesdk

[eduardoltorres]

Ok, got it! I managed to at least recreate the tooltip flickering. I'll try to implement the hiding the tooltip approach discussed above. Thanks!

[shanaqui]

@eduardoltorres Are you still working on this one? If so, please let us know!

[eduardoltorres]

Hi @shanaqui!

No, I'm not! I should have notified it before; apologies for any issue caused by this. Feel free to give to someone else.

[shanaqui]

@eduardoltorres Thanks for confirming! I'll mark this as help wanted again. :)

[J-Sanderson]

Hello, is this one still available?

[Alys]

@J-Sanderson It is! I've marked it as in progress for you.

You may want to test the website on a mobile browser before doing anything else to see what the current behaviour is like. This issue has been open for a while so it's possible that other changes have made the behaviour different than described above.

If you decide you'd rather not work on it for any reason, just let us know. :)

[shanaqui]

@J-Sanderson Hi there! Just checking in whether you're still interested in working on this issue.

If we don't hear from you within a week, or you're not interested anymore, I'll mark this as help wanted again. :) No rush to complete a fix or anything, we're just making sure the issue doesn't go stale!

[shanaqui]

Since we haven't heard back, I'm marking this as help wanted again. If you'd like to pick it up again and no one else has started working on it, let us know, @J-Sanderson! :)