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

fixed booking buttons on mobile (#682)

Browse source 
* fixed booking buttons on mobile

* fixed mobile layout for reject and confirm booking
This commit is contained in:
Peer_Rich 2021-09-17 20:25:23 +01:00 committed by GitHub
parent 06f5559ca0
commit 4c6bf96213
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 96 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
pages/bookings/index.tsx
View file

@ -8,7 +8,7 @@ import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react"; import { Menu, Transition } from "@headlessui/react";
import { DotsHorizontalIcon } from "@heroicons/react/solid"; import { DotsHorizontalIcon } from "@heroicons/react/solid";
import classNames from "@lib/classNames"; import classNames from "@lib/classNames";
import { ClockIcon, XIcon } from "@heroicons/react/outline"; import { ClockIcon, XIcon, CheckIcon, BanIcon } from "@heroicons/react/outline";
import Loader from "@components/Loader"; import Loader from "@components/Loader";
import { Button } from "@components/ui/Button"; import { Button } from "@components/ui/Button";
import { getSession } from "@lib/auth"; import { getSession } from "@lib/auth";
@ -89,33 +89,103 @@ 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 && (
<> <>
<button <div className="space-x-2 hidden lg:block">
onClick={() => confirmBookingHandler(booking, true)} <Button
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"> onClick={() => confirmBookingHandler(booking, true)}
Confirm StartIcon={CheckIcon}
</button> color="secondary">
<button Confirm
onClick={() => confirmBookingHandler(booking, false)} </Button>
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"> <Button
Reject onClick={() => confirmBookingHandler(booking, false)}
</button> StartIcon={BanIcon}
color="secondary">
Reject
</Button>
</div>
<Menu as="div" className="inline-block lg:hidden text-left ">
{({ open }) => (
<>
<div>
<Menu.Button className="text-neutral-400 mt-1 p-2 border border-transparent hover:border-gray-200">
<span className="sr-only">Open options</span>
<DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" />
</Menu.Button>
</div>
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95">
<Menu.Items
static
className="origin-top-right absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none divide-y divide-neutral-100">
<div className="py-1">
<Menu.Item>
{({ active }) => (
<span
onClick={() => confirmBookingHandler(booking, true)}
className={classNames(
active
? "bg-neutral-100 text-neutral-900"
: "text-neutral-700",
"group flex items-center px-4 py-2 text-sm font-medium"
)}>
<CheckIcon
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
Confirm
</span>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<span
onClick={() => confirmBookingHandler(booking, false)}
className={classNames(
active
? "bg-neutral-100 text-neutral-900"
: "text-neutral-700",
"group flex items-center px-4 py-2 text-sm w-full font-medium"
)}>
<BanIcon
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
Reject
</span>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</>
)}
</Menu>
</> </>
)} )}
{booking.confirmed && !booking.rejected && ( {booking.confirmed && !booking.rejected && (
<div className="space-x-2"> <>
<Button <div className="space-x-2 hidden lg:block">
data-testid="cancel" <Button
href={"/cancel/" + booking.uid} data-testid="cancel"
StartIcon={XIcon} href={"/cancel/" + booking.uid}
color="secondary"> StartIcon={XIcon}
Cancel color="secondary">
</Button> Cancel
<Button </Button>
href={"reschedule/" + booking.uid} <Button
StartIcon={ClockIcon} href={"reschedule/" + booking.uid}
color="secondary"> StartIcon={ClockIcon}
Reschedule color="secondary">
</Button> Reschedule
</Button>
</div>
<Menu as="div" className="inline-block lg:hidden text-left "> <Menu as="div" className="inline-block lg:hidden text-left ">
{({ open }) => ( {({ open }) => (
<> <>
@ -183,7 +253,7 @@ export default function Bookings({ bookings }) {
</> </>
)} )}
</Menu> </Menu>
</div> </>
)} )}
{!booking.confirmed && booking.rejected && ( {!booking.confirmed && booking.rejected && (
<div className="text-sm text-gray-500">Rejected</div> <div className="text-sm text-gray-500">Rejected</div>