vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 2.1k Packages Projects Releases Wiki Activity

CAL-1558: Fixed responsiveness of booker for small calendar layout (#8660)

Browse Source 
* CAL-1558: Fixed responsiveness of booker for small calendar layout

* Remove commented code
This commit is contained in:
Jeroen Reumkens
2023-05-04 12:32:22 +01:00
committed by GitHub
parent bd5af9e821
commit 45250f6f3e
2 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/features/bookings/Booker/Booker.tsx
+11 -5
View File
@@ -121,13 +121,19 @@ const BookerComponent = ({ username, eventSlug, month, rescheduleBooking }: Book
<div
style={resizeAnimationConfig[layout]?.[bookerState] || resizeAnimationConfig[layout].default}
className={classNames(
// Size settings are abstracted on their own lines purely for readbility.
// General sizes:
"[--booker-main-width:480px] [--booker-timeslots-width:240px] lg:[--booker-timeslots-width:280px]",
"bg-muted grid max-w-full items-start overflow-clip dark:[color-scheme:dark] md:flex-row",
// Sizes only applicable for small_calendar
layout === "small_calendar" &&
"border-subtle mt-20 min-h-[450px] w-[calc(var(--booker-meta-width)+var(--booker-main-width))] rounded-md border [--booker-meta-width:280px]",
layout !== "small_calendar" &&
"h-auto min-h-screen w-screen [--booker-meta-width:340px] lg:[--booker-meta-width:424px]",
"transition-[width] duration-300"
"w-[calc(var(--booker-meta-width)+var(--booker-main-width))] [--booker-meta-width:240px] lg:[--booker-meta-width:280px]",
// Sizes for fullscreen layouts:
layout !== "small_calendar" && "[--booker-meta-width:340px] lg:[--booker-meta-width:424px]",
// Other styles
"bg-muted grid max-w-full items-start overflow-clip dark:[color-scheme:dark] md:flex-row",
layout === "small_calendar" && "border-subtle mt-20 min-h-[450px] rounded-md border",
layout !== "small_calendar" && "h-auto min-h-screen w-screen",
"transition-[width,max-width] duration-300"
)}>
<AnimatePresence>
<StickyOnDesktop key="meta" className="relative z-10">
packages/features/bookings/Booker/config.ts
+3 -2
View File
@@ -58,9 +58,10 @@ export const resizeAnimationConfig: ResizeAnimationConfig = {
gridTemplateColumns: "var(--booker-meta-width) var(--booker-main-width)",
},
selecting_time: {
width: "calc(var(--booker-meta-width) + var(--booker-main-width) + var(--booker-timeslots-width))",
width: "100%",
maxWidth: "calc(var(--booker-meta-width) + var(--booker-main-width) + var(--booker-timeslots-width))",
gridTemplateAreas: `"meta main timeslots"`,
gridTemplateColumns: "var(--booker-meta-width) var(--booker-main-width) var(--booker-timeslots-width)",
gridTemplateColumns: "var(--booker-meta-width) 1fr var(--booker-timeslots-width)",
},
},
large_calendar: {