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

86
components/eventtype/EventTypeDescription.tsx
View file

@ -1,10 +1,4 @@
import {
ClockIcon,
CreditCardIcon,
InformationCircleIcon,
UserIcon,
UsersIcon,
} from "@heroicons/react/solid";
import { ClockIcon, CreditCardIcon, UserIcon, UsersIcon } from "@heroicons/react/solid";
import { SchedulingType } from "@prisma/client";
import { Prisma } from "@prisma/client";
import React from "react";
@ -32,47 +26,45 @@ export type EventTypeDescriptionProps = {
export const EventTypeDescription = ({ eventType, className }: EventTypeDescriptionProps) => {
return (
<ul className={classNames("mt-2 space-x-4 text-neutral-500 dark:text-white flex", className)}>
<li className="flex whitespace-nowrap">
<ClockIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
{eventType.length}m
</li>
{eventType.schedulingType ? (
<li className="hidden sm:flex whitespace-nowrap">
<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.COLLECTIVE && "Collective"}
</li>
) : (
<li className="hidden sm:flex whitespace-nowrap">
<UserIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
1-on-1
</li>
)}
{eventType.price > 0 && (
<li className="flex whitespace-nowrap">
<CreditCardIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
<IntlProvider locale="en">
<FormattedNumber
value={eventType.price / 100.0}
style="currency"
currency={eventType.currency.toUpperCase()}
/>
</IntlProvider>
</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">
<>
<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)}
</span>
</li>
)}
</ul>
</h2>
)}
<ul className="flex mt-2 space-x-4 ">
<li className="flex whitespace-nowrap">
<ClockIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
{eventType.length}m
</li>
{eventType.schedulingType ? (
<li className="flex whitespace-nowrap">
<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.COLLECTIVE && "Collective"}
</li>
) : (
<li className="flex whitespace-nowrap">
<UserIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
1-on-1
</li>
)}
{eventType.price > 0 && (
<li className="flex whitespace-nowrap">
<CreditCardIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
<IntlProvider locale="en">
<FormattedNumber
value={eventType.price / 100.0}
style="currency"
currency={eventType.currency.toUpperCase()}
/>
</IntlProvider>
</li>
)}
</ul>
</div>
</>
);
};