Merge pull request #68 from mask-application/add-neshan-logo

map: add neshan logo
mask-application · Apr 21, 2020 · 948e5a3 · 948e5a3
2 parents 152e3f7 + c8d2575
commit 948e5a3
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 16 deletions.
diff --git a/src/Logo_copyright-min.png b/src/Logo_copyright-min.png
diff --git a/src/components/Map/Map.js b/src/components/Map/Map.js
@@ -4,7 +4,8 @@ import './MapStyle.scss';
 import * as utility from './utility';
 import Papa from 'papaparse';
 import * as d3 from 'd3';
-import logo from '../../logo1.png';
+import logo from '../../logo.png';
+import neshanLogo from '../../Logo_copyright-min.png';
 import { db } from '../../services/db';
 
 import { Menu, MenuItem, IconButton, Collapse } from '@material-ui/core';
@@ -124,8 +125,8 @@ function Map() {
         setZoom(i);
         break;
       } else if (
-          inverseZoomLevel >= zoomLevels[i] &&
-          inverseZoomLevel < zoomLevels[i + 1]
+        inverseZoomLevel >= zoomLevels[i] &&
+        inverseZoomLevel < zoomLevels[i + 1]
       ) {
         setZoom(i + 1);
         break;
@@ -139,9 +140,9 @@ function Map() {
 
   useEffect(() => {
     map &&
-    map.on('zoom', function () {
-      findZoom();
-    });
+      map.on('zoom', function () {
+        findZoom();
+      });
   });
 
   useEffect(() => {
@@ -303,11 +304,14 @@ function Map() {
         }}
       />
       <div className="comment-wrapper">
-        <div className="map-comment">{(chosenMap || {}).comment}</div>
+        <div className="map-comment">{(chosenMap || {}).comment || 'ــ'}</div>
       </div>
-      <div className="logo-wrapper">
+      <div className="logo-wrapper right">
         <img src={logo} alt="" />
       </div>
+      <div className="logo-wrapper left">
+        <img src={neshanLogo} alt="" />
+      </div>
       {renderMenu()}
     </div>
   );

diff --git a/src/components/Map/MapStyle.scss b/src/components/Map/MapStyle.scss
@@ -34,11 +34,16 @@
   .logo-wrapper {
     position: fixed;
     z-index: 10;
-    bottom: 100px;
-    left: 5%;
     display: flex;
-    img {
-      height: 70px;
+
+    &.left {
+      left: 5%;
+      bottom: 105px;
+    }
+
+    &.right {
+      right: 5%;
+      bottom: 95px;
     }
   }
 
@@ -98,19 +103,42 @@
     color: #797979;
   }
 
-  @media screen and (min-width: 760px) {
+  @media (max-width: 760px) {
     .logo-wrapper {
       img {
-        height: 100px;
+        width: 70px;
+      }
+    }
+  }
+
+  @media screen and (min-width: 761px) {
+    .logo-wrapper {
+      img {
+        width: 100px;
+      }
+
+      &.left {
+        bottom: 110px;
+      }
+
+      &.right {
+        bottom: 90px;
       }
     }
   }
 
   @media screen and (max-width: 328px) {
     .logo-wrapper {
-      bottom: 120px;
       img {
-        height: 50px;
+        width: 50px;
+      }
+
+      &.left {
+        bottom: 122px;
+      }
+
+      &.right {
+        bottom: 112px;
       }
     }
   }