fix: annotation buttons display on small sreen (#51)

* fix: annotation buttons display on small sreen * fix: capitalize no site warning message * fix: remove unused code --------- Co-authored-by: ophdlv <[email protected]>
naturalsolutions · Dec 1, 2023 · b35284b · b35284b
1 parent 9ed7664
commit b35284b
Show file tree

Hide file tree

Showing 7 changed files with 191 additions and 203 deletions.
diff --git a/frontend/src/components/annotation/AnnotationImage.tsx b/frontend/src/components/annotation/AnnotationImage.tsx
@@ -4,27 +4,25 @@ import AnnotationImageDisplay from "./AnnotationImageDisplay";
 import AnnotationImageNavigation from "./AnnotationImageNavigation";
 import { useMainContext } from "../../contexts/mainContext";
 
+export default function AnnotationImage() {
+  const { t } = useTranslation();
+  const { image } = useMainContext();
 
-export default function AnnotationImage () {
-    const { t } = useTranslation();
-    const { image } = useMainContext();
-
-    return (
-        <>
-            { image() ? (
-                <Grid 
-                    container 
-                    direction="column"
-                    className="pageContainer"
-                >
-                    <AnnotationImageDisplay />
-                    <AnnotationImageNavigation />
-                </Grid>
-            ) : (
-                <p>
-                    { capitalize(t("annotations.unknown_image")) }
-                </p>
-            )}
-        </>
-    );
-};
+  return (
+    <>
+      {image() ? (
+        <Grid
+          container
+          direction="column"
+          className="pageContainer"
+          sx={{ overflow: "auto" }}
+        >
+          <AnnotationImageDisplay />
+          <AnnotationImageNavigation />
+        </Grid>
+      ) : (
+        <p>{capitalize(t("annotations.unknown_image"))}</p>
+      )}
+    </>
+  );
+}
diff --git a/frontend/src/components/annotation/AnnotationImageDisplay.tsx b/frontend/src/components/annotation/AnnotationImageDisplay.tsx
@@ -1,76 +1,61 @@
-import { useState, useEffect } from "react";
 import { Grid } from "@mui/material";
 import { useMainContext } from "../../contexts/mainContext";
 import { useAnnotationContext } from "../../contexts/annotationContext";
 
 const AnnotationImageDisplay = () => {
+  const { image } = useMainContext();
+  const { annotated } = useAnnotationContext();
 
-    const [isAnnotatedColor, setIsAnnotatedColor] = useState<string>("");
-    const { image } = useMainContext();
-    const { annotated } = useAnnotationContext();
+  const mediaDisplayStyle = {
+    borderBottomLeftRadius: 4,
+    borderBottomRightRadius: 4,
+    width: "100%",
+    height: "100%",
+    "object-fit": "contain",
+    display: "block",
+  };
 
-    const mediaDisplayStyle = {
-        borderBottomLeftRadius: 4,
-        borderBottomRightRadius: 4,
-        maxWidth: "99.5%",
-        maxHeight: "670px",
-        border: "3px solid",
-        borderRadius: "5px",
-        borderColor: isAnnotatedColor,
-    };
-
-    const displayMedia = (image) => {
-        if (image.extension.includes("image")) {
-            return (
-                <img
-                    src={ image.url }
-                    alt={ image.name }
-                    loading="lazy"
-                    style={ mediaDisplayStyle }
-                />
-            )
-        }
-        else {
-            return (
-                <video
-                    src={ image.url }
-                    style={ mediaDisplayStyle }
-                    controls
-                    autoPlay={ false }
-                >
-                    <source 
-                        type="video/mp4"
-                    />
-                    { image.name }
-                </video>
-            )
-        }
-    };
+  const displayMedia = (image) => {
+    if (image.extension.includes("image")) {
+      return (
+        <img
+          src={image.url}
+          alt={image.name}
+          loading="lazy"
+          style={mediaDisplayStyle}
+        />
+      );
+    } else {
+      return (
+        <video
+          src={image.url}
+          style={mediaDisplayStyle}
+          controls
+          autoPlay={false}
+        >
+          <source type="video/mp4" />
+          {image.name}
+        </video>
+      );
+    }
+  };
 
-    useEffect(() => {
-        (async () => {
-            image()?.treated
-            ? setIsAnnotatedColor("green") 
-            : (annotated 
-                ? setIsAnnotatedColor("orange") 
-                : setIsAnnotatedColor("red"))
-        })();
-    }, [image()?.annotations, annotated]);
-
-    return (
-        <>
-            <Grid item
-                alignItems="center"
-                justifyContent="center"
-                className="boxImage"
-                style={{ 
-                    backgroundColor: "#D9D9D9",
-                }}
-            >
-                { displayMedia(image()) }
-            </Grid>
-        </>
-    );
+  return (
+    <>
+      <Grid
+        item
+        alignItems="center"
+        justifyContent="center"
+        className="boxImage"
+        style={{
+          backgroundColor: "#D9D9D9",
+          overflow: "auto",
+        }}
+      >
+        {displayMedia(image())}
+      </Grid>
+    </>
+  );
 };
 
-export default AnnotationImageDisplay;
+export default AnnotationImageDisplay;
diff --git a/frontend/src/components/annotation/AnnotationMain.tsx b/frontend/src/components/annotation/AnnotationMain.tsx
@@ -4,22 +4,23 @@ import AnnotationSaveError from "./AnnotationSaveError";
 import "../../css/annotation.css";
 import AnnotationImage from "./AnnotationImage";
 
-
-
 const LayoutAnnotationContainer = styled("div")({
   flexGrow: 1,
   display: "grid",
   gridTemplateColumns: "repeat(12, 1fr)",
   columnGap: "1rem",
   rowGap: "1rem",
+  overflowY: "auto",
 });
 
 const LayoutAnnotationImage = styled("div")(({ theme }) => ({
   gridColumn: "1/8",
+  height: "100%",
+  overflow: "auto",
   [theme.breakpoints.down("md")]: {
     gridColumn: "1/13",
     gridRow: "1/5",
-  }
+  },
 }));
 
 const LayoutAnnotationForm = styled("div")(({ theme }) => ({
@@ -32,20 +33,18 @@ const LayoutAnnotationForm = styled("div")(({ theme }) => ({
 }));
 
 const AnnotationMain = () => {
-
-    return (
-        <LayoutAnnotationContainer className="page">
-
-            <LayoutAnnotationImage>
-                <AnnotationImage />
-            </LayoutAnnotationImage >
-
-            <LayoutAnnotationForm className="annotations">
-                <AnnotationForm />
-            </LayoutAnnotationForm >
-
-            <AnnotationSaveError />
-        </LayoutAnnotationContainer>
-    );
+  return (
+    <LayoutAnnotationContainer className="page">
+      <LayoutAnnotationImage>
+        <AnnotationImage />
+      </LayoutAnnotationImage>
+
+      <LayoutAnnotationForm className="annotations">
+        <AnnotationForm />
+      </LayoutAnnotationForm>
+
+      <AnnotationSaveError />
+    </LayoutAnnotationContainer>
+  );
 };
-export default AnnotationMain;
+export default AnnotationMain;