mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-24 16:03:02 +00:00
feat(planner): bring the plan tab and every trip dialog into the new look
The Plan tab was the last trip tab still in the old design. It now reads like Bookings, Costs, Lists, Files and Collab, without losing a function: - Day plan: each day is a card with a head band (day tile with weather, stay and rental pills, a "+" menu for place, stay, transport, transit and note), rows with "..." menus, white badges and a white route bar. - Places column: add, search and filters in three rows, a show dropdown, category and rating filters, and a selection bar at the foot. - Place inspector, day details and the stay editor on the shared dialog frame; the place form in the editor look with the name in the head band. - Clicking a booking or transport anywhere on the plan opens the booking detail popup first; Edit leads to the editor. The popup is one host shared with the Bookings and Transports tabs. - Files and Collab dialogs, notes, polls, links and chat moved to the same frame; shared DialogShell and dialogParts hold the building blocks. - The map hover card shows the place photo and follows the theme. Every new and reworded string is translated into all locales, and a few older English leftovers (help center, cost split, import hints) with them. Phone screens keep their own look.
This commit is contained in:
+21
-15
@@ -1514,6 +1514,21 @@ img[alt="TREK"] {
|
||||
.collab-link-chip__action { width: 30px; height: 30px; margin: -4px 0; }
|
||||
}
|
||||
|
||||
/* The desktop's links panel is tinted like the other Collab panels, so a chip sits on
|
||||
the card colour as a card, the way notes and polls do; the phone keeps its pill. */
|
||||
.collab-link-grid--desk .collab-link-chip {
|
||||
padding: 8px 8px 8px 8px;
|
||||
border-radius: 14px;
|
||||
background: var(--bg-card);
|
||||
box-shadow: none;
|
||||
}
|
||||
.collab-link-grid--desk .collab-link-chip:hover, .collab-link-grid--desk .collab-link-chip:focus-within {
|
||||
transform: none;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.collab-link-grid--desk .collab-link-chip--pinned { background: var(--accent-subtle); }
|
||||
.collab-link-grid--desk .collab-link-chip__icon { width: 28px; height: 28px; flex-basis: 28px; border-radius: 9px; background: var(--bg-secondary); }
|
||||
|
||||
/* Markdown in Collab Notes */
|
||||
.collab-note-md strong, .collab-note-md-full strong { font-weight: 700 !important; }
|
||||
.collab-note-md em, .collab-note-md-full em { font-style: italic !important; }
|
||||
@@ -1534,22 +1549,13 @@ img[alt="TREK"] {
|
||||
.collab-note-md-full th, .collab-note-md-full td { border: 1px solid var(--border-primary); padding: 4px 8px; font-size: 0.9em; }
|
||||
.collab-note-md-full hr { border: none; border-top: 1px solid var(--border-primary); margin: 0.8em 0; }
|
||||
|
||||
/* Day-plan header action grid (edit / +transport / note / collapse) */
|
||||
.dp-day-actions button {
|
||||
color: var(--text-faint);
|
||||
background: transparent;
|
||||
transition: background-color 0.12s ease, color 0.12s ease;
|
||||
}
|
||||
.dp-day-actions button:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
/* Reveal the action grid only when hovering the day row (pointer devices).
|
||||
Touch devices (hover: none) keep it visible; the selected day stays visible too. */
|
||||
/* The day head's "+" (place, transport, transit, note): shown while the head is
|
||||
hovered, focused or the day is open. Touch devices (hover: none) keep it visible. */
|
||||
@media (hover: hover) {
|
||||
.dp-day-actions { opacity: 0; transition: opacity 0.12s ease; }
|
||||
.dp-day-header:hover .dp-day-actions,
|
||||
.dp-day-header[data-selected="true"] .dp-day-actions { opacity: 1; }
|
||||
.dp-day-tools { opacity: 0; transition: opacity 0.12s ease; }
|
||||
.dp-day-header:hover .dp-day-tools,
|
||||
.dp-day-header:focus-within .dp-day-tools,
|
||||
.dp-day-header[data-selected="true"] .dp-day-tools { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Planner rows a finger can pick up (#1616). A long press is what arms the drag,
|
||||
|
||||
Reference in New Issue
Block a user