Stats in mobile view positioning udpated as per issue #90

covid19india · Mar 25, 2020 · 7e5637a · 7e5637a
1 parent 8de3d90
commit 7e5637a
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 23 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -574,6 +574,24 @@ table {
       }
     }
   }
+  @media (max-width: 480px) {
+    .svg-parent{
+      padding-top: 80px;
+    }
+      .map-stats{
+        right: 0px;
+      }
+      h4 {
+          margin: 1.3em auto;
+        }
+      .stats-container {
+        display: flex;
+        .stats {
+          flex: 1;
+          margin: 0px 5px;
+        }
+      }
+    }
 }
 
 .tabs {

diff --git a/src/components/choropleth.js b/src/components/choropleth.js
@@ -168,35 +168,37 @@ function ChoroplethMap(props) {
       <div className="map-stats">
         <h4>{state.state}</h4>
 
-        <div className="stats">
-          <h5>Confirmed</h5>
-          <div className="stats-bottom">
-            <h1>{state.confirmed}</h1>
-            <h6>{}</h6>
+        <div className="stats-container" >
+          <div className="stats">
+            <h5>Confirmed</h5>
+            <div className="stats-bottom">
+              <h1>{state.confirmed}</h1>
+              <h6>{}</h6>
+            </div>
           </div>
-        </div>
 
-        <div className="stats is-blue">
-          <h5>Active</h5>
-          <div className="stats-bottom">
-            <h1>{state.active}</h1>
-            <h6>{}</h6>
+          <div className="stats is-blue">
+            <h5>Active</h5>
+            <div className="stats-bottom">
+              <h1>{state.active}</h1>
+              <h6>{}</h6>
+            </div>
           </div>
-        </div>
 
-        <div className="stats is-green">
-          <h5>Recovered</h5>
-          <div className="stats-bottom">
-            <h1>{state.recovered}</h1>
-            <h6>{}</h6>
+          <div className="stats is-green">
+            <h5>Recovered</h5>
+            <div className="stats-bottom">
+              <h1>{state.recovered}</h1>
+              <h6>{}</h6>
+            </div>
           </div>
-        </div>
 
-        <div className="stats is-gray">
-          <h5>Deceased</h5>
-          <div className="stats-bottom">
-            <h1>{state.deaths}</h1>
-            <h6>{}</h6>
+          <div className="stats is-gray">
+            <h5>Deceased</h5>
+            <div className="stats-bottom">
+              <h1>{state.deaths}</h1>
+              <h6>{}</h6>
+            </div>
           </div>
         </div>