fix(rows): open on the first tap on iPhone, and round the hover highlight
On a touch screen a :hover on the tap target makes iOS spend the first tap applying the hover and only open on the second — the double-tap Kristian hit on tasks (and notes). The row hover is gated behind @media (hover: hover) now, so a touch has no hover to apply and the first tap opens. The note row's action buttons, which the hover used to reveal, are shown outright on touch instead. And the task-row hover highlight is a rounded box (border radius on the row), the same corner as a note in the list. Co-Authored-By: Claude Opus 4.8 <[email protected]>
|
Before Width: | Height: | Size: 248 KiB After Width: | Height: | Size: 248 KiB |
|
Before Width: | Height: | Size: 308 KiB After Width: | Height: | Size: 308 KiB |
|
Before Width: | Height: | Size: 228 KiB After Width: | Height: | Size: 228 KiB |
|
Before Width: | Height: | Size: 147 KiB After Width: | Height: | Size: 148 KiB |
|
Before Width: | Height: | Size: 333 KiB After Width: | Height: | Size: 334 KiB |
|
Before Width: | Height: | Size: 245 KiB After Width: | Height: | Size: 245 KiB |
|
Before Width: | Height: | Size: 282 KiB After Width: | Height: | Size: 284 KiB |
|
Before Width: | Height: | Size: 370 KiB After Width: | Height: | Size: 370 KiB |
|
Before Width: | Height: | Size: 356 KiB After Width: | Height: | Size: 355 KiB |
|
Before Width: | Height: | Size: 229 KiB After Width: | Height: | Size: 231 KiB |
|
Before Width: | Height: | Size: 253 KiB After Width: | Height: | Size: 253 KiB |
|
Before Width: | Height: | Size: 238 KiB After Width: | Height: | Size: 245 KiB |
|
Before Width: | Height: | Size: 243 KiB After Width: | Height: | Size: 246 KiB |
|
Before Width: | Height: | Size: 243 KiB After Width: | Height: | Size: 245 KiB |
|
Before Width: | Height: | Size: 218 KiB After Width: | Height: | Size: 217 KiB |
|
Before Width: | Height: | Size: 227 KiB After Width: | Height: | Size: 227 KiB |
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
@@ -228,13 +228,21 @@
|
||||
align-items: flex-start;
|
||||
padding: var(--s3) var(--s2);
|
||||
border-bottom: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
transition:
|
||||
opacity var(--medium) var(--ease),
|
||||
transform var(--medium) var(--ease);
|
||||
}
|
||||
|
||||
.row:hover {
|
||||
background: var(--surface);
|
||||
/* Hover only where there is a real pointer. On a touch screen a :hover on the tap
|
||||
target makes iOS spend the first tap applying the hover and only open on the
|
||||
second — the "double-tap" on iPhone. With no hover to apply, the first tap opens
|
||||
the task. The rounded corners are on the row itself, so the highlight is a
|
||||
rounded box like a note in the list. */
|
||||
@media (hover: hover) {
|
||||
.row:hover {
|
||||
background: var(--surface);
|
||||
}
|
||||
}
|
||||
|
||||
/* The exit: a short lift and fade, so completing something reads as the task
|
||||
|
||||
@@ -1495,8 +1495,21 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.row:hover {
|
||||
background: var(--surface);
|
||||
/* Pointer only. On a touch screen a :hover on the tap target costs a tap — iOS
|
||||
spends the first applying the hover and opens on the second. Gated, the first
|
||||
tap opens the note. The row's buttons are shown outright on touch below, since
|
||||
there is no hover to reveal them. */
|
||||
@media (hover: hover) {
|
||||
.row:hover {
|
||||
background: var(--surface);
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
.star,
|
||||
.archive-one {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.row.on {
|
||||
|
||||