Style: Place language switcher in appropriate place.

covid19india · May 13, 2020 · f046187 · f046187
1 parent 18fd7e1
commit f046187
Show file tree

Hide file tree

Showing 17 changed files with 712 additions and 1,200 deletions.
diff --git a/all_locales.json b/all_locales.json
diff --git a/missing_locales.json b/missing_locales.json
diff --git a/public/locales/en.json b/public/locales/en.json
diff --git a/src/App.scss b/src/App.scss
@@ -153,6 +153,25 @@ h6 {
     text-decoration: none;
   }
 
+  .LanguageSwitcher {
+    .button {
+      border: 0;
+      color: #6c757d;
+      cursor: pointer;
+      font-family: 'archia';
+      font-size: 12px;
+      font-weight: 600;
+      margin: 0;
+      padding: 1.5rem;
+      transition: all 0s ease-in-out;
+      width: 3rem;
+
+      &:active {
+        border: 0;
+      }
+    }
+  }
+
   .navbar-left {
     color: $gray;
     cursor: pointer;
@@ -181,8 +200,9 @@ h6 {
     font-size: 12px;
     font-weight: 600;
     padding: 1.5rem;
+    text-align: center;
     transition: all 0s ease-in-out;
-    width: 2rem;
+    width: 3rem;
 
     &:hover {
       background: $pblue;
@@ -901,7 +921,6 @@ h6 {
           align-items: center;
           display: flex;
           flex-direction: row;
-          height: .9rem;
           justify-content: space-between;
           position: relative;
 
@@ -994,7 +1013,6 @@ h6 {
             align-items: center;
             display: flex;
             flex-direction: row;
-            height: .9rem;
             justify-content: space-between;
             position: relative;
 
@@ -1221,6 +1239,11 @@ h6 {
     width: calc(100% - 4rem);
   }
 
+  .search-input-wrapper {
+    position: relative;
+    width: 100%;
+  }
+
   .search-placeholder {
     color: $gray-mid;
     font-family: 'archia';
@@ -1242,7 +1265,7 @@ h6 {
       color: $gray-mid;
       left: .75rem;
       position: absolute;
-      top: 4.15rem;
+      top: 1.25rem;
       transition: all .2s ease-in-out;
     }
 
@@ -1263,7 +1286,7 @@ h6 {
     justify-content: center;
     position: absolute;
     right: 1rem;
-    top: 4.15rem;
+    top: 1.35rem;
     transition: all .2s ease-in-out;
     width: 20px;
 
@@ -1752,6 +1775,9 @@ h6 {
 
   h5 {
     font-weight: 600;
+    overflow-wrap: break-word;
+    text-align: center;
+    width: 100%;
   }
 
   .is-cherry {
@@ -1877,7 +1903,6 @@ table {
     align-items: center;
     display: flex;
     flex-direction: row;
-    height: .9rem;
     justify-content: space-between;
     position: relative;
 
@@ -4648,16 +4673,26 @@ footer {
 }
 
 .LanguageSwitcher {
+  z-index: 999;
+
   .button {
     border: 2px solid $gray-light;
-    border-radius: 5px;
+    border-radius: 0;
     color: $gray;
     font-family: 'archia';
     font-size: .75rem;
     font-weight: 600;
     padding: .5rem;
     text-transform: unset;
 
+    &:hover {
+      background: $gray-hover !important;
+    }
+
+    &:active {
+      border: 2px solid transparent;
+    }
+
     * {
       align-self: center;
     }
@@ -4669,6 +4704,7 @@ footer {
 
   a {
     &.select-menu-item {
+      color: $gray;
       display: flex;
       flex-direction: row;
       font-family: 'archia';
@@ -4771,15 +4807,14 @@ footer {
     position: fixed;
     z-index: 99999;
 
-
     .navbar-left {
       margin-top: auto;
       order: 3;
       padding-left: 0;
       padding-right: 0;
       text-align: center;
       transition: all .2s ease-in-out;
-      width: 5rem;
+      width: 100%;
 
       &:hover {
         background: $gray-hover;
@@ -4827,7 +4862,7 @@ footer {
       border-right: solid 2px $gray-light-opaque;
       flex-direction: column;
       padding-left: 0;
-      padding-top: 5.5rem;
+      padding-top: 9.75rem;
       top: 0;
       width: 15rem;
       z-index: -1 !important;
@@ -5378,6 +5413,25 @@ footer {
       min-width: 1rem;
     }
   }
+
+  .LanguageSwitcher {
+    .select-menu-modal {
+      background: transparent;
+      width: auto;
+
+      div {
+        background: none;
+      }
+    }
+
+    .select-menu-list {
+      align-self: center;
+    }
+
+    .select-menu-item {
+      width: 10rem !important;
+    }
+  }
 }
 
 // Dark Mode
@@ -5800,6 +5854,38 @@ footer {
       filter: invert(1) hue-rotate(180deg) saturate(5);
     }
   }
+
+  .LanguageSwitcher {
+    summary {
+      box-shadow: none;
+    }
+
+    .button {
+      background: #1e1e30;
+    }
+
+    .select-menu-list {
+      background: transparent;
+      border: 0;
+    }
+
+    .select-menu-modal {
+      background: transparent;
+      height: 100%;
+
+      div {
+        background: none;
+        border: 1px solid #1e1e30bb;
+      }
+    }
+
+    a {
+      &.select-menu-item {
+        background: #161625 !important;
+        border: 1px solid #1e1e30bb;
+      }
+    }
+  }
 }
 
 // Animation Support

diff --git a/src/components/home.js b/src/components/home.js
@@ -1,5 +1,4 @@
 import Footer from './footer';
-import LanguageSwitcher from './languageswitcher';
 import Level from './level';
 import MapExplorer from './mapexplorer';
 import Minigraph from './minigraph';
@@ -23,6 +22,7 @@ import {
 import 'intersection-observer';
 import Observer from '@researchgate/react-intersection-observer';
 import axios from 'axios';
+import i18n from 'i18next';
 import React, {useState, useCallback, useMemo} from 'react';
 import * as Icon from 'react-feather';
 import {Helmet} from 'react-helmet';
@@ -181,7 +181,7 @@ function Home(props) {
               <h5>
                 {isNaN(Date.parse(formatDate(lastUpdated)))
                   ? ''
-                  : formatDateAbsolute(lastUpdated)}
+                  : `${formatDateAbsolute(lastUpdated, i18n.language)} IST`}
               </h5>
               {fetched && !showUpdates && (
                 <div className="bell-icon">
@@ -190,7 +190,6 @@ function Home(props) {
                 </div>
               )}
               {fetched && showUpdates && BellOff}
-              <LanguageSwitcher />
             </div>
           </div>
 

diff --git a/src/components/languageswitcher.js b/src/components/languageswitcher.js
@@ -21,7 +21,7 @@ export default function LanguageSwitcher() {
           {locales[language]}
         </Button>
         <SelectMenu.Modal className="select-menu-modal">
-          <SelectMenu.List>
+          <SelectMenu.List className="select-menu-list">
             {Object.entries(locales).map(([key, language]) => (
               <SelectMenu.Item
                 key={key}

diff --git a/src/components/mapexplorer.js b/src/components/mapexplorer.js
@@ -8,11 +8,13 @@ import {
   MAP_VIEWS,
   STATE_CODES_REVERSE,
   STATE_POPULATIONS,
+  LOCALE_SHORTHANDS,
 } from '../constants';
 import {formatDate, formatNumber} from '../utils/commonfunctions';
 
 import {formatDistance, format, parse} from 'date-fns';
 import equal from 'fast-deep-equal';
+import i18n from 'i18next';
 import React, {useState, useEffect, useMemo, useCallback} from 'react';
 import ReactDOM from 'react-dom';
 import * as Icon from 'react-feather';
@@ -336,11 +338,13 @@ function MapExplorer({
           {t(currentMap.name)} {t('Map')}
         </h1>
         <h6>
-          {window.innerWidth <= 769 ? t('Tap') : t('Hover')} over a{' '}
-          {currentMapMeta.mapType === MAP_TYPES.COUNTRY
-            ? t('state/UT')
-            : t('district')}{' '}
-          {t('for more details')}
+          {t('{{action}} over a {{mapType}} for more details', {
+            action: window.innerWidth <= 769 ? 'Tap' : 'Hover',
+            mapType:
+              currentMapMeta.mapType === MAP_TYPES.COUNTRY
+                ? 'state/UT'
+                : 'district',
+          })}
         </h6>
       </div>
 
@@ -411,10 +415,12 @@ function MapExplorer({
           </div>
           <h6 className="timestamp">
             {!isNaN(parse(testObj?.updatedon, 'dd/MM/yyyy', new Date()))
-              ? `${t('As of')} ${format(
-                  parse(testObj?.updatedon, 'dd/MM/yyyy', new Date()),
-                  'dd MMM'
-                )}`
+              ? t('As of {{date}}', {
+                  date: format(
+                    parse(testObj?.updatedon, 'dd/MM/yyyy', new Date()),
+                    'dd MMM'
+                  ),
+                })
               : ''}
           </h6>
           {testObj?.totaltested?.length > 1 && (
@@ -450,7 +456,10 @@ function MapExplorer({
                   ? ''
                   : formatDistance(
                       new Date(formatDate(panelRegion.lastupdatedtime)),
-                      new Date()
+                      new Date(),
+                      {
+                        locale: LOCALE_SHORTHANDS[i18n.language],
+                      }
                     ) +
                     ' ' +
                     t('ago')}
@@ -580,18 +589,18 @@ function MapExplorer({
               });
           }}
         >
-          <h4>Zones</h4>
+          <h4>{t('Zones')}</h4>
         </div>
       </div>
 
       <h6 className="footnote table-fineprint">
-        &dagger; {t('Based on 2019 population projection by NCP') + '('}
+        &dagger; {t('Based on 2019 population projection by NCP') + ' ('}
         <a
           href="https://nhm.gov.in/New_Updates_2018/Report_Population_Projection_2019.pdf"
           target="_noblank"
           style={{color: '#6c757d'}}
         >
-          {t('report')}
+          {t('source')}
         </a>
         )
       </h6>