Merge pull request #8 from columbiaspace/shirley

src/helpers/RockData.js

@@ -0,0 +1,36 @@
+const fs = require('fs'); // import 'fs' module ot work with file system
+
+// converts image to Base64
+function imageToBase64(imagePath) {
+    const imageBuffer = fs.readFileSync(imagePath); // read image file
+    const base64Image = imageBuffer.toString('base64'); // convert image file to Base64
+    return base64Image;
+}
+
+export const RockData = [
+
+    {
+        id: "rock1",
+        name: "Rock 1",
+        location: "1°N 1°W",
+        color: "red",
+        photo: imageToBase64("https://static.wikia.nocookie.net/minecraft_gamepedia/images/e/e1/Redstone_Dust_JE2_BE2.png/revision/latest?cb=20210427032319")
+
+    },
+
+    {
+        id: "rock2",
+        name: "Rock 2",
+        location: "2°N 2°W",
+        color: "orange",
+        photo: imageToBase64("")
+    },
+
+    {
+        id: "rock3",
+        name: "Rock 3",
+        location: "3°N 3°W",
+        color: "yellow",
+        photo: imageToBase64("")
+    },
+];

src/pages-style/rocks.css

@@ -1,3 +1,55 @@
+* {
+    box-sizing: border-box;
+}
+
+.container {
+    display: flex; /* allows flex items to be laid out according to flex-direction*/
+    flex-direction: row; /* arranges flex items from left to right */
+    height: 85vh; /* fills 85% of the page */
+    background-color: red;
+}
+
+.column {
+    display: flex;
+    flex: 1; /* flex item should grow to fill space within flex container*/
+    flex-direction: column; /* arranges flex items from top to bottom */
+    background-color: orange;
+}
+
+.maps-container {
+    width: 100%;
+    height: 50%;
+    display: flex;
+    justify-content: space-between;
+    padding: 0; /* space between content of container and its border */
+    margin: 0; /* space between container's border and neighbouring containers*/
+    background-color: yellow;
+}
+
+.subcontainer { /* applies to both subcontainers */
+    width: 50%;
+    height: 100%;
+    padding: 1;
+    margin: 0;
+    background-color: brown;
+}
+
+.astronaut-loc-container {
+    background-color: green;
+}
+
+.sampling-map-container {
+    background-color: blue;
+}
+
+.points-of-interest-container {
+    width: 100%;
+    height: 50%;
+    padding: 0;
+    margin: 0;
+    background-color: purple;
+}
+
 .warning-modal {
     position: fixed;
     top: 0;
@@ -26,6 +78,4 @@ button {
     top: 10px;
     right: 10px;
     cursor: pointer;
-}
-
-
+}

src/pages/rocks.js

@@ -6,8 +6,27 @@ import './../pages-style/rocks.css';
 function Rocks() {
   return (
     <div>
-      <h1>Rocks</h1>
-
+      <h1>Geological Sampling</h1>
+        <div className="container">
+          { /* Maps Column on the left half */ }
+          <div className="column">
+            <div className="maps-container">
+              <div className="subcontainer astronaut-loc-container">
+                <h2>Astronaut Location</h2>
+              </div>
+              <div className="subcontainer sampling-map-container">
+                <h2>Sample Map</h2>
+              </div>
+            </div>
+            <div className="points-of-interest-container">
+              <h2>Points of Interest</h2>
+            </div>
+          </div>
+          { /* Rocks Column on the right half */ }
+          <div className="column">
+            <h2>Table of Rocks</h2>
+          </div>
+        </div>
     </div>
   );
 }