k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-10-18 21:16:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(trips): the embedded journal's offsets as classes on its wrapper, not in index.css

Browse Source 
index.css is held at its line baseline. The two variables the embedded journal overrides (--nav-h on the desktop, --m-safe-top on the phone) now sit as arbitrary properties on the wrapper that needs them.
This commit is contained in:
Maurice
2026-10-18 18:04:34 +02:00
parent 889e88c362
commit 89c96ed554
4 changed files with 9 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/index.css
-8
View File
@@ -824,14 +824,6 @@ input[type="number"], input[type="time"], input[type="date"], input[type="dateti
:root { --nav-h: calc(64px + env(safe-area-inset-top, 0px)); }
}
/* A journal shown inside a trip (its Journal tab): the journal's own fixed bars
measure themselves from --nav-h, so below the trip's navbar they also have to
clear the trip's tab bar. */
.trip-embedded-journal { --nav-h: 44px; }
@media (min-width: 768px) {
.trip-embedded-journal { --nav-h: calc(64px + env(safe-area-inset-top, 0px) + 44px); }
}
.dark {
--bg-primary: #121215;
--bg-secondary: #1a1a1e;
client/src/mobile/mobile.css
-4
View File
@@ -132,10 +132,6 @@
to { opacity: 0; transform: translateY(6px); }
}
/* A journal inside a trip's Journal tab starts below the trip's own floating
top controls rather than under them. */
.m-embedded-journal { --m-safe-top: calc(env(safe-area-inset-top, 0px) + 62px); }
.m-sheet-in { animation: m-sheet-in 280ms var(--ease-drawer) both; }
.m-sheet-out { animation: m-sheet-out 280ms var(--ease-drawer) both; }
.m-drawer-in { animation: m-drawer-in 280ms var(--ease-drawer) both; }
client/src/mobile/screens/trip/tabs/MTripTabPanel.tsx
+2 -2
View File
@@ -63,10 +63,10 @@ export default function MTripTabPanel({ planner, shell, tab }: MTripTabPanelProp
case 'roadtrip':
return <MRoadtripTab planner={planner} shell={shell} tab={tab} />
// The journal the trip links: the Journey addon's own phone screen, moved
// below the trip's floating top controls (see .m-embedded-journal).
// below the trip's floating top controls: its bars measure from --m-safe-top.
case 'journal':
return planner.journalId == null ? null : (
<div className="m-embedded-journal absolute inset-0 overflow-hidden">
<div className="absolute inset-0 overflow-hidden [--m-safe-top:calc(env(safe-area-inset-top,0px)+62px)]">
<MJourneyDetail journeyId={planner.journalId} embedded />
</div>
)
client/src/pages/tripPlanner/TripJournalPanel.tsx
+7 -3
View File
@@ -3,13 +3,17 @@ import { JourneyDetailPageDesktop } from '../JourneyDetailPage';
/**
* The trip's Journal tab on the desktop: the Journey addon's own journal view,
* not a copy of it, so the journal looks and works the same in both places and
* stays live through the journey's own sync. The wrapper moves the view's fixed
* bars below the trip's tab bar (see .trip-embedded-journal).
* stays live through the journey's own sync.
*
* The view's fixed bars measure themselves from --nav-h, so the wrapper sets it
* to the navbar plus the trip's 44 px tab bar, and they sit below both.
*/
const BELOW_TRIP_TABS = '[--nav-h:44px] md:[--nav-h:calc(64px+env(safe-area-inset-top,0px)+44px)]';
export default function TripJournalPanel({ journeyId }: { journeyId: number | null }) {
if (journeyId == null) return null;
return (
<div className="trip-embedded-journal absolute inset-0 overflow-y-auto">
<div className={`${BELOW_TRIP_TABS} absolute inset-0 overflow-y-auto`}>
<JourneyDetailPageDesktop journeyId={journeyId} embedded />
</div>
);