public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed layout for bookings on mobile

pull/401/head
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" />
</Head>
<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="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">
@ -43,10 +43,7 @@ export default function Bookings({ bookings }) {
.concat(bookings.filter((booking) => booking.confirmed || booking.rejected))
.map((booking) => (
<tr key={booking.id}>
<td
className={
"px-6 py-4 whitespace-nowrap" + (booking.rejected ? " line-through" : "")
}>
<td className={"px-6 py-4" + (booking.rejected ? " line-through" : "")}>
{!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">
Unconfirmed
@ -56,13 +53,20 @@ export default function Bookings({ bookings }) {
{booking.attendees[0].name}
</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
className={
"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="text-sm text-neutral-500">
<div className="hidden lg:block text-sm text-neutral-900 font-medium">
{booking.title}
</div>
<div className="hidden lg:block text-sm text-neutral-500">
You and {booking.attendees[0].name}
</div>
</td>
@ -74,28 +78,28 @@ export default function Bookings({ bookings }) {
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
{!booking.confirmed && !booking.rejected && (
<>
<a
<button
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
</a>
<a
</button>
<button
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
</a>
</button>
</>
)}
{booking.confirmed && !booking.rejected && (
<>
<a
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
</a>
<a
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
</a>
</>