Feat: Add active, recovered, deceased to district table. (covid19indi…

…a#1637)
dheerajbn · Dec 17, 2020 · 7301db0 · 7301db0
1 parent c4f1fd7
commit 7301db0
Show file tree

Hide file tree

Showing 2 changed files with 224 additions and 105 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -732,7 +732,6 @@ h6 {
 
       .state-last-update {
         background: transparent;
-        transform: translateX(1rem);
 
         &:hover {
           background: #fff !important;
@@ -751,7 +750,6 @@ h6 {
 
       .district-heading {
         background: $gray-light;
-        transform: translateX(1rem);
 
         td {
           background: $gray-light;
@@ -785,10 +783,6 @@ h6 {
           }
         }
       }
-
-      .district {
-        transform: translateX(1rem);
-      }
     }
 
     .affected-count {
@@ -1642,7 +1636,7 @@ table {
 
       &.spacer {
         background: #fff !important;
-        height: .5rem;
+        height: 2rem;
       }
     }
 
@@ -1696,31 +1690,63 @@ table {
     .state-last-update {
       background: transparent;
       color: $green !important;
-      transform: translateX(1rem);
+      height: 2rem;
+
+      h6 {
+        margin: 0;
+      }
 
       &:hover {
-        background: #fff !important;
+        background: transparent !important;
       }
 
-      td {
-        .last-update {
-          align-items: baseline;
-          display: flex;
-          flex-direction: row;
-          text-align: left;
-          width: 100%;
+      .disclaimer {
+        backdrop-filter: saturate(180%) blur(20px);
+        background: $gray-light;
+        border-radius: 5px;
+        color: $gray;
+        display: flex;
+        flex-direction: row;
+        font-family: 'archia';
+        font-size: 12px;
+        left: 0;
+        margin-top: .5rem;
+        padding: .5rem;
+        width: 14rem;
 
-          h6 {
-            color: $green !important;
-            font-weight: 600;
+        svg {
+          margin-right: .25rem;
+          margin-top: -.25rem;
+          stroke-width: 2px;
+          width: 20px !important;
+        }
+      }
+
+      .state-page-link {
+        padding: 0 !important;
+
+        a {
+          background: $yellow-light;
+          border-radius: 5px;
+          color: $orange;
+          font-size: .75rem;
+          padding: .5rem;
+          text-decoration: none;
+          transition: all .2s ease-in-out;
+
+          &:hover {
+            background: $yellow-hover;
+
+            svg {
+              stroke: $orange;
+            }
           }
         }
       }
     }
 
     .district-heading {
       background: $gray-light;
-      transform: translateX(1rem);
 
       &:hover {
         background: $gray-light !important;
@@ -1755,49 +1781,8 @@ table {
             width: 10px;
           }
         }
-
-        &.state-page-link {
-          background: $white;
-          padding: 0;
-          text-align: left;
-
-          div {
-            align-items: center;
-            background: $yellow-light;
-            border-radius: 5px;
-            color: $orange;
-            float: left;
-            font-size: .75rem;
-            padding: .45rem;
-            transition: all .2s ease-in-out;
-
-            &:hover {
-              background: $yellow-hover;
-
-              svg {
-                stroke: $orange;
-              }
-            }
-
-            svg {
-              color: $orange-mid;
-              height: 12px;
-              margin-bottom: 1px;
-              margin-left: .25rem;
-              stroke-width: 3px;
-              transition: all .2s ease-in-out;
-              vertical-align: middle;
-              width: 12px;
-            }
-          }
-        }
       }
     }
-
-
-    .district {
-      transform: translateX(1rem);
-    }
   }
 
   .affected-count {
@@ -4772,7 +4757,6 @@ footer {
 
         .state-last-update {
           background: transparent;
-          transform: translateX(1rem);
 
           &:hover {
             background: #fff !important;
@@ -4791,7 +4775,6 @@ footer {
 
         .district-heading {
           background: $gray-light;
-          transform: translateX(1rem);
 
           td {
             background: $gray-light;
@@ -4825,11 +4808,6 @@ footer {
             }
           }
         }
-
-
-        .district {
-          transform: translateX(1rem);
-        }
       }
 
       .affected-count {