added legend concept, fixed rolling text

frontend/src/Components/Common/Map.jsx

@@ -4,10 +4,10 @@ import { Link } from 'react-router-dom';
 import '../../static/stylesheets/map.css';
 import { ReactComponent as Terrain } from "../../static/icons/layers_8.svg";
 import { ReactComponent as Location } from "../../static/icons/location.svg";
+import { ReactComponent as Legend } from "../../static/icons/legend.svg";
 
 const libraries = ['places'];
 
-const plovdiv = { lat: 42.1354, lng: 24.7453 };
 
 export const Map = ({ onCoordinatesChange, currentPlaygroundCords }) => {
     const [marker, setMarker] = useState(null);
@@ -20,6 +20,7 @@ export const Map = ({ onCoordinatesChange, currentPlaygroundCords }) => {
     const [directionsResponse, setDirectionsResponse] = useState(null);
     const [requestDirections, setRequestDirections] = useState(true);
     const [zoomLevel, setZoomLevel] = useState(17);
+    const [showLegend, setShowLegend] = useState(false);
     const infoBoxRef = useRef();
 
     const onMapLoad = (map) => {
@@ -111,6 +112,10 @@ export const Map = ({ onCoordinatesChange, currentPlaygroundCords }) => {
         }
     };
 
+    const handleLegendHover = () => {
+        setShowLegend(true);
+    }
+
     const setTitle = () => {
         const infoWindowElement = document.querySelector('.gm-style-iw-ch');
         if (infoWindowElement) {
@@ -261,8 +266,34 @@ export const Map = ({ onCoordinatesChange, currentPlaygroundCords }) => {
                     directions: directionsResponse,
                     suppressMarkers: true
                 }} />}
+                {showLegend &&
+                    <div id="legend-window">
+                        <p>Легенда</p>
+                        <div className='legend-row'>
+                            <img height="35px" src='user_location.png' alt='user_location'/>
+                            <p>Моята локация</p>
+                        </div>
+                        <div className='legend-row'>
+                            <img src='zero_to_three.png' alt='zero_to_three' />
+                            <p>За деца от 0 до 3 години</p>
+                        </div>
+                        <div className='legend-row'>
+                            <img src='three_to_six.png' alt='three_to_six.png'/>
+                            <p>За деца от 3 до 6 години</p>
+                        </div>
+                        <div className='legend-row'>
+                            <img src='three_to_twelve.png' alt='three_to_twelve'/>
+                            <p>За деца от 3 до 12 години</p>
+                        </div >
+                        <div className='legend-row'>
+                            <img src='six_to_twelve.png' alt='six_to_twelve' />
+                            <p>За деца от 6 до 12 години</p>
+                        </div>
+                    </div>}
             </GoogleMap>
             <Location onClick={showCurrentLocation} id="location" />
+            <Legend onMouseOver={handleLegendHover} onMouseLeave={() => setShowLegend(false)} id="legend" />
+
         </div>
     );
 };

frontend/src/Components/Pages/PlaygroundFormPage.jsx

@@ -574,7 +574,7 @@ export const PlaygroundFormPage = () => {
                         </div>
                         <div>
                             <div>
-                                <h4>Посочете на картата мястото на площадката</h4>
+                                <h4>Преместете отметката на картата, за да посочите желаното място на площадката:   </h4>
                                 <div id="map">
                                     <Map onCoordinatesChange={changeCoordinates}/>
                                 </div>

frontend/src/static/stylesheets/main.css

@@ -263,6 +263,19 @@
     }
 
   }
+
+  @media only screen and (max-height: 1024px) {
+    .background-img {
+        margin-top: -40vh;
+    }
+
+    .left-outer-column,
+    .middle-outer-column,
+    .right-outer-column {
+      width: 25vw;
+    }
+
+  }
 
   @media only screen and (max-height: 1368px) and (max-width: 1024px) {
     .background-img {

frontend/src/static/stylesheets/map.css

@@ -31,7 +31,7 @@
   align-items: center;
 }
 
-#location, #terrain {
+#location, #terrain, #legend {
   position: absolute;
   z-index: 2;
   cursor: pointer;
@@ -55,6 +55,37 @@
   right: 2.5vw;
 }
 
+#legend {
+  bottom: 1vh;
+  right: 2.5vw;
+}
+
+#legend-window {
+  padding-left: 10px;
+  position: absolute;
+  width: 20%;
+  bottom: 14vh;
+  right: 0vw;
+  background: rgb(255, 252, 246);
+  border: 1px solid #62BEC9;
+  border-radius:12px;
+  font-weight: bold;
+}
+
+.legend-row {
+  display: inline-flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.legend-row img {
+  padding-right: 20px;
+}
+
+.legend-row p {
+  padding-bottom: 5px;
+}
+
 #terrain:hover {
   fill: #333333;
 }
@@ -81,7 +112,11 @@
 
 @media only screen and (max-width: 2560px) {
   #location {
-    bottom: 4.2vh;
+    bottom: 5.2vh;
+    right: 3vw;
+  }
+  #legend {
+    bottom: 2vh;
     right: 3vw;
   }
 }
@@ -97,7 +132,7 @@
     width: 300px;
   }
 
-  #location, #terrain {
+  #location, #terrain, #legend {
     right: 1vw;
   }
   .gm-style-iw-d {
@@ -139,6 +174,14 @@
     position: relative;
     top: -18px
   }
+
+  #legend {
+    bottom: 32vh;
+  }
+
+  #legend-window {
+    width: 100%;
+  }
 }
 
 @media only screen and (max-width: 280px) {