administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-01 16:55:21 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

moved buttons for small devices

Browse Source
This commit is contained in:
Bernt Christian Egeland 2021-08-29 17:19:31 +02:00
parent 8def3f9198
commit d9a43fa6b5
1 changed files with 41 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
web/src/routes/Event.jsx
View File

@ -64,41 +64,51 @@ export default function Event({ eventId, close, scrollRef }) {
if (status !== FetchStatus.LOADED) { if (status !== FetchStatus.LOADED) {
return <ActivityIndicator />; return <ActivityIndicator />;
} }
const DownloadButtonGroup = ({ className }) => (
<span className={`space-y-2 sm:space-y-0 space-x-0 sm:space-x-4 ${className}`}>
<Button
className="w-full sm:w-auto"
color="blue"
href={`${apiHost}/api/events/${eventId}/clip.mp4?download=true`}
download
>
<Clip className="w-6" /> Download Clip
</Button>
<Button
className="w-full sm:w-auto"
color="blue"
href={`${apiHost}/api/events/${eventId}/snapshot.jpg?download=true`}
download
>
<Snapshot className="w-6" /> Download Snapshot
</Button>
</span>
);
const DeleteButtonGroup = ({ className }) => (
<div className={`space-y-2 space-x-2 sm:space-y-0 xs:space-x-4 ${className}`}>
<Button className="xs:w-auto" color="red" onClick={handleClickDelete}>
<Delete className="w-6" /> Delete event
</Button>
<Button color="gray" className="xs:w-auto" onClick={() => close()}>
<Close className="w-6" /> Close
</Button>
</div>
);
const startime = new Date(data.start_time * 1000); const startime = new Date(data.start_time * 1000);
const endtime = new Date(data.end_time * 1000); const endtime = new Date(data.end_time * 1000);
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<div className="flex md:flex-row justify-between flex-wrap flex-col"> <div className="flex md:flex-row justify-between flex-wrap flex-col">
<div className="space-y-2 xs:space-y-0 xs:space-x-4"> <div className="space-y-2 xs:space-y-0 sm:space-x-4">
<Button <DownloadButtonGroup className="hidden sm:inline" />
className="w-full xs:w-auto"
color="blue" <Button className="w-full sm:w-auto" onClick={() => setShowDetails(!showDetails)}>
href={`${apiHost}/api/events/${eventId}/clip.mp4?download=true`}
download
>
<Clip className="w-6" /> Download Clip
</Button>
<Button
className="w-full xs:w-auto"
color="blue"
href={`${apiHost}/api/events/${eventId}/snapshot.jpg?download=true`}
download
>
<Snapshot className="w-6" /> Download Snapshot
</Button>
<Button className="w-full xs:w-auto" onClick={() => setShowDetails(!showDetails)}>
<ArrowDown className="w-6" /> <ArrowDown className="w-6" />
{`${showDetails ? 'Hide event Details' : 'View event Details'}`} {`${showDetails ? 'Hide event Details' : 'View event Details'}`}
</Button> </Button>
</div> </div>
<div className="space-y-2 space-x-2 xs:space-y-0 xs:space-x-4"> <DeleteButtonGroup className="hidden sm:block" />
<Button className="xs:w-auto" color="red" onClick={handleClickDelete}>
<Delete className="w-6" /> Delete event
</Button>
<Button color="gray" className="xs:w-auto" onClick={() => close()}>
<Close className="w-6" /> Close
</Button>
</div>
{showDialog ? ( {showDialog ? (
<Dialog <Dialog
onDismiss={handleDismissDeleteDialog} onDismiss={handleDismissDeleteDialog}
@ -149,6 +159,7 @@ export default function Event({ eventId, close, scrollRef }) {
</Table> </Table>
) : null} ) : null}
</div> </div>
<div className="outer-max-width xs:m-auto"> <div className="outer-max-width xs:m-auto">
<div className="pt-5 relative pb-20 w-screen xs:w-full"> <div className="pt-5 relative pb-20 w-screen xs:w-full">
{data.has_clip ? ( {data.has_clip ? (
@ -186,6 +197,10 @@ export default function Event({ eventId, close, scrollRef }) {
)} )}
</div> </div>
</div> </div>
<div className="space-y-2 xs:space-y-0">
<DownloadButtonGroup className="block sm:hidden" />
<DeleteButtonGroup className="block sm:hidden" />
</div>
</div> </div>
); );
} }