mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-19 05:26:47 +00:00
fix(planner): a day without a stay centres its name on the day badge
This commit is contained in:
@@ -4464,6 +4464,21 @@ describe('DayPlanSidebar', () => {
|
||||
expect(onPlaceClick).toHaveBeenCalledWith(8)
|
||||
})
|
||||
|
||||
it('FE-PLANNER-DAYPLAN-176c: a day without a stay centres its name on the badge, a day with one keeps it at the top', () => {
|
||||
const days = [
|
||||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||||
buildDay({ id: 12, date: '2025-06-03', title: 'Day 3' }),
|
||||
]
|
||||
const accommodations: Accommodation[] = [
|
||||
{ id: 1, trip_id: 1, start_day_id: 11, end_day_id: 12, place_id: 9, place_lat: 51.5, place_lng: -0.12, place_name: 'Hotel' },
|
||||
]
|
||||
render(<DayPlanSidebar {...makeDefaultProps({ days, accommodations })} />)
|
||||
expect(dayHeader('Day 1').style.alignItems).toBe('center')
|
||||
expect(dayHeader('Day 1').querySelector('[data-dp="day-pill"]')).toBeNull()
|
||||
expect(dayHeader('Day 2').style.alignItems).toBe('flex-start')
|
||||
})
|
||||
|
||||
it('FE-PLANNER-DAYPLAN-176b: a booked stay opens its booking from the pill, the name still opens the place (#2363)', async () => {
|
||||
const user = userEvent.setup()
|
||||
const days = [
|
||||
|
||||
@@ -1614,6 +1614,9 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
|
||||
return 0
|
||||
})
|
||||
const activeRentals = getActiveRentalsForDay(day.id)
|
||||
// A day with pills under its name keeps the name at the badge's top edge; a day
|
||||
// with only its name centres it on the badge instead of leaving it hanging high.
|
||||
const hasDayPills = dayAccs.length > 0 || activeRentals.length > 0 || !!dayTint?.label
|
||||
// Everything a day can be given, behind one "+" rather than a grid of four icons.
|
||||
const addItems = [
|
||||
onCreatePlaceForDay && { label: t('dayplan.addPlaceHere'), icon: MapPin, onClick: () => onCreatePlaceForDay(day.id) },
|
||||
@@ -1664,7 +1667,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
|
||||
onDrop={e => handleDropOnDay(e, day.id)}
|
||||
onContextMenu={canEditDays ? e => ctxMenu.open(e, dayMenuItems) : undefined}
|
||||
style={{
|
||||
display: 'flex', alignItems: 'flex-start', gap: 10,
|
||||
display: 'flex', alignItems: hasDayPills ? 'flex-start' : 'center', gap: 10,
|
||||
paddingBlock: 10, paddingInlineEnd: 8, paddingInlineStart: 10,
|
||||
cursor: 'pointer',
|
||||
background: isDragTarget ? DAY_HEAD_DROP : (isSelected ? DAY_HEAD_SELECTED : headerTintBg),
|
||||
@@ -1708,7 +1711,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="min-w-0 flex-1 pt-px">
|
||||
<div className={`min-w-0 flex-1 ${hasDayPills ? 'pt-px' : ''}`}>
|
||||
<div className="flex min-w-0 items-baseline gap-2">
|
||||
<span className="min-w-0 truncate font-bold text-content" style={fs(13.5, 'body')}>
|
||||
{heading.primary}
|
||||
@@ -1719,7 +1722,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{(dayAccs.length > 0 || activeRentals.length > 0 || dayTint?.label) && (
|
||||
{hasDayPills && (
|
||||
<div className="mt-1.5 flex min-w-0 flex-wrap items-center gap-1">
|
||||
{dayAccs.map(acc => {
|
||||
const isCheckIn = acc.start_day_id === day.id
|
||||
|
||||
Reference in New Issue
Block a user