Merge pull request #80 from SandeepVashishtha/main

Mobile Responsive for LandingPage
DhanushNehru · Jul 6, 2024 · d17b580 · d17b580
2 parents e6cfce2 + 030f93f
commit d17b580
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 101 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "githubPullRequests.ignoredPullRequestBranches": [
+        "main"
+    ]
+}
diff --git a/src/components/css/EditorComponent.css b/src/components/css/EditorComponent.css
@@ -1,22 +1,50 @@
-.output pre {
-  background-color: #e35757; /* Change background color */
-  padding: 10px; /* Add padding */
-  border-radius: 5px; /* Add rounded corners */
-  transition: background-color 0.3s ease; /* Smooth transition */
-}
+/* EditorComponent.css */
 
-.output pre:hover {
-  background-color: #9d4444; /* Change background color on hover */
+.editor-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
 }
 
 .layout {
   display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 
 .sidebar {
   display: flex;
   flex-direction: column;
-  width: 15vw;
-  gap: 1rem;
   align-items: center;
+  width: 100%;
+  margin-top: 1rem;
+}
+
+.editor {
+  width: 100%;
+  height: 70vh;
+}
+
+.output {
+  background-color: #d8dbcc;
+  height: 22.3vh;
+  overflow-y: auto;
+  padding: 1rem;
+}
+
+@media (min-width: 768px) {
+  .layout {
+    flex-direction: row;
+  }
+
+  .sidebar {
+    width: 15vw;
+    margin-top: 0;
+  }
+
+  .editor {
+    width: 85vw;
+    height: 70vh;
+  }
 }
diff --git a/src/pages/EditorComponent.js b/src/pages/EditorComponent.js
@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from "react";
 import { FaPlay } from "react-icons/fa";
 import Editor from "@monaco-editor/react";
-import "../components/css/EditorComponent.css"; // Optional for styling
+import "../components/css/EditorComponent.css";
 import "@fortawesome/fontawesome-free/css/all.css";
 import { useSnackbar } from "notistack";
 import { Button, CircularProgress, styled } from "@mui/material";
@@ -24,17 +24,16 @@ function EditorComponent() {
   const [code, setCode] = useState(null);
   const [output, setOutput] = useState("");
   const [currentLanguage, setCurrentLanguage] = useState(
-    LANGUAGES[0].DEFAULT_LANGUAGE
+    LANGUAGES[0].DEFAULT_LANGUAGE,
   );
   const [languageDetails, setLanguageDetails] = useState(LANGUAGES[0]);
   const [loading, setLoading] = useState(false);
   const { enqueueSnackbar } = useSnackbar();
-  // Reference to the Monaco editor instance
   const editorRef = useRef(null);
 
   useEffect(() => {
     const selectedLanguage = LANGUAGES.find(
-      (lang) => lang.DEFAULT_LANGUAGE === currentLanguage
+      (lang) => lang.DEFAULT_LANGUAGE === currentLanguage,
     );
     setLanguageDetails({
       LANGUAGE_ID: selectedLanguage.ID,
@@ -44,24 +43,21 @@ function EditorComponent() {
     });
     setCode(selectedLanguage.HELLO_WORLD);
   }, [currentLanguage]);
-  // Function to handle editor mounting
+
   function handleEditorDidMount(editor, monaco) {
     editorRef.current = editor;
-
-    //event listner which submits code upon pressing ctrl+enter
     editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
       submitCode();
     });
   }
 
   const getLanguageLogoById = (id) => {
     const language = LANGUAGES.find(
-      (lang) => parseInt(lang.ID) === parseInt(id)
+      (lang) => parseInt(lang.ID) === parseInt(id),
     );
     return language ? language.LOGO : null;
   };
 
-  // Function to handle code submission
   async function submitCode() {
     const codeToSubmit = editorRef.current.getValue();
     if (codeToSubmit === "") {
@@ -80,15 +76,15 @@ function EditorComponent() {
         body: JSON.stringify({
           source_code: codeToSubmit,
           language_id: languageDetails.LANGUAGE_ID,
-          stdin: "", // Input for the code (if any)
-          expected_output: "", // Expected output for the code (if any)
+          stdin: "",
+          expected_output: "",
         }),
       });
 
       if (!response.ok) {
         enqueueSnackbar(
           `Failed to create submission. Status code: ${response.status}`,
-          { variant: "error" }
+          { variant: "error" },
         );
         setLoading(false);
         return;
@@ -119,7 +115,7 @@ function EditorComponent() {
             });
           })
           .finally(() => setLoading(false));
-      }, 2000); // Delay added to give Judge0 some time to process the submission
+      }, 2000);
     } catch (error) {
       enqueueSnackbar("Error: " + error.message, { variant: "error" });
     }
@@ -132,7 +128,7 @@ function EditorComponent() {
   }
 
   return (
-    <div className="editor-container" style={styles.container}>
+    <div className="editor-container">
       <div style={{ height: "3.5rem", backgroundColor: "#ccd4bc" }}>
         <div style={styles.flexStart}>
           {getLanguageLogoById(languageDetails.LANGUAGE_ID)}
@@ -143,14 +139,12 @@ function EditorComponent() {
       </div>
       <div className="layout">
         <Editor
-          height="70vh"
-          width="85vw"
+          className="editor"
           theme="vs-dark"
           onMount={handleEditorDidMount}
-          // ... other editor configuration options
-          value={code} // Set initial value
-          onChange={setCode} // Update code state on change
-          language={languageDetails.DEFAULT_LANGUAGE} // Set default language to JavaScript
+          value={code}
+          onChange={setCode}
+          language={languageDetails.DEFAULT_LANGUAGE}
         />
         <div className="sidebar">
           <div style={styles.languageDropdown}>
@@ -159,21 +153,6 @@ function EditorComponent() {
               defaultLanguage={languageDetails}
             />
           </div>
-          {/* <select
-            style={styles.select}
-            // style={{ padding: "0.5em 1em" }}
-            onChange={handleLanguageChange}
-          >
-            {LANGUAGES.map((language, index) => (
-              <option
-                key={index}
-                style={{ padding: "0.2em 0.5em" }}
-                value={language.DEFAULT_LANGUAGE}
-              >
-                {language.NAME}
-              </option>
-            ))}
-          </select> */}
           <StyledButton
             onClick={submitCode}
             style={styles.button}
@@ -186,26 +165,9 @@ function EditorComponent() {
             </span>
             Run {languageDetails.LANGUAGE_NAME}
           </StyledButton>
-          {/* <button onClick={submitCode} style={styles.button}>
-          <FaPlay size="16" /> Run {languageDetails.LANGUAGE_NAME} Code
-        </button> */}
         </div>
       </div>
-      {/* <div id="counter">
-        A user can do 50 executions/day in total (irrespective of the language)
-      </div> */}
-      <div
-        style={{
-          backgroundColor: "#d8dbcc",
-          height: "22.3vh",
-        }}
-      >
-        {output}
-        {/* className="output" */}
-        {/* <pre> */}
-        {/* <p>{output}</p> */}
-        {/* </pre> */}
-      </div>
+      <div className="output">{output}</div>
     </div>
   );
 }
@@ -218,13 +180,6 @@ const styles = {
     gap: "0.6em",
     paddingTop: "0.5rem",
   },
-  flexBetween: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingRight: "1em",
-    height: "60px",
-  },
   button: {
     marginLeft: "5px",
     marginTop: "5px",

diff --git a/src/pages/LandingPage.css b/src/pages/LandingPage.css
@@ -0,0 +1,46 @@
+/* LandingPage.css */
+.landing-page {
+    text-align: center;
+    margin-top: 100px;
+  }
+
+  .landing-page h1 {
+    font-size: 4em;
+    color: #333;
+  }
+
+  .landing-page a {
+    display: block;
+    margin-top: 20px;
+    text-decoration: none;
+    color: #007bff;
+    font-size: 1.2em;
+  }
+
+  .landing-page button {
+    margin-top: 20px;
+    padding: 10px 20px;
+    background-color: #252525;
+    color: #fff;
+    border: none;
+    border-radius: 10px;
+    font-size: 1.2em;
+    cursor: pointer;
+  }
+
+  /* Media query for screens smaller than 768px */
+  /* for mobile responsiveness for Landing page edit this only */
+  @media (max-width: 768px) {
+    .landing-page h1 {
+      font-size: 2em;
+    }
+
+    .landing-page a {
+      font-size: 1em;
+    }
+
+    .landing-page button {
+      padding: 8px 15px;
+      font-size: 1em;
+    }
+  }
diff --git a/src/pages/LandingPage.js b/src/pages/LandingPage.js
@@ -1,44 +1,18 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import Stars from "../components/js/Stars";
+import styles from "./LandingPage.css";
 
 function LandingPage() {
   return (
     <div className="landing-page" style={styles.container}>
       <h1 style={styles.heading}>Welcome</h1>
-      <Stars/>
-      <Link to="/editor" style={styles.link}><button style={styles.button}>Click Here to Proceed</button></Link>
+      <Stars />
+      <Link to="/editor" style={styles.link}>
+        <button style={styles.button}>Click Here to Proceed</button>
+      </Link>
     </div>
   );
 }
 
-const styles = {
-  container: {
-    textAlign: "center",
-    marginTop: "100px",
-  },
-  heading: {
-    fontSize: "4em",
-    color: "#333",
-  },
-  link: {
-    display: "block",
-    marginTop: "20px",
-    textDecoration: "none",
-    color: "#007bff",
-    fontSize: "1.2em",
-  },
-  button: {
-    marginTop: "20px",
-    padding: "10px 20px",
-    backgroundColor: "#252525",
-    color: "#fff",
-    border: "none",
-    borderRadius: "10px",
-    fontSize: "1.2em",
-    cursor: "pointer",
-    boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
-  }
-};
-
 export default LandingPage;