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

fixed layout for event type detail view on mobile

Browse source
This commit is contained in:
Peer Richelsen 2021-08-03 12:01:12 +02:00
parent 062d9a9935
commit 5b48b26111
1 changed files with 27 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
pages/event-types/[type].tsx
View file

@ -391,10 +391,10 @@ export default function EventTypePage({
<Shell heading={"Event Type: " + eventType.title} subtitle={eventType.description}> <Shell heading={"Event Type: " + eventType.title} subtitle={eventType.description}>
<div className="block sm:flex"> <div className="block sm:flex">
<div className="w-full sm:w-10/12 mr-2"> <div className="w-full sm:w-10/12 mr-2">
<div className="bg-white rounded-sm border border-neutral-200 p-8"> <div className="bg-white rounded-sm border border-neutral-200 -mx-4 sm:mx-0 p-4 sm:p-8">
<form onSubmit={updateEventTypeHandler} className="space-y-4"> <form onSubmit={updateEventTypeHandler} className="space-y-4">
<div className="flex"> <div className="block sm:flex">
<div className="min-w-32"> <div className="min-w-32 mb-4 sm:mb-0">
<label htmlFor="title" className="flex font-medium text-neutral-700 mt-1"> <label htmlFor="title" className="flex font-medium text-neutral-700 mt-1">
<PencilIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" /> <PencilIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
Title Title
@ -413,8 +413,8 @@ export default function EventTypePage({
/> />
</div> </div>
</div> </div>
<div className="flex"> <div className="block sm:flex">
<div className="min-w-32"> <div className="min-w-32 mb-4 sm:mb-0">
<label htmlFor="slug" className="flex font-medium text-neutral-700 mt-1"> <label htmlFor="slug" className="flex font-medium text-neutral-700 mt-1">
<LinkIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" /> <LinkIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
URL URL
@ -437,8 +437,8 @@ export default function EventTypePage({
</div> </div>
</div> </div>
</div> </div>
<div className="flex"> <div className="block sm:flex">
<div className="min-w-32"> <div className="min-w-32 mb-4 sm:mb-0">
<label htmlFor="location" className="flex font-medium text-neutral-700 mt-1"> <label htmlFor="location" className="flex font-medium text-neutral-700 mt-1">
<LocationMarkerIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" /> <LocationMarkerIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
Location Location
@ -566,8 +566,8 @@ export default function EventTypePage({
)} )}
</div> </div>
</div> </div>
<div className="flex"> <div className="block sm:flex">
<div className="min-w-32"> <div className="min-w-32 mb-4 sm:mb-0">
<label htmlFor="length" className="flex font-medium text-neutral-700 mt-1"> <label htmlFor="length" className="flex font-medium text-neutral-700 mt-1">
<ClockIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" /> <ClockIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
Duration Duration
@ -593,8 +593,8 @@ export default function EventTypePage({
</div> </div>
</div> </div>
</div> </div>
<div className="flex"> <div className="block sm:flex">
<div className="min-w-32"> <div className="min-w-32 mb-4 sm:mb-0">
<label htmlFor="description" className="flex font-medium text-neutral-700 mt-1"> <label htmlFor="description" className="flex font-medium text-neutral-700 mt-1">
<DocumentIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" /> <DocumentIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
Description Description
@ -620,8 +620,8 @@ export default function EventTypePage({
<span className="text-neutral-700 text-sm font-medium">Show advanced settings</span> <span className="text-neutral-700 text-sm font-medium">Show advanced settings</span>
</Disclosure.Button> </Disclosure.Button>
<Disclosure.Panel className="space-y-4"> <Disclosure.Panel className="space-y-4">
<div className="flex"> <div className="block sm:flex">
<div className="min-w-32"> <div className="min-w-32 mb-4 sm:mb-0">
<label htmlFor="eventName" className="flex font-medium text-neutral-700 mt-2"> <label htmlFor="eventName" className="flex font-medium text-neutral-700 mt-2">
Event name Event name
</label> </label>
@ -640,8 +640,8 @@ export default function EventTypePage({
</div> </div>
</div> </div>
</div> </div>
<div className="flex"> <div className="block sm:flex">
<div className="min-w-32"> <div className="min-w-32 mb-4 sm:mb-0">
<label <label
htmlFor="additionalFields" htmlFor="additionalFields"
className="flex font-medium text-neutral-700 mt-2"> className="flex font-medium text-neutral-700 mt-2">
@ -694,8 +694,8 @@ export default function EventTypePage({
</ul> </ul>
</div> </div>
</div> </div>
<div className="flex"> <div className="block sm:flex">
<div className="min-w-32"> <div className="min-w-32 mb-4 sm:mb-0">
<label htmlFor="hidden" className="flex font-medium text-neutral-700"> <label htmlFor="hidden" className="flex font-medium text-neutral-700">
Hide event type Hide event type
</label> </label>
@ -721,8 +721,8 @@ export default function EventTypePage({
</div> </div>
</div> </div>
</div> </div>
<div className="flex"> <div className="block sm:flex">
<div className="min-w-32"> <div className="min-w-32 mb-4 sm:mb-0">
<label <label
htmlFor="requiresConfirmation" htmlFor="requiresConfirmation"
className="flex font-medium text-neutral-700"> className="flex font-medium text-neutral-700">
@ -750,8 +750,8 @@ export default function EventTypePage({
</div> </div>
</div> </div>
</div> </div>
<div className="flex"> <div className="block sm:flex">
<div className="min-w-32"> <div className="min-w-32 mb-4 sm:mb-0">
<label <label
htmlFor="inviteesCanSchedule" htmlFor="inviteesCanSchedule"
className="flex font-medium text-neutral-700 mt-2"> className="flex font-medium text-neutral-700 mt-2">
@ -769,22 +769,22 @@ export default function EventTypePage({
className={({ checked }) => className={({ checked }) =>
classnames( classnames(
checked ? "border-secondary-200 z-10" : "border-gray-200", checked ? "border-secondary-200 z-10" : "border-gray-200",
"relative min-h-14 lg:flex items-center cursor-pointer focus:outline-none" "relative min-h-14 flex items-center cursor-pointer focus:outline-none"
) )
}> }>
{({ active, checked }) => ( {({ active, checked }) => (
<> <>
<span <div
className={classnames( className={classnames(
checked checked
? "bg-primary-600 border-transparent" ? "bg-primary-600 border-transparent"
: "bg-white border-gray-300", : "bg-white border-gray-300",
active ? "ring-2 ring-offset-2 ring-primary-500" : "", active ? "ring-2 ring-offset-2 ring-primary-500" : "",
"h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center" "h-4 w-4 mt-0.5 mr-2 cursor-pointer rounded-full border items-center justify-center"
)} )}
aria-hidden="true"> aria-hidden="true">
<span className="rounded-full bg-white w-1.5 h-1.5" /> <span className="rounded-full bg-white w-1.5 h-1.5" />
</span> </div>
<div className="lg:ml-3 flex flex-col"> <div className="lg:ml-3 flex flex-col">
<RadioGroup.Label <RadioGroup.Label
as="span" as="span"
@ -849,8 +849,8 @@ export default function EventTypePage({
</RadioGroup> </RadioGroup>
</div> </div>
</div> </div>
<div className="flex"> <div className="block sm:flex">
<div className="min-w-32"> <div className="min-w-32 mb-4 sm:mb-0">
<label htmlFor="availability" className="flex font-medium text-neutral-700 mt-2"> <label htmlFor="availability" className="flex font-medium text-neutral-700 mt-2">
Availability Availability
</label> </label>