Merge pull request projectunic0rn#68 from projectunic0rn/new-map-resp…

…onsiveness

New map responsiveness

src/_App.scss

@@ -82,7 +82,6 @@ code {
 .button:link,
 .button:visited {
   cursor: pointer;
-  padding: 13px 15px;
   border: 1px solid #333;
   color: #333;
   font-weight: 700;

src/pages/Home/NewUserMap.js

@@ -51,7 +51,7 @@ const NewUserMap = () => {
 
   if (!loaded) return <Loader />;
   return (
-    <div className="map-container">
+    <div className="map-container" id = "new-map">
       <div className={mapPage ? "map city-map" : "map country-map"}>
         {mapPage ? (
           <NewUserCity

src/pages/Home/_MapPage.scss

@@ -15,41 +15,24 @@
   width: 100vw;
   margin: 0 auto;
   .country-map {
-    margin: 0px auto 0 auto;
-    max-width: 85vw;
+    margin: 0px;
+    height: 100%;
     position: relative;
     text-align: center;
     .rsm-svg {
-      min-width: 1500px;
-      min-height: calc(100% - 100px);
+      width: calc(100% - 0px);
+      height: calc(100% - 80px);
       transform: translate(0, -0px);
-      @media (max-width: 1600px) {
-        min-width: 1200px;
-      }
-      @media (max-width: 1250px) {
-        min-width: 1000px;
-      }
-      @media (max-width: 1050px) {
-        min-width: 800px;
-        transform: translateY(0px);
-      }
-      @media (max-width: 850px) {
-        min-width: 600px;
-        transform: translateY(-40px);
-      }
-      @media (max-width: 650px) {
-        min-width: 500px;
-        transform: translateY(-80px);
-      }
-      @media (max-height: 1100px) {
-        min-width: 500px;
-        transform: translateY(60px);
+      .rsm-zoomable-group {
+        @media (max-width: 1000px) {
+          transform: none;
+        }
       }
     }
   }
   .map {
     width: 100%;
-    height: calc(100% - 400px);
+    // height: calc(100% - 400px);
     &:focus {
       outline: none;
     }
@@ -137,9 +120,6 @@
       align-content: center;
       margin: 8px auto;
       transform: translateY(8px);
-      @media (max-width: 1000px) {
-        transform: translateY(40px);
-      }
       button {
         z-index: 2;
         background: none;

src/pages/Home/subcomponents/NewUserCountry.js

@@ -10,7 +10,7 @@ import {
 import jsonData from "../../../world-topo-min.json";
 import MapSearch from "./MapSearch";
 import PopupPrompt from "../../../components/Prompts/PopupPrompt";
-import MapChangeIcon from '../../../icons/MapChangeIcon';
+import MapChangeIcon from "../../../icons/MapChangeIcon";
 import ClickedCountryContainer from "../../../components/Prompts/ClickedCountry/ClickedCountryContainer";
 import MapScorecard from "./MapScorecard";
 import MapInfoContainer from "./MapInfoContainer";
@@ -34,6 +34,7 @@ const NewUserCountry = props => {
   const [activePopup, showPopup] = useState(false);
   const [tripTimingCounts, handleTripTiming] = useState([0, 0, 0]);
   const [activeTimings, handleTimingCheckbox] = useState([1, 1, 1]);
+  const [showSideMenu, handleSideMenu] = useState(false);
 
   useEffect(() => {
     let pastCount = 0;
@@ -232,6 +233,47 @@ const NewUserCountry = props => {
 
   return (
     <>
+      <div
+        className="city-new-side-menu"
+        style={showSideMenu ? { width: "250px" } : { width: "40px" }}
+      >
+        {!showSideMenu ? (
+          <a className="opennav" onClick={() => handleSideMenu(true)}>
+            &raquo;
+          </a>
+        ) : (
+          <>
+            <a className="closebtn" onClick={() => handleSideMenu(false)}>
+              &times;
+            </a>
+            <div className="side-menu-container">
+              <div className="city-new-map-scorecard" id="scorecard-side-menu">
+                <MapScorecard
+                  tripTimingCounts={tripTimingCounts}
+                  activeTimings={activeTimings}
+                  sendActiveTimings={handleActiveTimings}
+                />
+              </div>
+              <div
+                id="new-city-map-button-side-menu"
+                className="sc-controls sc-controls-left"
+                onClick={() => props.handleMapTypeChange(1)}
+              >
+                <span className="new-map-suggest">
+                  <span className="sc-control-label">City map</span>
+                  <span
+                    id="map-change-icon"
+                    onClick={() => props.handleMapTypeChange(1)}
+                  >
+                    <MapChangeIcon />
+                  </span>
+                </span>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+
       <div className="map-header-container">
         <div className="map-header-button">
           <div
@@ -241,7 +283,10 @@ const NewUserCountry = props => {
           >
             <span className="new-map-suggest">
               <span className="sc-control-label">City map</span>
-              <span id="map-change-icon" onClick={() => props.handleMapTypeChange(1)}>
+              <span
+                id="map-change-icon"
+                onClick={() => props.handleMapTypeChange(1)}
+              >
                 <MapChangeIcon />
               </span>
             </span>
@@ -269,14 +314,13 @@ const NewUserCountry = props => {
       </div>
       <ComposableMap
         projectionConfig={{
-          scale: 205
-        }}
-        width={980}
-        height={551}
-        style={{
-          width: "100%",
-          height: "auto"
+          scale: 180
         }}
+        style={
+          {
+            // height: "auto"
+          }
+        }
       >
         <ZoomableGroup center={center} zoom={zoom}>
           <Geographies geography={jsonData} disableOptimization>
@@ -297,13 +341,14 @@ const NewUserCountry = props => {
           </Geographies>
         </ZoomableGroup>
       </ComposableMap>
-
-      <MapScorecard
-        tripTimingCounts={tripTimingCounts}
-        activeTimings={activeTimings}
-        sendActiveTimings={handleActiveTimings}
-      />
-      <MapInfoContainer countryName={countryName} capitalName={capitalName} />
+      <div id="new-country-scorecard">
+        <MapScorecard
+          tripTimingCounts={tripTimingCounts}
+          activeTimings={activeTimings}
+          sendActiveTimings={handleActiveTimings}
+        />
+        <MapInfoContainer countryName={countryName} capitalName={capitalName} />
+      </div>
       {/* {activePopup ? (
         <PopupPrompt
           activePopup={activePopup}
@@ -322,7 +367,7 @@ const NewUserCountry = props => {
 
 NewUserCountry.propTypes = {
   clickedCountryArray: PropTypes.array,
-  handleMapTypeChange: PropTypes.func,
+  handleMapTypeChange: PropTypes.func
 };
 
 export default NewUserCountry;

src/pages/Home/subcomponents/_CityMap.scss

@@ -67,6 +67,7 @@
     width: 28px;
     height: 28px;
     fill: rgb(210, 210, 210);
+    top: 6px;
   }
   .mapboxgl-ctrl-geocoder--pin-right {
     button {

src/pages/Home/subcomponents/_NewUserCity.scss

@@ -1,3 +1,48 @@
+#new-map {
+  margin: 0;
+  #new-country-scorecard {
+    .map-scorecard-container {
+      bottom: 60px;
+      left: 60px;
+      @media screen and (max-width: 900px) {
+        display: none;
+        top: calc(100% - 120px);
+        left: calc(50% - 60px);
+      }
+    }
+    .map-info-container {
+      bottom: 120px;
+      left: 60px;
+      @media (max-height: 900px) {
+        transform: translate(-40px, 140px);
+      }
+    }
+  }
+  .side-menu-container {
+    #new-city-map-button-side-menu {
+      display: flex;
+      justify-content: center;
+      position: relative;
+      top: 200px;
+      left: 0px;
+      width: 60px;
+      height: 42px;
+      background: #f8f8fc;
+      align-items: center;
+      z-index: 1000;
+      border-radius: 8px;
+      box-shadow: 0 1px 2px 0 rgba(19, 18, 18, 0.5);
+      cursor: pointer;
+    }
+  }
+}
+
+#new-country-map-button {
+  @media screen and (max-width: 900px) {
+    display: none;
+  }
+}
+
 .new-user-timing-control {
   position: absolute;
   top: 8px;
@@ -573,7 +618,7 @@
   z-index: 1; /* Stay on top */
   top: 0; /* Stay at the top */
   left: 0;
-  background-color: rgba(#4F5867, 0.95); /* Black*/
+  background-color: rgba(#4f5867, 0.95); /* Black*/
   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 */

src/pages/Landing/Landing.js

@@ -330,6 +330,7 @@ function Landing() {
           </div>
         </div>
         <div className="arrow-container">
+          <span>more info</span>
           <div className="arrow-down"></div>
         </div>
       </div>