Improv: Set height dynamically on district expansion. (#1555)

covid19india · Apr 26, 2020 · b6cfffe · b6cfffe
1 parent 2d060cb
commit b6cfffe
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -4040,14 +4040,15 @@ footer {
     display: flex;
     flex-direction: column;
     margin-right: 1rem;
-    width: 10rem;
 
     .button {
       background: $gray-light;
       color: $gray;
+      font-weight: 600;
       height: 2.5rem;
       justify-content: center;
       margin-top: .75rem;
+      text-transform: unset;
       width: 5rem;
 
       &:hover {
@@ -4066,12 +4067,7 @@ footer {
       display: grid;
       grid-auto-flow: column;
       grid-gap: .5rem;
-      grid-template-rows: repeat(auto-fit, 2rem);
-      max-height: 20rem;
-      overflow-x: scroll;
-      overflow-y: none;
       padding-bottom: .5rem;
-      width: 30rem;
     }
 
     .district {

diff --git a/src/components/state.js b/src/components/state.js
@@ -118,6 +118,17 @@ function State(props) {
     setShowAllDistricts(!showAllDistricts);
   }
 
+  const getGridRowCount = () => {
+    const gridColumnCount = window.innerWidth >= 540 ? 3 : 2;
+    const districtCount =
+      (districtData[stateName] &&
+        Object.keys(districtData[stateName].districtData).length) ||
+      0;
+    const gridRowCount = Math.ceil(districtCount / gridColumnCount);
+    return gridRowCount;
+  };
+  const gridRowCount = getGridRowCount();
+
   return (
     <React.Fragment>
       <div className="State">
@@ -309,6 +320,11 @@ function State(props) {
                   <h2>Top districts</h2>
                   <div
                     className={`districts ${showAllDistricts ? 'is-grid' : ''}`}
+                    style={
+                      showAllDistricts
+                        ? {gridTemplateRows: `repeat(${gridRowCount}, 2rem)`}
+                        : {}
+                    }
                   >
                     {districtData[stateName]
                       ? Object.keys(districtData[stateName].districtData)