administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-02 01:05:20 +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

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

@ -64,14 +64,11 @@ export default function Event({ eventId, close, scrollRef }) {
if (status !== FetchStatus.LOADED) { if (status !== FetchStatus.LOADED) {
return <ActivityIndicator />; return <ActivityIndicator />;
} }
const startime = new Date(data.start_time * 1000);
const endtime = new Date(data.end_time * 1000); const DownloadButtonGroup = ({ className }) => (
return ( <span className={`space-y-2 sm:space-y-0 space-x-0 sm:space-x-4 ${className}`}>
<div className="space-y-4">
<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">
<Button <Button
className="w-full xs:w-auto" className="w-full sm:w-auto"
color="blue" color="blue"
href={`${apiHost}/api/events/${eventId}/clip.mp4?download=true`} href={`${apiHost}/api/events/${eventId}/clip.mp4?download=true`}
download download
@ -79,19 +76,17 @@ export default function Event({ eventId, close, scrollRef }) {
<Clip className="w-6" /> Download Clip <Clip className="w-6" /> Download Clip
</Button> </Button>
<Button <Button
className="w-full xs:w-auto" className="w-full sm:w-auto"
color="blue" color="blue"
href={`${apiHost}/api/events/${eventId}/snapshot.jpg?download=true`} href={`${apiHost}/api/events/${eventId}/snapshot.jpg?download=true`}
download download
> >
<Snapshot className="w-6" /> Download Snapshot <Snapshot className="w-6" /> Download Snapshot
</Button> </Button>
<Button className="w-full xs:w-auto" onClick={() => setShowDetails(!showDetails)}> </span>
<ArrowDown className="w-6" /> );
{`${showDetails ? 'Hide event Details' : 'View event Details'}`} const DeleteButtonGroup = ({ className }) => (
</Button> <div className={`space-y-2 space-x-2 sm:space-y-0 xs:space-x-4 ${className}`}>
</div>
<div className="space-y-2 space-x-2 xs:space-y-0 xs:space-x-4">
<Button className="xs:w-auto" color="red" onClick={handleClickDelete}> <Button className="xs:w-auto" color="red" onClick={handleClickDelete}>
<Delete className="w-6" /> Delete event <Delete className="w-6" /> Delete event
</Button> </Button>
@ -99,6 +94,21 @@ export default function Event({ eventId, close, scrollRef }) {
<Close className="w-6" /> Close <Close className="w-6" /> Close
</Button> </Button>
</div> </div>
);
const startime = new Date(data.start_time * 1000);
const endtime = new Date(data.end_time * 1000);
return (
<div className="space-y-4">
<div className="flex md:flex-row justify-between flex-wrap flex-col">
<div className="space-y-2 xs:space-y-0 sm:space-x-4">
<DownloadButtonGroup className="hidden sm:inline" />
<Button className="w-full sm:w-auto" onClick={() => setShowDetails(!showDetails)}>
<ArrowDown className="w-6" />
{`${showDetails ? 'Hide event Details' : 'View event Details'}`}
</Button>
</div>
<DeleteButtonGroup className="hidden sm:block" />
{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>
); );
} }