fixed booking buttons on mobile (#682)
* fixed booking buttons on mobile * fixed mobile layout for reject and confirm bookingpull/440/head^2
Peer_Rich
GitHub
parent
06f5559ca0
commit
4c6bf96213
|
|
@ -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,20 +89,89 @@ 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">
|
||||||
|
<Button
|
||||||
onClick={() => confirmBookingHandler(booking, true)}
|
onClick={() => confirmBookingHandler(booking, true)}
|
||||||
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">
|
StartIcon={CheckIcon}
|
||||||
|
color="secondary">
|
||||||
Confirm
|
Confirm
|
||||||
</button>
|
</Button>
|
||||||
<button
|
<Button
|
||||||
onClick={() => confirmBookingHandler(booking, false)}
|
onClick={() => confirmBookingHandler(booking, false)}
|
||||||
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">
|
StartIcon={BanIcon}
|
||||||
|
color="secondary">
|
||||||
Reject
|
Reject
|
||||||
</button>
|
</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">
|
<>
|
||||||
|
<div className="space-x-2 hidden lg:block">
|
||||||
<Button
|
<Button
|
||||||
data-testid="cancel"
|
data-testid="cancel"
|
||||||
href={"/cancel/" + booking.uid}
|
href={"/cancel/" + booking.uid}
|
||||||
|
|
@ -116,6 +185,7 @@ export default function Bookings({ bookings }) {
|
||||||
color="secondary">
|
color="secondary">
|
||||||
Reschedule
|
Reschedule
|
||||||
</Button>
|
</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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue