Make threedots and metadata buttons always visible on touchscreens

[ToxicFrog]

In normal operation, mousing over a cover darkens it and causes the metadata button (lower left) and threedot menu button (lower right) appear. If you don't have a mouse, though (because, say, you're using codex on a touchscreen). you can't hover and have to guess where they are.

Experimenting with CSS injection I've settled on this for my own install, which makes them always visible (without darkening the cover overall) and puts each one inside a translucent black circle so that it remains visible against lighter covers. There is undoubtedly a more elegant way to do this server-side.

@media (hover: none) {
  /* Metadata and menu buttons are always visible when using a touchscreen. */
  div.cardCoverOverlayBottomRow {
    opacity: 1.0 !important;
  }

  /* And put them in a black circle so we can see them even against light covers,
     since we don't get the darkening of the whole cover without hovering. */
  div.cardCoverOverlayBottomRow button {
    border-radius: 2em;
    background: black;
    opacity: 0.6;
  }
}

[ajslater]

Thinking about this, but am overall satisfied with the tap to activate behavior on touch devices.

[ToxicFrog]

The issue I have is that when they aren't visible I often miss the tap to activate the threedots and end up opening the file instead. The threedots is always at the lower right of the tile, but where the lower right of the tile is isn't always obvious when you have comic covers with weird aspect ratios, because the cover doesn't perfectly fill the tile.

I'm ok just injecting my own CSS to address this on my end if you think it's not a good fit for a builtin feature. (Hmm, maybe CSS-injection-as-a-configuration-knob?)

[ajslater]

I just experimented with this. Exposing the buttons on touch view looks too cluttered to me.

While it enables single tap behavior instead of the current double tap on touch devices, I think double tap is okay behavior on touch screens.

[ajslater]

Android devices do not perform the double tap behavior I mention above. This is indeed a bug and not a UI preference.

[ToxicFrog]

Expanding on this -- on iOS it sounds like tapping once acts as a hover, and tapping again activates. Android and KDE don't have this behaviour; if you tap it activates immediately.

0.10.4 fixed this for Android, but KDE still has the activate-on-single-tap behaviour.

[ajslater]

I changed a small thing circa v0.10.5 that might fix KDE.

if it doesn't loading a web page with this javascript might help me debug the issue:

console.log({ ontouchstart: window.ontouchstart, 
platform: navigator.platform, userAgent: navigator.userAgent, 
maxTouchPoints: navigator.maxTouchPoints, 
msMaxTouchPoints: navigator.msMaxTouchPoints });

[ToxicFrog]

Here's the result from the tablet (KDE, touchscreen, no keyboard/mouse):

{"platform":"Linux x86_64","userAgent":"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896,127 Safari/537.36"","maxTouchPoints":0}

For comparison, here's KDE on my laptop (keyboard and mouse, no touch inputs) in both firefox and chrome:

{"platform":"Linux x86_64","userAgent":"Mozilla/5.0 (X11; Linux x86_64; rv:106.0) Gecko/20100101 Firefox/106.0","maxTouchPoints":0}

So it looks like the tablet is not reporting itself as a touch-capable device. I'm not sure this is something you can fix.

That said, I know it used to report as a touch device, because the @media (hover: none) css used to work and now doesn't -- so there is an issue with my tablet complicating the investigation into this issue. :(

Despite the tablet not reporting as a touch device, @media (hover: none) still works -- so it's not touchable but it does correctly report that it can't do hover gestures. The following injection fixes it on my tablet in 0.14:

@media (hover: none) {
  div.cardControls { opacity: 1.0 !important; }
  span.v-icon.eye { opacity: 0.0; }

  span.cardControlButton button {
    border-radius: 10em;
    background: black;
    opacity: 0.6;
  }
}

[ajslater]

I'm currently upgrading the whole front end to the framework's new major version. The new framework version may have better touch detection, but if it doesn't I can use this, thanks.

[ajslater]

With the release of v1.0.0 and new major frontend version, could you confirm that this behavior is still and issue on that client?

[ToxicFrog]

Still an issue, sadly.

[ajslater]

The latest release includes yet another attempt at detecting touch devices. It might work for this case, but it likely won't.

What I read on the web is that running a desktop with KDE on tablets is fraught with peril and there are a few different techniques for making the touch capability seen to browsers and other programs. Here's one: https://www.reddit.com/r/kde/comments/sg7s0i/kde_on_tablet/ but googling found a few other techniques as well.

Ultimately I don't think I'll be customizing codex for unusual situations like this, as I suspect the responsibility lies on the OS or KDE side.

[ToxicFrog]

Yeah, I think it's entirely reasonable to say "this is an issue with KDE and it doesn't make sense to contort Codex to work around it". I've got my CSS injection to fix it locally and that's sufficient, and if it's working normally on android and iOS that should fix it ~everywhere else since I don't think there's a lot of KDE-based x86 tablets floating around.