Display Dynamic Display Stats

Author: josephmfaulkner

.eslintcache

@@ -1,3 +1,4 @@
+@media screen and (min-width: 600px) {
 .BlockStatsDisplayRow {
     display: flex;
     margin: 10px;
@@ -41,5 +42,53 @@
     justify-content: space-around;
     line-height:30px;
 }
+}
+
+@media screen and (max-width: 600px) {
+    .BlockStatsDisplayRow {
+        display: flex;
+        flex-direction: column;
+        margin: 0px;
 
+    }
+    
+    .BlockStatDisplayContainer {
+    
+        /* position: relative; */
+        top: 50%;
+        right: 50%;
+        /* -ms-transform: translate(50%,-50%); */
+        /* transform: translate(50%,-50%); */
+        width: 100%;
+        margin-right: 10px;
+    
+    }
+    
+    .BlockStatGridDisplay  {
+        /*
+        background-color: black;
+        background-image: linear-gradient(#749494, #333536);
+        */
+        margin: auto;
+        /*
+        -webkit-box-shadow: 0px 0px 100px 22px rgba(255,255,255,0.17); 
+        box-shadow: 0px 0px 100px 22px rgba(255,255,255,0.17);
+        */
+        width: 10vw;
+    }
+    
+    .BlockStatGridDisplaygridRow{
+        padding: 0;
+        margin: 0;
+        list-style: none;
+        display: -webkit-box;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+        -webkit-flex-flow: row;
+        justify-content: space-around;
+        line-height:30px;
+    }
+  }
 

src/screens/components/BlockDisplay.css

@@ -16,7 +16,7 @@ class BlockDisplay extends React.Component {
                     {this.props.blockData.map((row, indexRow) =>
                         <div key={indexRow} className="BlockStatGridDisplaygridRow">
                             {row.map((blockNumber, indexColumn) =>{
-                                let classNames = "gridBlock " + mapBlockNumberToColorClass(blockNumber);
+                                let classNames = "gridBlock gridBlockDisplay " + mapBlockNumberToColorClass(blockNumber);
                                 let divKey = `${indexRow}-${indexColumn}`;
                                 return(
                                     <div key={divKey} className={classNames}></div>  

src/screens/components/BlockDisplay.js

@@ -46,4 +46,9 @@
     content:'';
     float:left;
     padding-top:100%;
+}
+
+.gridBlockDisplay {
+    border: none !important;
+
 }