Merge pull request #199 from ajinkyapandetekdi/all-1.3-tn-dev

Issueid #0000 feat: zoom in and out feature enable for fillintheblanks
tekdi · Nov 4, 2024 · 92e92e0 · 92e92e0
2 parents 2290938 + bc463cd
commit 92e92e0
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/components/Practice/Mechanics3.jsx b/src/components/Practice/Mechanics3.jsx
@@ -261,6 +261,7 @@ const Mechanics2 = ({
               <Box sx={{ position: "relative", cursor: "zoom-in" }}>
                 {image && (
                   <img
+                    onClick={() => setZoomOpen(true)}
                     src={image}
                     style={{
                       borderRadius: "20px",

diff --git a/src/components/Practice/Mechanics5.jsx b/src/components/Practice/Mechanics5.jsx
@@ -232,7 +232,14 @@ const Mechanics5 = ({
               justifyContent: "center",
             }}
           >
-            <Box sx={{ position: "relative", outline: "none" }}>
+            <Box
+              sx={{
+                position: "relative",
+                outline: "none",
+                height: "500px",
+                width: "500px",
+              }}
+            >
               {/* Subtle gradient overlay at the top of the zoomed image */}
               <Box
                 sx={{
@@ -269,8 +276,9 @@ const Mechanics5 = ({
                 src={image}
                 alt="Zoomed content"
                 style={{
-                  maxWidth: "90vw",
-                  maxHeight: "90vh",
+                  // maxWidth: "90vw",
+                  // maxHeight: "90vh",
+                  width: "100%",
                   borderRadius: "8px",
                 }}
               />