grabowski/trip-plan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add drag & drop reordering of trips on the dashboard

Browse Source 
- trip_members.sort_order (per-user, migrated) drives GET /api/trips order
- PATCH /api/trips/:id/order updates only the caller's membership row
- Trip cards get a drag handle reusing the generalized row-reorder helper;
  clicking the card still navigates
This commit is contained in:
grabowski
2026-07-20 09:41:43 +07:00
parent d393e16ae1
commit b452430415
8 changed files with 163 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/styles.css
+9
View File
@@ -183,10 +183,19 @@ textarea.input { resize: vertical; }
.trip-card { display: flex; flex-direction: column; gap: 0.6rem; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
.trip-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.trip-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.trip-card-top-right { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.trip-card-name { font-size: 1.1rem; }
.trip-card-dates { color: var(--text-muted); font-size: 0.9rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.trip-card-countdown { font-size: 0.72rem; font-weight: 700; color: var(--brand-dark); background: var(--brand-soft); padding: 0.1rem 0.45rem; border-radius: 999px; }
.trip-card-meta { display: flex; gap: 1rem; font-size: 0.85rem; color: var(--text-muted); margin-top: auto; }
/* Drag-to-reorder trip cards: same grip + insertion-indicator convention as
the day editor's .entry-drag-handle / .entry-row (see dragdrop.js). */
.trip-drag-handle { flex-shrink: 0; cursor: grab; color: var(--text-faint); font-size: 0.95rem; line-height: 1; letter-spacing: -1px; user-select: none; }
.trip-drag-handle:active { cursor: grabbing; }
.trip-card.dragging { opacity: 0.4; }
.trip-card.drop-before { box-shadow: inset 0 3px 0 var(--brand); }
.trip-card.drop-after { box-shadow: inset 0 -3px 0 var(--brand); }
.role-badge { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; }
.role-owner { background: #fef3c7; color: #92400e; }
.role-editor { background: var(--brand-soft); color: var(--brand-dark); }