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 }) => (
<>
<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>
<DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" />
</Menu.Button>

View file

@ -180,11 +180,11 @@ export default function Availability({ user, types }) {
<ul className="divide-y divide-neutral-200">
{types.map((type) => (
<li key={type.id}>
<Link href={"/event-types/" + type.id}>
<a className="block hover:bg-neutral-50">
<div className="hover:bg-neutral-50">
<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">
<div className="truncate">
<Link href={"/event-types/" + type.id}>
<a className="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
<span className="truncate ">
<div className="flex text-sm">
<p className="font-medium text-neutral-900 truncate">{type.title}</p>
{type.hidden && (
@ -216,8 +216,11 @@ export default function Availability({ user, types }) {
<p>{type.description.substring(0, 100)}</p>
</div>
</div>
</div>
<div className="mt-4 flex-shrink-0 sm:mt-0 sm:ml-5">
</span>
</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">
<Link href={"/" + session.user.username + "/" + type.slug}>
<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>
</div>
</div>
</div>
<div className="ml-5 flex-shrink-0">
<div className="flex sm:hidden ml-5 flex-shrink-0">
<Menu as="div" className="inline-block text-left">
{({ open }) => (
<>
<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>
<DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" />
</Menu.Button>
@ -344,8 +346,7 @@ export default function Availability({ user, types }) {
</Menu>
</div>
</div>
</a>
</Link>
</div>
</li>
))}
</ul>