diff --git a/client/src/components/Collections/CollectionPlaceDetail.tsx b/client/src/components/Collections/CollectionPlaceDetail.tsx index e48da127c..48ad1ba89 100644 --- a/client/src/components/Collections/CollectionPlaceDetail.tsx +++ b/client/src/components/Collections/CollectionPlaceDetail.tsx @@ -222,35 +222,12 @@ export default function CollectionPlaceDetail({
{/* Meta (view only) */} - {!editing && (place.address || navigationTargets.length > 0) && ( + {!editing && place.address && (
{place.address && {place.address}} {/* Same picker as inside a trip (#1455). A saved place is somewhere you intend to go, and until now the only way to get directions was to add it to a trip first. */} - {navigationTargets.length > 0 && ( - <> - - {navOpen && ( - setNavOpen(false)} - /> - )} - - )}
)} @@ -371,6 +348,32 @@ export default function CollectionPlaceDetail({ <> {canEdit && } + {/* Beside the other two rather than up by the address: getting directions is + something you DO with the place, like editing it or copying it into a + trip, and the row of things you do belongs in one place. */} + {navigationTargets.length > 0 && ( + <> + + {navOpen && ( + setNavOpen(false)} + /> + )} + + )}
{canDelete && } diff --git a/client/src/styles/collections.css b/client/src/styles/collections.css index 8171c8e2b..1586e6b2d 100644 --- a/client/src/styles/collections.css +++ b/client/src/styles/collections.css @@ -444,9 +444,6 @@ .trek-dash .col-detail-addr svg { flex-shrink: 0; } /* Directions (#1455): sits on the meta line beside the address, quieter than the link chips below — it is an action on the place, not a piece of it. */ -.trek-dash .col-detail-nav { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); transition: background .12s, color .12s; white-space: nowrap; } -.trek-dash .col-detail-nav:hover { background: var(--surface-3, var(--surface-2)); color: var(--ink); } -.trek-dash .col-detail-nav svg { flex-shrink: 0; } /* status segmented control */ .trek-dash .col-detail-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); } @@ -482,8 +479,11 @@ /* footer action bar */ .trek-dash .col-detail-footer { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); flex-shrink: 0; } .trek-dash .col-detail-footer-spacer { flex: 1 1 auto; } -.trek-dash .col-detail-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2); transition: background .12s, color .12s; } +/* Pill-shaped, the way the navigation button already was: the footer is one row of + things you do with the place, and it should read as one row. */ +.trek-dash .col-detail-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); transition: background .12s, color .12s; white-space: nowrap; } .trek-dash .col-detail-btn:hover { background: var(--surface); color: var(--ink); } +.trek-dash .col-detail-btn svg { flex-shrink: 0; } .trek-dash .col-detail-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); } .trek-dash .col-detail-btn.danger { color: oklch(0.6 0.2 25); border-color: transparent; background: transparent; } .trek-dash .col-detail-btn.danger:hover { background: oklch(0.6 0.2 25 / .12); }