truly reponsive design

Author: rydang

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/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,7 +1,7 @@
 .main-container {
   height: 100%;
-  margin: 0;
-  padding: 0;
+  margin: 0 auto;
+  padding: 0 auto;
   background-color: $brand-color;
   overflow: hidden;
 }
@@ -11,10 +11,10 @@
 }
 
 .body-container {
-  height: 100%;
+  height: 95%;
   width: 100%;
   display: grid;
-  grid-template-rows: 5fr 1fr;
+  grid-template-rows: 8fr 1fr;
   grid-template-areas:
     "actions states"
     "travel travel";
@@ -25,17 +25,14 @@
 // this is not working for some reason
 @media (max-width: 500px) {
   .body-container {
-    grid-template-rows: 2.5fr 2.5fr 1fr;
+    grid-template-rows: 4fr 4fr 1fr;
     grid-template-areas:
       "actions"
       "states"
       "travel";
   }
 }
 .travel-container {
-  // height: 10%;
-  height: 100%;
-  margin-right: 1%;
   grid-area: travel;
 }