Merge pull request #158 from poshithNandyala/poshith

Enhance responsive design for mobile and tablet devices
DhanushNehru · Oct 18, 2024 · 8a3e803 · 8a3e803
2 parents 7955503 + 440fe6e
commit 8a3e803
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 42 deletions.
diff --git a/src/components/css/EditorComponent.css b/src/components/css/EditorComponent.css
@@ -1,4 +1,3 @@
-
 .editor-container {
   display: flex;
   flex-direction: column;
@@ -12,26 +11,43 @@
   align-items: center;
   width: 100%;
   margin-top: 1rem;
+  padding:2px 0px;
 }
 
 .editor {
   width: 100%;
-  height: 70vh;
+  height: 40vh;
 }
 
-@media (min-width: 768px) {
-
+@media (min-width: 1024px) {
   .sidebar {
     width: 15vw;
     margin-top: 0;
   }
 
   .editor {
     width: 85vw;
-    height: 70vh;
+    height: 85vh;
   }
 }
 
+.flex-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+@media (min-width: 576px) {
+  .editor {
+    width: 100%;
+    height: 50vh;
+  }
+   .flex-container {
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 0.6em;
+  }
+}
 
 .flex {
   display: flex;
@@ -54,7 +70,7 @@
 .signout-container {
   display: flex;
   align-items: center;
-  border: 1px solid #D1D1D1; /* border-gray-300 */
+  border: 1px solid #d1d1d1; /* border-gray-300 */
   border-radius: 4px;
   padding: 4px 8px;
   background-color: #fff;
@@ -63,21 +79,20 @@
 
 .signout-container:hover {
   background-color: #fff;
-  
+
   transition: 0.5s all ease;
 }
 
 .signout-button {
   font-weight: bold;
-  color: #4A4A4A; /* text-gray-700 */
+  color: #4a4a4a; /* text-gray-700 */
   background: none;
   border: none;
   cursor: pointer;
 }
 
 .signout-button span:hover {
   color: #000; /* Black text */
-
 }
 
 /* Dark mode styles */
@@ -88,11 +103,11 @@
 
   .signout-container {
     background-color: #000; /* dark:bg-black */
-    color: #fff ;
+    color: #fff;
     border-color: #666; /* dark:border-gray-500 */
   }
 
   .signout-button span {
-    color: #fff; 
+    color: #fff;
   }
 }
diff --git a/src/pages/EditorComponent.js b/src/pages/EditorComponent.js
@@ -34,25 +34,28 @@ const StyledButton = styled(Button)({
 const StyledLayout = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  height: "100%",
-  marginLeft: "0.5rem",
-  marginRight: "0.5rem",
-  padding: "0.5rem",
+  height: "80%",
+  margin: "0.5rem",
   border: `2px solid ${theme.palette.divider}`,
   borderRadius: "1rem",
-  "@media (min-width: 768px)": {
+  "@media (min-width: 1024px)": {
     flexDirection: "row",
+    padding:"1.5rem",
+    alignItems: "center",
   },
 }));
 
 const OutputLayout = styled("div")(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
-  height: "22.3vh",
-  overflowY: "auto",
-  padding: "1rem",
-  margin: "0.5rem",
+  height: "50vh",
+  // overflowY: "auto",
+  margin: "2rem 0",
   border: `2px solid ${theme.palette.divider}`,
   borderRadius: "1rem",
+  "@media (min-width: 1024px)": {
+    height: "30vh",
+    padding: "1rem",
+  },
 }));
 
 const WelcomeText = styled("span")(({ theme }) => ({
@@ -80,15 +83,23 @@ function EditorComponent() {
   const styles = {
     flex: {
       display: "flex",
-      justifyContent: "space-between",
+      flexDirection:"column",
       alignItems: "center",
-      gap: "0.6em",
     },
     languageDropdown: {
       marginTop: "1rem",
       display: "flex",
       alignItems: "center",
     },
+    "@media (min-width: 576px)": {
+      flex: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        gap: "0.6em",
+      },
+    },
   };
 
   useEffect(() => {
@@ -231,8 +242,9 @@ function EditorComponent() {
           value={code}
           onChange={setCode}
           language={languageDetails.DEFAULT_LANGUAGE}
+          options={{ minimap: { enabled: false } }} // Minimap off for better responsiveness
         />
-        <div className="sidebar">
+        <div className="sidebar" style={{ display: "flex", flexDirection: "column" }}>
           {getLanguageLogoById(languageDetails.ID)}
           <div style={{ fontWeight: "bold" }}>
             {languageDetails.LANGUAGE_NAME}
@@ -250,20 +262,21 @@ function EditorComponent() {
             />
           </div>
           <StyledButton
-            sx={[
-              (theme) => ({
-                marginLeft: "5px",
-                marginTop: "1rem",
-                padding: "10px 20px",
-                bgcolor: theme.palette.text.primary,
-                color: theme.palette.background.default,
-                border: "none",
-                borderRadius: "5px",
-                fontSize: "0.8em",
-                cursor: "pointer",
-                boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
-              }),
-            ]}
+            sx={(theme) => ({
+              marginTop: "1rem",
+              padding: "10px 20px",
+              bgcolor: theme.palette.text.primary,
+              color: theme.palette.background.default,
+              border: "none",
+              borderRadius: "15px",
+              fontSize: "0.8em",
+              cursor: "pointer",
+              boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+              width: "50%", 
+              "@media (min-width: 1024px)": {
+                width: "100%", // Full width button
+              },
+            })}
             onClick={submitCode}
             variant="contained"
             color="primary"
@@ -278,10 +291,10 @@ function EditorComponent() {
       </StyledLayout>
       <OutputLayout>
         {Array.isArray(output) &&
-          output.map((result, i) => {
-            return <div key={i}>{result}</div>;
-          })}
-          <Footer/>
+          output.map((result, i) => (
+            <div key={i}>{result}</div>
+          ))}
+        <Footer />
       </OutputLayout>
     </>
   );
@@ -339,7 +352,7 @@ function EditorComponent() {
               Custom Code Editor
             </span>
           </div>
-          <div style={{ display: "flex", alignItems: "center" }}>
+          <div className="flex-container">
             <div className="flex items-center space-x-2">
               {currentUser ? (
                 <>