Merge branch 'master' of https://github.com/projectunic0rn/travel-map-ui

into HEAD
hoangviet1993 · Mar 13, 2020 · 05dfb79 · 05dfb79
2 parents e3aa001 + 89dae3e
commit 05dfb79
Show file tree

Hide file tree

Showing 18 changed files with 127 additions and 206 deletions.
diff --git a/ISSUE_TEMPLATE.mdown b/ISSUE_TEMPLATE.mdown
@@ -0,0 +1,39 @@
+# Issue Overview
+
+## What are you trying to do?
+
+
+
+## What did you expect to happen?
+
+
+
+## What actually happened?
+
+
+
+## Steps to Reproduce
+
+  1.
+  1.
+  1.
+
+# Issue Details
+
+## Web/Mobile?
+
+- [ ] Web
+- [ ] Mobile
+
+## Please provide the browser (for web) and/or mobile device (for mobile):
+
+
+
+## Provide the page URL where you encountered the issue:
+
+
+
+## Provide a screenshot and/or the screen resolution when encountering the issue:
+
+
+
diff --git a/src/_App.scss b/src/_App.scss
@@ -41,7 +41,7 @@ body {
                                   supported by Chrome and Opera */
 }
 
-input {
+input, select {
   border-radius: 0;
   -webkit-appearance: none;
 }

diff --git a/src/pages/Home/MapPage.js b/src/pages/Home/MapPage.js
@@ -5,7 +5,7 @@ import { ADD_MULTIPLE_PLACES } from "../../GraphQL";
 
 import { TravelScoreCalculator } from "../../TravelScore";
 import CountryMap from "./subcomponents/CountryMap";
-import CityMap from "./subcomponents/CityMapTrialConst";
+import CityMap from "./subcomponents/CityMap";
 import Loader from "../../components/common/Loader/Loader";
 
 const MapPage = ({

diff --git a/src/pages/Home/_MapPage.scss b/src/pages/Home/_MapPage.scss
@@ -286,5 +286,35 @@
       cursor: pointer;
     }
   }
+  .country-svg {
+    fill: #6E7377;
+    stroke: rgb(100, 100, 100);
+    stroke-width: 0.75;
+    outline: none;
+    &:hover {
+      fill: rgb(180, 180, 180);
+      stroke: rgb(180, 180, 180);
+      stroke-width: 0.75;
+      outline: none;
+    }
+    &:active {
+      fill: #a7e1ff;
+      stroke: #a7e1ff;
+      stroke-width: 0.75;
+      outline: none;
+    }
+  }
+  .past-country-fill {
+    fill: #CB7678;
+  }
+  .future-country-fill {
+    fill: #73A7C3;
+  }
+  .live-country-fill {
+    fill: #96B1A8;
+  }
+  .past-future-country-fill {
+    fill: #a780cd;
+  }
 }
 
diff --git a/...s/Home/subcomponents/CityMapTrialConst.js → src/pages/Home/subcomponents/CityMap.js b/...s/Home/subcomponents/CityMapTrialConst.js → src/pages/Home/subcomponents/CityMap.js
@@ -25,7 +25,7 @@ import PopupPrompt from "../../../components/Prompts/PopupPrompt";
 import NewUserSuggestions from "./NewUserSuggestions";
 import ClusterMarker from "./ClusterMarker";
 
-function CityMapTrialConst(props) {
+function CityMap(props) {
   const [viewport, handleViewport] = useState({
     width: window.innerWidth,
     height: window.innerHeight,
@@ -1124,7 +1124,7 @@ function CityMapTrialConst(props) {
   );
 }
 
-CityMapTrialConst.propTypes = {
+CityMap.propTypes = {
   tripData: PropTypes.object,
   handleMapTypeChange: PropTypes.func,
   deleteCity: PropTypes.func,
@@ -1141,4 +1141,4 @@ ClusterMarker.propTypes = {
   onClick: PropTypes.func
 };
 
-export default CityMapTrialConst;
+export default CityMap;
diff --git a/src/pages/Home/subcomponents/FriendCountryMap.js b/src/pages/Home/subcomponents/FriendCountryMap.js
@@ -169,96 +169,27 @@ const FriendCountryMap = props => {
         }
       }
     }
-    let countryStyles = {
-      default: {
-        fill: "#6E7377",
-        stroke: "rgb(100, 100, 100)",
-        strokeWidth: 0.75,
-        outline: "none"
-      },
-      hover: {
-        fill: "rgb(180, 180, 180)",
-        stroke: "rgb(180, 180, 180)",
-        strokeWidth: 0.75,
-        outline: "none"
-      },
-      pressed: {
-        fill: "#a7e1ff",
-        stroke: "#a7e1ff",
-        strokeWidth: 0.75,
-        outline: "none"
-      }
-    };
-
     if (isCountryIncluded) {
-      let countryTimingArraySorted = countryTimingArray.sort((a, b) => a - b);
-      switch (countryTimingArraySorted.join()) {
-        case "0":
-          if (activeTimings[0]) {
-            countryStyles.default.fill = "#CB7678";
-          }
-          break;
-        case "1":
-          if (activeTimings[1]) {
-            countryStyles.default.fill = "#73A7C3";
-          }
-          break;
-        case "2":
-          if (activeTimings[2]) {
-            countryStyles.default.fill = "#96B1A8";
-          }
-          break;
-        case "0,1":
-          if (activeTimings[0] && activeTimings[1]) {
-            countryStyles.default.fill = "#a780cd";
-          } else if (activeTimings[0]) {
-            countryStyles.default.fill = "#CB7678";
-          } else if (activeTimings[1]) {
-            countryStyles.default.fill = "#73A7C3";
-          }
-          break;
-        case "0,2":
-          if (activeTimings[0] && activeTimings[2]) {
-            countryStyles.default.fill = "#96B1A8";
-          } else if (activeTimings[0]) {
-            countryStyles.default.fill = "#CB7678";
-          } else if (activeTimings[2]) {
-            countryStyles.default.fill = "#96B1A8";
-          }
-          break;
-        case "1,2":
-          if (activeTimings[1] && activeTimings[2]) {
-            countryStyles.default.fill = "#96B1A8";
-          } else if (activeTimings[1]) {
-            countryStyles.default.fill = "#73A7C3";
-          } else if (activeTimings[2]) {
-            countryStyles.default.fill = "#96B1A8";
-          }
-          break;
-        case "0,1,2":
-          if (activeTimings[0] && activeTimings[1]) {
-            if (activeTimings[2]) {
-              countryStyles.default.fill = "#96B1A8";
-            } else {
-              countryStyles.default.fill = "#a780cd";
-            }
-          } else if (activeTimings[0] && activeTimings[2]) {
-            countryStyles.default.fill = "#96B1A8";
-          } else if (activeTimings[1] && activeTimings[2]) {
-            countryStyles.default.fill = "#96B1A8";
-          } else if (activeTimings[0]) {
-            countryStyles.default.fill = "#DBC071";
-          } else if (activeTimings[1]) {
-            countryStyles.default.fill = "#73A7C3";
-          } else if (activeTimings[2]) {
-            countryStyles.default.fill = "#96B1A8";
-          }
-          break;
-        default:
-          break;
+      let filteredTimings = countryTimingArray.filter(
+        timing => activeTimings[timing] !== false
+      );
+      if (filteredTimings.indexOf(2) !== -1) {
+        return "country-svg live-country-fill";
+      } else if (
+        filteredTimings.length === 1 &&
+        filteredTimings.indexOf(0) !== -1
+      ) {
+        return "country-svg past-country-fill";
+      } else if (
+        filteredTimings.length === 1 &&
+        filteredTimings.indexOf(1) !== -1
+      ) {
+        return "country-svg future-country-fill";
+      } else if (filteredTimings.length === 2) {
+        return "country-svg past-future-country-fill";
       }
     }
-    return countryStyles;
+    return "country-svg";
   }
 
   function handleClickedCountry(geography) {
@@ -373,7 +304,7 @@ const FriendCountryMap = props => {
                   projection={projection}
                   onMouseEnter={() => countryInfo(geography)}
                   onClick={() => handleClickedCountry(geography)}
-                  style={computedStyles(geography)}
+                  className={computedStyles(geography)}
                 />
               ))
             }

diff --git a/src/pages/Home/subcomponents/FriendReadonlyCountry.js b/src/pages/Home/subcomponents/FriendReadonlyCountry.js
@@ -235,7 +235,7 @@ const FriendReadonlyCountry = props => {
           } else if (activeTimings[1] && activeTimings[2]) {
             countryStyles.default.fill = "#8caeb0";
           } else if (activeTimings[0]) {
-            countryStyles.default.fill = "#DBC071";
+            countryStyles.default.fill = "#CB7678";
           } else if (activeTimings[1]) {
             countryStyles.default.fill = "#73A7C3";
           } else if (activeTimings[2]) {

diff --git a/src/pages/Home/subcomponents/LeaderboardCard.js b/src/pages/Home/subcomponents/LeaderboardCard.js
@@ -4,21 +4,7 @@ import { NavLink, withRouter } from "react-router-dom";
 import UserAvatar from "../../../components/UserAvatar/UserAvatar";
 
 function LeaderboardCard({ user, rank }) {
-  function handleFontSize() {
-    console.log(user.username);
-    if (user.username.length < 13) {
-      console.log(user.username);
-      return "18px";
-    } else if (user.username.length < 16) {
-      return "16px";
-    } else if (user.username.length < 18) {
-      return "14px";
-    } else if (user.username.length < 24) {
-      return "12px";
-    } else {
-      return "10px";
-    }
-  }
+
   return (
     <NavLink
       to={{

diff --git a/src/pages/Home/subcomponents/_CityMap.scss b/src/pages/Home/subcomponents/_CityMap.scss
@@ -382,6 +382,7 @@
         }
         @media screen and (max-width: 500px) {
           min-width: 350px;
+          transform: translateX(20px);
         }
         @media screen and (max-width: 450px) {
           min-width: 300px;
@@ -391,8 +392,8 @@
           min-width: 280px;
         }
         @media screen and (max-width: 320px) {
-          max-width: 300px;
-          min-width: 300px;
+          max-width: 260px;
+          min-width: 260px;
         }
 
         input {
@@ -436,6 +437,9 @@
   @media screen and (max-height: 1000px) {
     bottom: 20px;
   }
+  @media screen and (max-width: 500px) {
+    left: calc(50% - 80px);
+  }
   @media screen and (max-height: 400px) {
     left: calc(50% + 240px);
     bottom: 20px;
@@ -502,6 +506,9 @@
     flex-direction: column;
     font-size: 24px;
   }
+  @media screen and (max-width: 500px) {
+    left: calc(50% - 280px);
+  }
   select {
     background: none;
     border: none;
@@ -525,7 +532,7 @@
   top: 60px;
   color: #769f93;
   background: $light-green;
-  box-shadow: 0 0 14px 2px rgba(255, 225, 167, 0.75);
+  box-shadow: 0 0 14px 2px rgba(197, 238, 143, 0.75);
   svg {
     margin-left: 6px;
     fill: #769f93;
@@ -541,7 +548,7 @@
     left: calc(50% - 210px);
   }
   @media screen and (max-width: 500px) {
-    left: calc(50% - 60px);
+    left: calc(50% - 40px);
   }
 }
 
@@ -571,7 +578,7 @@
     left: calc(50% + 160px);
   }
   @media screen and (max-width: 500px) {
-    left: calc(50% + 8px);
+    left: calc(50% + 28px);
   }
 }
 
@@ -654,9 +661,9 @@
 #sc-controls-city-side-menu {
   display: flex;
   flex-direction: column;
-  width: 80px;
+  width: 60px;
   height: 48px;
-  left: 85px;
+  left: 95px;
   top: 320px;
 }
 
@@ -678,4 +685,8 @@
         transform: translate(-40px, 140px);
       }
     }
+  }
+
+  .mapboxgl-ctrl-geocoder--icon-close {
+    margin-top: 4px;
   }
diff --git a/src/pages/Home/subcomponents/_NewUserCity.scss b/src/pages/Home/subcomponents/_NewUserCity.scss
@@ -623,7 +623,7 @@
   overflow-x: hidden; /* Disable horizontal scroll */
   padding-top: 60px; /* Place content 60px from the top */
   transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
-  z-index: 5000;
+  z-index: 1000;
   a {
     padding: 8px 8px 8px 32px;
     text-decoration: none;

diff --git a/src/pages/Place/PlaceReviewCard.js b/src/pages/Place/PlaceReviewCard.js
@@ -74,7 +74,6 @@ function PlaceReviewCard({
       default:
         break;
     }
-    console.log(user);
     let filteredArray = user.CityReviews.filter(review => {
       for (let i in keyWords) {
         if (review.attraction_type === keyWords[i]) {
@@ -83,7 +82,6 @@ function PlaceReviewCard({
       }
       return false;
     });
-    console.log(filteredArray);
     handleFilteredCityReviews(filteredArray);
     handleLoaded(true);
   }, [page]);