exercise layout changes + small fixes

src/AppHeader.js

@@ -5,16 +5,6 @@ import { faBars } from '@fortawesome/free-solid-svg-icons'
 
 function AppHeader(props) {
     
-    const studentSubmenu = () => {
-        return(
-        <Submenu
-            items={[
-                {content:"Asetukset"},
-                {content:"Kirjaudu ulos"}
-            ]}
-        />)
-    }
-
     return(<header className="App-header">
         <div className="header-left">
         <span className="logo">Aava</span>

src/LessonPage.js

 import React from 'react';
-import ExerciseFrame from './components/ExerciseFrame';
 import PythonExercise from './components/PythonExercise';
 import CourseHeader from './components/CourseHeader';
 
@@ -50,15 +49,15 @@ Imperdiet sed euismod nisi porta lorem mollis aliquam ut porttitor. Nullam vehic
 Lorem ipsum dolor sit amet. Lectus magna fringilla urna porttitor rhoncus dolor purus non. Purus in mollis nunc sed id. Volutpat lacus laoreet non curabitur gravida arcu ac. At erat pellentesque adipiscing commodo elit at imperdiet. Elementum tempus egestas sed sed risus. Quis viverra nibh cras pulvinar. Iaculis nunc sed augue lacus. Odio morbi quis commodo odio. Velit ut tortor pretium viverra suspendisse potenti. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. In mollis nunc sed id semper risus in hendrerit. Diam quis enim lobortis scelerisque fermentum. Viverra aliquet eget sit amet tellus cras adipiscing. Aliquet enim tortor at auctor urna nunc id cursus. Viverra accumsan in nisl nisi scelerisque eu. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor. Risus feugiat in ante metus dictum. Ultricies lacus sed turpis tincidunt id aliquet risus. Velit egestas dui id ornare arcu odio ut.</p>
 
                 </div>
-                <ExerciseFrame
-                    name="1. Eka tehtävä"
-                    description="koodausta"
-                    score={5}
-                    maxScore={10}
-                    content={<PythonExercise
-                            exercise={{id:1}}
-                        />
-                    }
+                <PythonExercise
+                    exercise={{
+                        name: "1. Eka tehtävä",
+                        description: [<p>Tallenna muuttujaan jokin arvo, joka ei ole merkkijono (esimerkiksi numero).</p>,
+<p>Tulosta tämän muuttujan arvo osana jotakin merkkijonoa.</p>],
+                        id: 1,
+                        score: 5,
+                        maxScore: 10,
+                    }}
                 />
             </div>
             </div>

src/components/ExerciseFrame.js

 import { useState, useRef, useEffect } from "react";
-import PopupWindow from './PopupWindow';
 import Header from './Header';
 
 function ExerciseFrame(props) {
@@ -17,52 +16,32 @@ function ExerciseFrame(props) {
         }
     }, [open]);
 
+    /*
     const [showingDescription, setShowingDescription] = useState("");
     const toggleDescription = () => {
         setShowingDescription(!showingDescription)
-    }
-
-    const descriptionButton = () => (
-        <button className="btn" onClick={() => {toggleDescription()}}>
-            Description
-        </button>
-    )
+    }*/
 
-    const submitButton = () => (
-        <button className="btn">
-            Submit
-        </button>
-    )
-    const resetButton = () => (
-        <button className="btn">
-            Reset
-        </button>
-    )
     const header = () => (
         <Header className="exercise-header" onClick={toggleOpen}
-            leftSide={<span className="exercise-name">{props.name}</span>}
-            rightSide={<span className="exercise-score">{props.score}/{props.maxScore}</span>}
+            leftSide={<span className="exercise-name">{props.exercise.name}</span>}
+            rightSide={<span className="exercise-score">{props.exercise.score}/{props.exercise.maxScore}</span>}
         />
     )
 
     if (!open) {
         return(header())
     }
-  return(
-    <div className="exercise" ref={ref}>
-        {showingDescription ? <PopupWindow 
+    /*
+     * {showingDescription ? <PopupWindow     
                title="Description" 
                content={props.description}
                closeFunction={() => {setShowingDescription(false)}}
            /> : ""}
-      
+    */
+    return(<div className="exercise" ref={ref}>
         {header()}
-        <div className="exercise-buttons">
-            {resetButton()}
-            {props.description ? descriptionButton() : ""}
-            {submitButton()}
-        </div>
-        {props.content}
+        {props.children}
     </div>)
 }
 

src/components/PythonExercise.js

 import AceEditor from "react-ace";
 import { useState } from "react";
 import Header from './Header'
+import ExerciseFrame from './ExerciseFrame'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons'
 
@@ -26,10 +27,17 @@ function PythonExercise(props) {
         setContent(newContent)
     }
 
-    const description = props.description
+    let buttons = () => (
+        [<button className="btn">
+            Reset
+        </button>,
+        <button className="btn">
+            Submit
+        </button>]
+    )
 
-    return(<div className="exercise-content">
-        <p>{description}</p>
+    return(<ExerciseFrame exercise={props.exercise}>
+    <div className="exercise-content coding-exercise-content">
         <div className="coding-area-wrapper">
             <Header className="coding-area-header"
                 leftSide={<span>Koodieditori</span>}
@@ -55,24 +63,30 @@ function PythonExercise(props) {
                     mode="python"
                     theme="xcode"
                     name={"python-exercise-"+props.exercise.id+"-code-editor"}
+                    width=""
                     onLoad={undefined}
                     onChange={onChange}
                     fontSize={fontSize}
-          showPrintMargin={true}
+                    showPrintMargin={false}
                     showGutter={true}
                     highlightActiveLine={true}
                     value={content}
                     editorProps={{ $blockScrolling: true }}
                     setOptions={{
-            enableBasicAutocompletion: false,
+                        enableBasicAutocompletion: true,
                         enableLiveAutocompletion: false,
                         enableSnippets: false,
                         showLineNumbers: true,
                         tabSize: 4,
-          }}/>
+                    }}
+                />
+            </div>
         </div>
+        <div className="exercise-buttons">{buttons()}</div>
+        <div className="exercise-description">
+            {props.exercise.description}
         </div>
-    </div>)
+    </div></ExerciseFrame>)
 }
 
 export default PythonExercise

src/components/Submenu.js

@@ -4,7 +4,7 @@ function Submenu(props) {
     const [ display, setDisplay ] = useState( 'none' )
 
     function handleClick() {
-        if ( display == 'none' ) {
+        if ( display === 'none' ) {
             setDisplay( 'block' )
         } else {
             setDisplay( 'none' )

src/index.css

@@ -75,7 +75,7 @@ button {
 }
 .btn:hover {
     box-shadow: 0px 1px 1px 0px #00000022;
-    background-color: #eef3ff;
+    background-color: #ffe0f0;
     border: 1px solid #b9aabb;
 }
 .smaller-header-bar :is(a, span) {
@@ -180,6 +180,7 @@ header {
 
 .exercise {
     box-shadow: 1px 1px 6px 1px #00000044;
+    min-height: 200px;
 }
 .exercise-header {
     background-color: var(--blue);
@@ -189,23 +190,22 @@ header {
     font-size: 1.1rem;
 }
 .exercise-content {
-    margin: 0.5rem;
+    padding: 0.5rem;
     
 }
 .exercise-buttons {
     display: flex;
     justify-content: flex-end;
     gap: 0.5rem;
-    margin: 0.5rem;
 }
 .coding-area {
     padding: 0.5rem;
     background-color: #f3f3f3;
     border-radius: 0 0 5px 5px;
-    width: fit-content;
 }
 .coding-area-wrapper {
-    width: fit-content;
+    grid-row: 1 / span 2;
+
 }
 .coding-area-header {
     padding: 0.5rem 1rem;
@@ -288,3 +288,12 @@ header {
 .submenu-item:hover {
     background-color: #ffe0f0;
 }
+.coding-exercise-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto 1fr;
+    
+}
+.exercise-description {
+    margin: 0 1rem;
+}