icykoneko / ff14-fish-tracker-app

FF14 Fish Tracker App
https://ff14fish.carbuncleplushy.com
MIT License
61 stars 21 forks source link

Touch devices cannot "hover" over bait to get actual names without actually clicking it #69

Open icykoneko opened 3 years ago

icykoneko commented 3 years ago

For touch devices, there needs to be some other way to display the bait name without immediately loading a new tab to GT. Possibly make it so touching the icon first displays the name, and have the name take the user to GT?

Simbiat commented 2 years ago

I would consider a slightly different approach using grid and details tags instead. It will be even more useful on narrow screens (phone in portrait mode for example) and allow using larger images.

You create a grid, where each element currently (and in future) is shown is has appropriate name and placement based on screen width. On narrow screens show only icon, name and window data and nearby respective summary like "More details". Click/tap it - full data is shown, and there you can show full names of baits near (probably under?) their pictures. Maybe even the map image without the need to click on anything (with lazy loading attribute, of course). On wider screens you can other items one by one depending on width, until all of them can fit the screen safely and comfortably. At the same time for easier manageability and more flexibility I'd suggest splitting the bait into 4 "columns" (not td), 1 for each possible cast. In fact, if using details and lazy loading you can hide all but 1st cast and show everything else in the opened details. That could provide a slightly more consistent experience across all screens then.

Another alternative is a small ? icon to the left of each bait icon, that can be clicked to see the name of the bait. But that can provide inconsistent experience across devices and on devices that have both pointer and touch support.

xnuk commented 2 years ago

Bait icons with tiny bait names

I'm using desktop only (so probably different situation with this issue, but anyway), and because of my laziness, I prefer to show bait names at a glance with using this custom user css:

.bait-icon.sprite-icon[data-baitidx][title]::before {
  content: attr(title);
  display: block;
  position: absolute;
  top: 90%;
  right: 15%;
}
icykoneko commented 2 years ago

That actually looks kinda neat. I think it'd just make the phone version of the UI even more cluttered though. I also like Simbiat's proposal above.

Right now though, mobile device users account for ~25% of all usage. I'll hold off for now as there's other UI performance issues that may rework how the table is rendered, designed anyways. Those changes would take priority (if I do it), but I will add the CSS rule hack to the Wiki later.