hide preview and copy link button on mobile

This commit is contained in:
Peer Richelsen 2021-08-05 21:03:33 +02:00
parent 6fd7eee070
commit 9b9db3565a
2 changed files with 134 additions and 133 deletions

View file

@ -123,7 +123,7 @@ export default function Bookings({ bookings }) {
{({ open }) => ( {({ open }) => (
<> <>
<div> <div>
<Menu.Button className="text-neutral-400 mt-1"> <Menu.Button className="text-neutral-400 mt-1 p-2 border border-transparent hover:border-gray-200">
<span className="sr-only">Open options</span> <span className="sr-only">Open options</span>
<DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" /> <DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" />
</Menu.Button> </Menu.Button>

View file

@ -180,11 +180,11 @@ export default function Availability({ user, types }) {
<ul className="divide-y divide-neutral-200"> <ul className="divide-y divide-neutral-200">
{types.map((type) => ( {types.map((type) => (
<li key={type.id}> <li key={type.id}>
<Link href={"/event-types/" + type.id}> <div className="hover:bg-neutral-50">
<a className="block hover:bg-neutral-50">
<div className="px-4 py-4 flex items-center sm:px-6"> <div className="px-4 py-4 flex items-center sm:px-6">
<div className="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between"> <Link href={"/event-types/" + type.id}>
<div className="truncate"> <a className="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
<span className="truncate ">
<div className="flex text-sm"> <div className="flex text-sm">
<p className="font-medium text-neutral-900 truncate">{type.title}</p> <p className="font-medium text-neutral-900 truncate">{type.title}</p>
{type.hidden && ( {type.hidden && (
@ -216,8 +216,11 @@ export default function Availability({ user, types }) {
<p>{type.description.substring(0, 100)}</p> <p>{type.description.substring(0, 100)}</p>
</div> </div>
</div> </div>
</div> </span>
<div className="mt-4 flex-shrink-0 sm:mt-0 sm:ml-5"> </a>
</Link>
<div className="hidden sm:flex mt-4 flex-shrink-0 sm:mt-0 sm:ml-5">
<div className="flex overflow-hidden space-x-5"> <div className="flex overflow-hidden space-x-5">
<Link href={"/" + session.user.username + "/" + type.slug}> <Link href={"/" + session.user.username + "/" + type.slug}>
<a className="text-neutral-400 p-2 border border-transparent hover:border-gray-200"> <a className="text-neutral-400 p-2 border border-transparent hover:border-gray-200">
@ -235,13 +238,12 @@ export default function Availability({ user, types }) {
</button> </button>
</div> </div>
</div> </div>
</div> <div className="flex sm:hidden ml-5 flex-shrink-0">
<div className="ml-5 flex-shrink-0">
<Menu as="div" className="inline-block text-left"> <Menu as="div" className="inline-block text-left">
{({ open }) => ( {({ open }) => (
<> <>
<div> <div>
<Menu.Button className="text-neutral-400 mt-1 text-neutral-400 p-2 border border-transparent hover:border-gray-200"> <Menu.Button className="text-neutral-400 mt-1 p-2 border border-transparent hover:border-gray-200">
<span className="sr-only">Open options</span> <span className="sr-only">Open options</span>
<DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" /> <DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" />
</Menu.Button> </Menu.Button>
@ -344,8 +346,7 @@ export default function Availability({ user, types }) {
</Menu> </Menu>
</div> </div>
</div> </div>
</a> </div>
</Link>
</li> </li>
))} ))}
</ul> </ul>