thepra/decePubClient
1
0 Fork 0
Code Issues Pull Requests Actions Projects Releases 1 Wiki Activity

Nerd stats open with a tap

Browse Source 
On a touch screen a nerd-stats tooltip showed only through the browser faking hover, unreliably, and couldn't be
scrolled. Where the pointer can't hover (AppStatusService.CanHover), a tap on a NerdTip now opens its rows in a sheet
from the bottom; the trigger is focusable, says it opens a dialog, and is at least 44px on touch. A closed tooltip takes
no room any more (daisyUI only made it transparent, and one past a card's edge made a phone's feed scroll sideways),
and on touch it never shows. The rows are a component of their own (NerdRows), at 12px on phones. A card's More menu
has a Details entry on phones that gathers the post's, its author's, its place's or CDN's and its counts' rows in one
sheet. A picture's tip doesn't open on a tap, the picture does.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
This commit is contained in:
thepraandClaude Opus 5.5 committed 2026-10-06 23:36:03 +02:00
1 parent 765220059d
commit 89cef25def
8 files changed
+135 -24
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Styles/feed.css
+13 -1
View File
@@ -62,13 +62,25 @@
padding-inline-start: 1.25rem;
}
/* daisyUI's tooltip is a pill; a block of nerd stats needs the corners of a box. */
/* daisyUI's tooltip is a pill; a block of nerd stats needs the corners of a box. Hidden, it takes no room (daisyUI
only makes it transparent, and one past a card's edge made a phone's feed scroll sideways), and on a touch screen
it never shows: a tap opens the rows in a sheet instead (NerdTip). */
.tooltip-content:has(> .nerd-stats) {
border-radius: var(--radius-box);
padding: 0.5rem 0.65rem;
max-width: min(22rem, 90vw);
}
.tooltip:not(:hover, :focus-within, .tooltip-open) > .tooltip-content:has(> .nerd-stats) {
display: none;
}
@media (hover: none) {
.tooltip-content:has(> .nerd-stats) {
display: none;
}
}
.float-tooltip-kap {
padding: 0 !important;
background: transparent !important;