#15 Changed the result view

- PC view : half-half view, one is for picture and the other is result content
- Mobile view : Align every contents row

src/App.js

@@ -99,7 +99,7 @@ function App() {
                 })}
                 <ParallaxLayer
                     speed={1}
-                    style={parallax_style}
+                    // style={parallax_style}
                     offset={questions.length + 1}
                 >
                     <Result results={results} />

src/assets/css/style_result.css

@@ -5,10 +5,51 @@
     justify-content: center;    
 }
 
+/* Pattern styles */
+.container-section {
+  display:flex;
+}
+
+.picture-section{
+  flex: 1;
+}
+
+.resultPic{
+  max-width: 100%;
+}
+
+.result-section {
+  flex: 1;
+}
+
+@media screen and (max-width: 450px){
+  .container-section {
+    display:flex;
+    flex-direction: column;    
+  }
+
+  .picture-section{
+    display:flex;
+    flex-direction: row;
+    justify-content: center;
+    flex:1;
+  } 
+
+  .result-section {
+    flex: 1;
+  }
+
+  .resultPic{
+    padding: 3em 0;
+    width : 40%;
+  }
+
+}
+
 .title{
   font-family: monospace;
   font-size: 2em;
-  padding-top :1em;
+  padding-top :2 em;
 }
 .grid-parent{
   display: grid;

src/assets/json/result.json

@@ -1,8 +1,13 @@
 {
-    "next week" : "Make up or find the list of characters",
-    "in result" : {
-        "Using Mbti" : "probably(not sure)",
-        "Giving a setence" : "based on scores of each result",
-        "sentence_example" : "Your introver it means you are calm and thoughtful person."
+    "quotes" :
+    {
+        "introvert" :"jo",
+        "extravert" :[
+            "quotes extra",
+            "quotes extra",
+            "quotes extra",
+            "quotes extra",
+            "quotes extra"
+        ]
     }
 }

src/components/Result.jsx

@@ -1,61 +1,28 @@
-import React from "react";
+import React, {useState} from "react";
 import '../assets/css/style_result.css';
 import resultPic from "../assets/img/sample_result.jpg";
+import quotes from "../assets/json/result.json"
 
 function Result(props) {
+    const results = props.results;
+
+    // // console.log(typeof quotes)
+
+    // const {introvert, extravert} = quotes;
+    // console.log(typeof introvert, introvert)
+    // console.log(typeof extravert, extravert )
+
     return ( 
-    <div>
-        <div className="grid-parent">
-            <span className="title center">Result</span>
-            <img src={resultPic} className="picture result_picture_elements" alt="" />
-            <div className="diagram">
-                circle
-            </div>
+    <div className="container-section">
+        <div className="picture-section">
+            <img src={resultPic} className="resultPic" alt="what?" />
         </div>
-        <div className ="grid-parent checkList">
-            <span className="title center">Check List</span>
-            <div class="items">
-                <div><label><input type="checkbox"/><span>Results sentences are in here esults sentences are in hereesults sentences are in hereesults sentences are in hereesults sentences are in hereesults sentences are in hereesults sentences are in hereesults sentences are in here</span></label></div>
-                <div><label><input type="checkbox"/><span>Results sentences are in here</span></label></div>
-                <div><label><input type="checkbox"/><span>Results sentences are in here</span></label></div>
-                <div><label><input type="checkbox"/><span>Results sentences are in here</span></label></div>
-                <div><label><input type="checkbox"/><span>Results sentences are in here</span></label></div>
-            </div>
-        </div>
-        <div className="grid-parent">
-            <span className="title center">Share</span>
-            <div className="items">
-                <span>weChat</span>
-                <span>Messenger</span>
-                <span>KaKao talk</span>
-            </div>
+        <div className="result-section">
+            <div className="center title">Result</div>
+            <div className="center"></div>
         </div>
     </div>
     );
 }
 
-export default Result;
-
-
-// results: Array(2)
-// 0: {lion: 0}
-// 1: {cow: 0}
-
-
-// const results = props.results;
-
-// const final_result = () =>{
-//     results.map((res)=>{
-//         if(res.lion > res.cow){
-//             return res
-//         }
-//     })
-// }
-
-// <div>
-//     {props.results.map((e, idx) => (
-//             <div key={idx}>
-//                 {Object.keys(e)}:{Object.values(e)}
-//             </div>
-//         ))}
-// </div> 
+export default Result;