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