mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

fixed layout for bookings on mobile

Browse source
This commit is contained in:
Peer Richelsen 2021-08-02 18:54:27 +02:00
parent b11cace4fa
commit a35ac3487b
1 changed files with 19 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
pages/bookings/index.tsx
View file

@ -32,7 +32,7 @@ export default function Bookings({ bookings }) {
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<Shell heading="Bookings" subtitle="See upcoming and past events booked through your event type links."> <Shell heading="Bookings" subtitle="See upcoming and past events booked through your event type links.">
<div className="flex flex-col"> <div className="-mx-4 sm:mx-auto flex flex-col">
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8"> <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-sm"> <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-sm">
@ -43,10 +43,7 @@ export default function Bookings({ bookings }) {
.concat(bookings.filter((booking) => booking.confirmed || booking.rejected)) .concat(bookings.filter((booking) => booking.confirmed || booking.rejected))
.map((booking) => ( .map((booking) => (
<tr key={booking.id}> <tr key={booking.id}>
<td <td className={"px-6 py-4" + (booking.rejected ? " line-through" : "")}>
className={
"px-6 py-4 whitespace-nowrap" + (booking.rejected ? " line-through" : "")
}>
{!booking.confirmed && !booking.rejected && ( {!booking.confirmed && !booking.rejected && (
<span className="ml-2 inline-flex items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800"> <span className="ml-2 inline-flex items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
Unconfirmed Unconfirmed
@ -56,13 +53,20 @@ export default function Bookings({ bookings }) {
{booking.attendees[0].name} {booking.attendees[0].name}
</div> </div>
<div className="text-sm text-gray-500">{booking.attendees[0].email}</div> <div className="text-sm text-gray-500">{booking.attendees[0].email}</div>
<div
style={{ maxWidth: 150 }}
className="block lg:hidden font-medium text-xs text-gray-900 truncate">
{booking.title}
</div>
</td> </td>
<td <td
className={ className={
"px-6 py-4 max-w-20 w-full" + (booking.rejected ? " line-through" : "") "px-6 py-4 max-w-20 w-full" + (booking.rejected ? " line-through" : "")
}> }>
<div className="text-sm text-neutral-900 font-medium">{booking.title}</div> <div className="hidden lg:block text-sm text-neutral-900 font-medium">
<div className="text-sm text-neutral-500"> {booking.title}
</div>
<div className="hidden lg:block text-sm text-neutral-500">
You and {booking.attendees[0].name} You and {booking.attendees[0].name}
</div> </div>
</td> </td>
@ -74,28 +78,28 @@ export default function Bookings({ bookings }) {
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
{!booking.confirmed && !booking.rejected && ( {!booking.confirmed && !booking.rejected && (
<> <>
<a <button
onClick={() => confirmBookingHandler(booking, true)} onClick={() => confirmBookingHandler(booking, true)}
className="cursor-pointer text-blue-600 hover:text-blue-900"> className="text-xs sm:text-sm inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
Confirm Confirm
</a> </button>
<a <button
onClick={() => confirmBookingHandler(booking, false)} onClick={() => confirmBookingHandler(booking, false)}
className="cursor-pointer ml-4 text-blue-600 hover:text-blue-900"> className="text-xs sm:text-sm ml-4 inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
Reject Reject
</a> </button>
</> </>
)} )}
{booking.confirmed && !booking.rejected && ( {booking.confirmed && !booking.rejected && (
<> <>
<a <a
href={window.location.href + "/../cancel/" + booking.uid} href={window.location.href + "/../cancel/" + booking.uid}
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black mr-2"> className="text-xs sm:text-sm inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
Cancel Cancel
</a> </a>
<a <a
href={window.location.href + "/../reschedule/" + booking.uid} href={window.location.href + "/../reschedule/" + booking.uid}
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black mr-2"> className="text-xs sm:text-sm inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
Reschedule Reschedule
</a> </a>
</> </>