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

Add drag & drop for entries and per-stay band colours

Browse Source 
Calendar chips can be dragged onto another in-range day (multi-day entries shift end_date by the same delta in one PATCH); day-editor rows get a drag handle to reorder within a day, patching sort_order only for changed positions. Continues/dropoff ghost chips and stay bands are not draggable; touch devices fall back to the existing click/edit flow. Each stay band now gets a deterministic colour from an 8-hue palette by chronological index, mirrored as dots in the summary Areas list.
This commit is contained in:
grabowski
2026-07-19 02:09:26 +07:00
parent 2eda9e4f6d
commit b066e7b885
6 changed files with 225 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/styles.css
+16
View File
@@ -255,6 +255,12 @@ textarea.input { resize: vertical; }
.chip-icon { flex-shrink: 0; }
.chip-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Drag & drop: chips are drag sources, in-range days are drop targets. */
.cal-chip-draggable { cursor: grab; }
.cal-chip-draggable:active { cursor: grabbing; }
.cal-chip.dragging { opacity: 0.4; }
.cal-day-drop { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); background: var(--brand-soft); }
/* ---------- Detail grid (map + summary) ---------- */
.detail-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 1.2rem; align-items: start; }
.map-section, .summary-section { display: flex; flex-direction: column; }
@@ -294,6 +300,8 @@ textarea.input { resize: vertical; }
.loc-block h3 { margin-bottom: 0.5rem; }
.loc-order { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.area-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.area-item { display: flex; align-items: center; gap: 0.4rem; }
.area-dot { flex-shrink: 0; width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; }
/* ---------- Slide-over day editor ---------- */
.overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 50; display: flex; justify-content: flex-end; animation: fade 0.15s ease; }
@@ -315,6 +323,14 @@ textarea.input { resize: vertical; }
.entry-details { font-size: 0.84rem; color: var(--text-muted); margin-top: 0.2rem; white-space: pre-wrap; }
.entry-actions { display: flex; gap: 0.25rem; }
/* Drag-to-reorder: left grip handle plus top/bottom insertion indicators
(inset box-shadow lines so they don't shift the row's layout). */
.entry-drag-handle { flex-shrink: 0; display: flex; align-items: center; align-self: stretch; padding: 0 0.1rem; cursor: grab; color: var(--text-faint); font-size: 0.95rem; line-height: 1; letter-spacing: -1px; user-select: none; }
.entry-drag-handle:active { cursor: grabbing; }
.entry-row.dragging { opacity: 0.4; }
.entry-row.drop-before { box-shadow: inset 0 3px 0 var(--brand); }
.entry-row.drop-after { box-shadow: inset 0 -3px 0 var(--brand); }
.entry-form { display: flex; flex-direction: column; gap: 0.8rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.loc-field { position: relative; }
.loc-results { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 0.3rem; overflow: hidden; }