center buttons small devices

This commit is contained in:
Bernt Christian Egeland 2021-08-20 07:58:37 +02:00
parent b98a5b4db8
commit 2c65dbda27

View File

@ -55,10 +55,11 @@ export default function Event({ eventId }) {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<div className="flex flex-wrap space-x-4"> <div className="flex flex-wrap justify-center">
<Heading className="flex-grow"> <Heading className="flex-grow">
{data.camera} {data.label} <span className="text-sm">{startime.toLocaleString()}</span> {data.camera} {data.label} <span className="text-sm">{startime.toLocaleString()}</span>
</Heading> </Heading>
<div className="space-x-4">
<Button className="self-start" onClick={() => setShowDetails(!showDetails)} color="gray"> <Button className="self-start" onClick={() => setShowDetails(!showDetails)} color="gray">
<ArrowDown className="w-6" /> <ArrowDown className="w-6" />
{`${showDetails ? 'Hide event Details' : 'View event Details'}`} {`${showDetails ? 'Hide event Details' : 'View event Details'}`}
@ -66,6 +67,7 @@ export default function Event({ eventId }) {
<Button className="self-start" color="red" onClick={handleClickDelete}> <Button className="self-start" color="red" onClick={handleClickDelete}>
<Delete className="w-6" /> Delete event <Delete className="w-6" /> Delete event
</Button> </Button>
</div>
{showDialog ? ( {showDialog ? (
<Dialog <Dialog
onDismiss={handleDismissDeleteDialog} onDismiss={handleDismissDeleteDialog}
@ -136,21 +138,11 @@ export default function Event({ eventId }) {
onReady={(player) => {}} onReady={(player) => {}}
/> />
</div> </div>
<div className="text-center"> <div className="flex space-x-4 justify-center">
<Button <Button color="blue" href={`${apiHost}/api/events/${eventId}/clip.mp4?download=true`} download>
className="mx-2"
color="blue"
href={`${apiHost}/api/events/${eventId}/clip.mp4?download=true`}
download
>
<Clip className="w-6" /> Download Clip <Clip className="w-6" /> Download Clip
</Button> </Button>
<Button <Button color="blue" href={`${apiHost}/api/events/${eventId}/snapshot.jpg?download=true`} download>
className="mx-2"
color="blue"
href={`${apiHost}/api/events/${eventId}/snapshot.jpg?download=true`}
download
>
<Snapshot className="w-6" /> Download Snapshot <Snapshot className="w-6" /> Download Snapshot
</Button> </Button>
</div> </div>