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

fixed mobile booking layout for long descriptions

Browse source
This commit is contained in:
Peer Richelsen 2021-09-24 18:03:09 +01:00
parent 50367c236a
commit 889b3f36ae
1 changed files with 39 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
components/eventtype/EventTypeDescription.tsx
View file

@ -1,10 +1,4 @@
import { import { ClockIcon, CreditCardIcon, UserIcon, UsersIcon } from "@heroicons/react/solid";
ClockIcon,
CreditCardIcon,
InformationCircleIcon,
UserIcon,
UsersIcon,
} from "@heroicons/react/solid";
import { SchedulingType } from "@prisma/client"; import { SchedulingType } from "@prisma/client";
import { Prisma } from "@prisma/client"; import { Prisma } from "@prisma/client";
import React from "react"; import React from "react";
@ -32,19 +26,26 @@ export type EventTypeDescriptionProps = {
export const EventTypeDescription = ({ eventType, className }: EventTypeDescriptionProps) => { export const EventTypeDescription = ({ eventType, className }: EventTypeDescriptionProps) => {
return ( return (
<ul className={classNames("mt-2 space-x-4 text-neutral-500 dark:text-white flex", className)}> <>
<div className={classNames("text-neutral-500 dark:text-white", className)}>
{eventType.description && (
<h2 className="opacity-60 truncate max-w-[280px] sm:max-w-[500px]">
{eventType.description.substring(0, 100)}
</h2>
)}
<ul className="flex mt-2 space-x-4 ">
<li className="flex whitespace-nowrap"> <li className="flex whitespace-nowrap">
<ClockIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" /> <ClockIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
{eventType.length}m {eventType.length}m
</li> </li>
{eventType.schedulingType ? ( {eventType.schedulingType ? (
<li className="hidden sm:flex whitespace-nowrap"> <li className="flex whitespace-nowrap">
<UsersIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" /> <UsersIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
{eventType.schedulingType === SchedulingType.ROUND_ROBIN && "Round Robin"} {eventType.schedulingType === SchedulingType.ROUND_ROBIN && "Round Robin"}
{eventType.schedulingType === SchedulingType.COLLECTIVE && "Collective"} {eventType.schedulingType === SchedulingType.COLLECTIVE && "Collective"}
</li> </li>
) : ( ) : (
<li className="hidden sm:flex whitespace-nowrap"> <li className="flex whitespace-nowrap">
<UserIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" /> <UserIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
1-on-1 1-on-1
</li> </li>
@ -61,18 +62,9 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
</IntlProvider> </IntlProvider>
</li> </li>
)} )}
{eventType.description && (
<li className="flex">
<InformationCircleIcon
className="flex-none inline mr-1.5 mt-0.5 h-4 w-4 text-neutral-400"
aria-hidden="true"
/>
<span className="truncate max-w-[200px] sm:max-w-full">
{eventType.description.substring(0, 100)}
</span>
</li>
)}
</ul> </ul>
</div>
</>
); );
}; };