Codestyle adjusted & fixed the column behaviour on mobile

This commit is contained in:
Alex van Andel 2021-06-10 18:49:11 +00:00
parent 96d4a9bd6d
commit 16b090efd4

View file

@ -7,7 +7,12 @@ import prisma from '../../../lib/prisma';
import { LocationType } from '../../../lib/location'; import { LocationType } from '../../../lib/location';
import Shell from '../../../components/Shell'; import Shell from '../../../components/Shell';
import { useSession, getSession } from 'next-auth/client'; import { useSession, getSession } from 'next-auth/client';
import { LocationMarkerIcon, PlusCircleIcon, XIcon, PhoneIcon } from '@heroicons/react/outline'; import {
LocationMarkerIcon,
PlusCircleIcon,
XIcon,
PhoneIcon,
} from '@heroicons/react/outline';
export default function EventType(props) { export default function EventType(props) {
const router = useRouter(); const router = useRouter();
@ -136,7 +141,7 @@ export default function EventType(props) {
</Head> </Head>
<Shell heading={'Event Type - ' + props.eventType.title}> <Shell heading={'Event Type - ' + props.eventType.title}>
<div className="grid grid-cols-3 gap-4"> <div className="grid grid-cols-3 gap-4">
<div className="col-span-2"> <div className="col-span-3 sm:col-span-2">
<div className="bg-white overflow-hidden shadow rounded-lg"> <div className="bg-white overflow-hidden shadow rounded-lg">
<div className="px-4 py-5 sm:p-6"> <div className="px-4 py-5 sm:p-6">
<form onSubmit={updateEventTypeHandler}> <form onSubmit={updateEventTypeHandler}>
@ -253,18 +258,18 @@ export default function EventType(props) {
</div> </div>
</div> </div>
</div> </div>
<div> <div className="col-span-3 sm:col-span-1">
<div className="bg-white shadow rounded-lg"> <div className="bg-white shadow sm:rounded-lg">
<div className="px-4 py-5 sm:p-6"> <div className="px-4 py-5 sm:p-6">
<h3 className="text-lg leading-6 font-medium text-gray-900"> <h3 className="text-lg mb-2 leading-6 font-medium text-gray-900">
Delete this event type Delete this event type
</h3> </h3>
<div className="mt-2 max-w-xl text-sm text-gray-500"> <div className="mb-4 max-w-xl text-sm text-gray-500">
<p> <p>
Once you delete this event type, it will be permanently removed. Once you delete this event type, it will be permanently removed.
</p> </p>
</div> </div>
<div className="mt-5"> <div>
<button onClick={deleteEventTypeHandler} type="button" className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"> <button onClick={deleteEventTypeHandler} type="button" className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm">
Delete event type Delete event type
</button> </button>