From d9a43fa6b501733bdf4b2338eb7c6379a909df42 Mon Sep 17 00:00:00 2001
From: Bernt Christian Egeland <cbegelan@gmail.com>
Date: Sun, 29 Aug 2021 17:19:31 +0200
Subject: [PATCH] moved buttons for small devices

---
 web/src/routes/Event.jsx | 67 ++++++++++++++++++++++++----------------
 1 file changed, 41 insertions(+), 26 deletions(-)

diff --git a/web/src/routes/Event.jsx b/web/src/routes/Event.jsx
index 36ebe1e8e..dcc03afb9 100644
--- a/web/src/routes/Event.jsx
+++ b/web/src/routes/Event.jsx
@@ -64,41 +64,51 @@ export default function Event({ eventId, close, scrollRef }) {
   if (status !== FetchStatus.LOADED) {
     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 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 xs:space-x-4">
-          <Button
-            className="w-full xs: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 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)}>
+        <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>
-        <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}>
-            <Delete className="w-6" /> Delete event
-          </Button>
-          <Button color="gray" className="xs:w-auto" onClick={() => close()}>
-            <Close className="w-6" /> Close
-          </Button>
-        </div>
+        <DeleteButtonGroup className="hidden sm:block" />
         {showDialog ? (
           <Dialog
             onDismiss={handleDismissDeleteDialog}
@@ -149,6 +159,7 @@ export default function Event({ eventId, close, scrollRef }) {
           </Table>
         ) : null}
       </div>
+
       <div className="outer-max-width xs:m-auto">
         <div className="pt-5 relative pb-20 w-screen xs:w-full">
           {data.has_clip ? (
@@ -186,6 +197,10 @@ export default function Event({ eventId, close, scrollRef }) {
           )}
         </div>
       </div>
+      <div className="space-y-2 xs:space-y-0">
+        <DownloadButtonGroup className="block sm:hidden" />
+        <DeleteButtonGroup className="block sm:hidden" />
+      </div>
     </div>
   );
 }