feat(ui): split book-card play action into reader/detail routing
The play button on book cards now opens the reader directly, instead of always going to the detail page. Cards with an active progress sync conflict route the play button to the detail page (which hosts the conflict dialogue and resolves before writing progress), so the user is never silently dropped into the reader with an unresolved conflict. Backend: - Add HasConflict to BookInfo and stamp it via ListSyncConflictsByUser (MarkActiveConflicts / MarkActiveConflictsSections) on the dashboard, bookshelf, series, tag, and search result card builders. - Each page issues a single conflict query regardless of card count. BookCard: - Restructure into a detail link (cover + meta) with the play action as a sibling overlay using a pointer-events split: the container passes clicks through to detail while only the circular button routes to the reader. No nested anchors. - On touch devices (hover: none) the play button stays visible. Fix: carousel nav buttons had opacity-0 without pointer-events-none, so they swallowed hover/clicks over book cards on the dashboard. They are now click-through until the carousel is hovered.
This commit is contained in:
+19
-2
@@ -412,6 +412,7 @@
|
||||
|
||||
/* ---------- Book card (the atomic unit) ---------- */
|
||||
.book-card {
|
||||
position: relative;
|
||||
background-color: var(--bg-secondary);
|
||||
border: 1px solid color-mix(in srgb, var(--text-primary) 6%, transparent);
|
||||
border-radius: 0.75rem;
|
||||
@@ -442,14 +443,20 @@
|
||||
}
|
||||
.book-card-action {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
aspect-ratio: 2 / 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
transition: opacity 0.18s ease;
|
||||
}
|
||||
.book-card:hover .book-card-action {
|
||||
.book-card:hover .book-card-action,
|
||||
.book-card:focus-within .book-card-action {
|
||||
opacity: 1;
|
||||
}
|
||||
.book-card-action-btn {
|
||||
@@ -462,11 +469,21 @@
|
||||
background-color: color-mix(in srgb, var(--accent) 92%, white);
|
||||
color: #fff;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
|
||||
pointer-events: auto;
|
||||
text-decoration: none;
|
||||
}
|
||||
.book-card-meta {
|
||||
background-color: var(--bg-secondary);
|
||||
padding: 0.5rem 0.625rem;
|
||||
}
|
||||
/* On touch devices there is no hover, so the quick-action stays visible and
|
||||
only the circular button itself is clickable (the container passes clicks
|
||||
through to the detail link). */
|
||||
@media (hover: none) {
|
||||
.book-card-action {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Bold accents ---------- */
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user