diff --git a/frontend/public/six_to_twelve.png b/frontend/public/six_to_twelve.png new file mode 100644 index 0000000..dde4aa9 Binary files /dev/null and b/frontend/public/six_to_twelve.png differ diff --git a/frontend/public/three_to_six.png b/frontend/public/three_to_six.png new file mode 100644 index 0000000..38d54b7 Binary files /dev/null and b/frontend/public/three_to_six.png differ diff --git a/frontend/public/three_to_twelve.png b/frontend/public/three_to_twelve.png new file mode 100644 index 0000000..338908f Binary files /dev/null and b/frontend/public/three_to_twelve.png differ diff --git a/frontend/public/user_location.png b/frontend/public/user_location.png new file mode 100644 index 0000000..3425268 Binary files /dev/null and b/frontend/public/user_location.png differ diff --git a/frontend/public/zero_to_three.png b/frontend/public/zero_to_three.png new file mode 100644 index 0000000..cb8d82e Binary files /dev/null and b/frontend/public/zero_to_three.png differ diff --git a/frontend/src/Components/Common/Map.jsx b/frontend/src/Components/Common/Map.jsx index 90ed5ef..c484a92 100644 --- a/frontend/src/Components/Common/Map.jsx +++ b/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 && +
+

Легенда

+
+ user_location +

Моята локация

+
+
+ zero_to_three +

За деца от 0 до 3 години

+
+
+ three_to_six.png +

За деца от 3 до 6 години

+
+
+ three_to_twelve +

За деца от 3 до 12 години

+
+
+ six_to_twelve +

За деца от 6 до 12 години

+
+
} + setShowLegend(false)} id="legend" /> + ); }; diff --git a/frontend/src/Components/Pages/PlaygroundFormPage.jsx b/frontend/src/Components/Pages/PlaygroundFormPage.jsx index 2987dc5..2ba53fa 100644 --- a/frontend/src/Components/Pages/PlaygroundFormPage.jsx +++ b/frontend/src/Components/Pages/PlaygroundFormPage.jsx @@ -574,7 +574,7 @@ export const PlaygroundFormPage = () => {
-

Посочете на картата мястото на площадката

+

Преместете отметката на картата, за да посочите желаното място на площадката:

diff --git a/frontend/src/static/icons/legend.svg b/frontend/src/static/icons/legend.svg new file mode 100644 index 0000000..5df2aea --- /dev/null +++ b/frontend/src/static/icons/legend.svg @@ -0,0 +1,11 @@ + + + + + + + diff --git a/frontend/src/static/stylesheets/main.css b/frontend/src/static/stylesheets/main.css index b16b16b..2014fe0 100644 --- a/frontend/src/static/stylesheets/main.css +++ b/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 { diff --git a/frontend/src/static/stylesheets/map.css b/frontend/src/static/stylesheets/map.css index f0ecbae..7860db6 100644 --- a/frontend/src/static/stylesheets/map.css +++ b/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) {