Merge pull request #35 from oslabs-beta/rydang/responsive

responsive design for containers, also hidden jump button

Author: mylee1995

package/tree.js

@@ -19,7 +19,7 @@ class Tree {
   }
 
   // deep copies only the state of each component and creates a new tree
-  getCopy(copy = new Tree('root', true, 'root')) {
+  getCopy(copy = new Tree('root', true)) {
     // copy state of children
     copy.children = this.children.map(child => new Tree(child.component.state, true, child.component.constructor.name));
 

src/app/containers/MainContainer.jsx

@@ -44,33 +44,33 @@ class MainContainer extends Component {
     this.setState({ port });
   }
 
-  moveBackward(){
+  moveBackward() {
     const { snapshots, snapshotIndex } = this.state;
-    if(snapshots.length>0 && snapshotIndex>0) {
-      const newIndex = snapshotIndex-1;
+    if (snapshots.length > 0 && snapshotIndex > 0) {
+      const newIndex = snapshotIndex - 1;
       this.handleJumpSnapshot(newIndex);
       this.setState({ snapshotIndex: newIndex });
     }
   }
 
-  moveForward(){
+  moveForward() {
     const { snapshots, snapshotIndex } = this.state;
-    if(snapshotIndex<snapshots.length-1){
-      const newIndex = snapshotIndex+1;
+    if (snapshotIndex < snapshots.length - 1) {
+      const newIndex = snapshotIndex + 1;
       this.handleJumpSnapshot(newIndex);
       this.setState({ snapshotIndex: newIndex });
     }
   }
 
-  playForward(){
-    var play = setInterval(()=>{
+  playForward() {
+    var play = setInterval(() => {
       const { snapshots, snapshotIndex } = this.state;
-      if(snapshotIndex<snapshots.length-1){
-        const newIndex = snapshotIndex+1;
+      if (snapshotIndex < snapshots.length - 1) {
+        const newIndex = snapshotIndex + 1;
         this.handleJumpSnapshot(newIndex);
         this.setState({ snapshotIndex: newIndex });
       } else clearInterval(play);
-    },1000)
+    }, 1000)
     play();
   }
 
@@ -137,16 +137,16 @@ class MainContainer extends Component {
             emptySnapshot={this.emptySnapshot}
           />
           <StateContainer snapshot={snapshots[snapshotIndex]} />
+          <TravelContainer
+            snapshotsLength={snapshots.length}
+            handleChangeSnapshot={this.handleChangeSnapshot}
+            handleJumpSnapshot={this.handleJumpSnapshot}
+            snapshotIndex={snapshotIndex}
+            moveBackward={this.moveBackward}
+            moveForward={this.moveForward}
+            playForward={this.playForward}
+          />
         </div>
-        <TravelContainer
-          snapshotsLength={snapshots.length}
-          handleChangeSnapshot={this.handleChangeSnapshot}
-          handleJumpSnapshot={this.handleJumpSnapshot}
-          snapshotIndex={snapshotIndex}
-          moveBackward = {this.moveBackward}
-          moveForward = {this.moveForward}
-          playForward = {this.playForward}
-        />
       </div>
     );
   }

src/app/containers/TravelContainer.jsx

@@ -1,36 +1,31 @@
-import React, { Component } from 'react';
+import React from 'react';
 import MainSlider from '../components/MainSlider'
 
-
-
-
-class TravelContainer extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  
-
-  render() {
-    return (
-      <div className="travel-container">
-        <div className="play-button" onClick={this.props.playForward}>
-            play
-        </div>
-        <MainSlider
-          snapshotLength = {this.props.snapshotsLength} 
-          handleChangeSnapshot = {this.props.handleChangeSnapshot}
-          snapshotIndex = {this.props.snapshotIndex}
-          handleJumpSnapshot={this.props.handleJumpSnapshot}
-        />
-        <div className="backward-button" onClick={this.props.moveBackward}>
-          {'<'}
-        </div>
-        <div className="forward-button" onClick={this.props.moveForward}>
-          {'>'}
-        </div>
-      </div>
-    );
-  }
-}
+const TravelContainer = ({
+  playForward,
+  moveBackward,
+  moveForward,
+  snapshotsLength,
+  handleChangeSnapshot,
+  handleJumpSnapshot,
+  snapshotIndex,
+}) => (
+  <div className="travel-container">
+    <div className="play-button" onClick={playForward}>
+      play
+    </div>
+    <MainSlider
+      snapshotLength={snapshotsLength}
+      handleChangeSnapshot={handleChangeSnapshot}
+      snapshotIndex={snapshotIndex}
+      handleJumpSnapshot={handleJumpSnapshot}
+    />
+    <div className="backward-button" onClick={moveBackward}>
+      {'<'}
+    </div>
+    <div className="forward-button" onClick={moveForward}>
+      {'>'}
+    </div>
+  </div>
+);
 export default TravelContainer;

src/app/styles/components/_actionComponent.scss

@@ -1,7 +1,7 @@
 .action-component {
   padding: 5px 10px;
-  display: flex;
-  justify-content: space-around;
+  display: grid;
+  grid-template-columns: 5fr 1fr;
   align-items: center;
   height: 20px;
   background-color: $brand-color;
@@ -18,5 +18,8 @@
 
 .action-component button {
   position: relative;
-  right: 0px;
+}
+
+.action-component:hover .jump-button {
+  visibility: visible;
 }

src/app/styles/components/_buttons.scss

@@ -6,6 +6,7 @@
 .jump-button {
   @extend %button-shared;
   width: 50px;
+  visibility: hidden;
 }
 
 .jump-button:hover {

src/app/styles/layout/_actionContainer.scss

@@ -1,6 +1,4 @@
 .action-container {
-  flex: 3 auto;
-  height: 100%;
-  overflow: scroll;
+  overflow: auto;
   background-color: $brand-color;
 }

src/app/styles/layout/_stateContainer.scss

@@ -1,11 +1,5 @@
 .state-container {
-  font-size: 15px;
-  flex: 6 auto;
-  height: 100%;
-  overflow: scroll;
+  font-size: 12px;
+  overflow: auto;
   background-color: $brand-color;
 }
-
-// .state-container ul {
-//   background-color: $brand-color;
-// }

src/app/styles/layout/_travelContainer.scss

@@ -1,7 +1,6 @@
 .travel-container {
-    height: 20%;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-around;
-  }
+  }

src/app/styles/styles.scss

@@ -1,40 +1,50 @@
 .main-container {
   height: 100%;
-  margin: 0;
-  padding: 0;
+  margin: 0 auto;
+  padding: 0 auto;
   background-color: $brand-color;
+  overflow: hidden;
 }
 
 .head-container {
   height: 5%;
 }
 
 .body-container {
-  height: 75%;
+  height: 95%;
   width: 100%;
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-rows: 8fr 1fr;
+  grid-template-areas:
+    "actions states"
+    "travel travel";
 }
 
 
 /* if extension width is less than 500px, stack the body containers */
 // this is not working for some reason
 @media (max-width: 500px) {
   .body-container {
-    flex-direction: column;
-  }
-  .state-container {
-    // flex: 5 auto;
+    grid-template-rows: 4fr 4fr 1fr;
+    grid-template-areas:
+      "actions"
+      "states"
+      "travel";
   }
 }
+.travel-container {
+  grid-area: travel;
+}
 
+.action-container {
+  grid-area: actions;
+}
+.state-container {
+  grid-area: states;
+}
 .emptySnapshot{
   width: 100%;
 }
-
-
-
-
 .head-container,
 .body-container,
 .action-container,
@@ -43,4 +53,4 @@
   border-style: solid;
   border-color: $border-color;
   border-width: thin;
-}
+}