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

fixed booking buttons on mobile (#682) 

* fixed booking buttons on mobile

* fixed mobile layout for reject and confirm booking
pull/440/head^2
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

88
pages/bookings/index.tsx
View File

@ -8,7 +8,7 @@ import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";
import { DotsHorizontalIcon } from "@heroicons/react/solid";
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 { Button } from "@components/ui/Button";
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">
{!booking.confirmed && !booking.rejected && (
<>
<button
<div className="space-x-2 hidden lg:block">
<Button
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
</button>
<button
</Button>
<Button
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
</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 && (
<div className="space-x-2">
<>
<div className="space-x-2 hidden lg:block">
<Button
data-testid="cancel"
href={"/cancel/" + booking.uid}
@ -116,6 +185,7 @@ export default function Bookings({ bookings }) {
color="secondary">
Reschedule
</Button>
</div>
<Menu as="div" className="inline-block lg:hidden text-left ">
{({ open }) => (
<>
@ -183,7 +253,7 @@ export default function Bookings({ bookings }) {
</>
)}
</Menu>
</div>
</>
)}
{!booking.confirmed && booking.rejected && (
<div className="text-sm text-gray-500">Rejected</div>