Skip to content
Snippets Groups Projects
Commit 45e0dd1e authored by Lene Wasskog's avatar Lene Wasskog
Browse files

feat: Ensure map modal does not cover the whole screen

parent afcc93e5
Branches
Tags
1 merge request!191Add map module and Open-Meteo support
...@@ -2,19 +2,22 @@ ...@@ -2,19 +2,22 @@
display: none; display: none;
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
left: 0; left: 50%;
top: 0; top: 50%;
width: 100%; width: 90%;
height: 100%; height: 90%;
overflow: hidden; overflow: hidden;
background-color: rgba(0, 0, 0, 0.9); background-color: rgba(0, 0, 0, 0.9);
transform: translate(-50%, -50%);
border: 2px solid #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
border-radius: 15px;
} }
.map-modal-content { .map-modal.show {
position: relative; display: flex;
height: 100%; justify-content: center;
width: 100%; align-items: center;
background-color: #fefefe;
} }
#selected-point-info-panel { #selected-point-info-panel {
...@@ -72,4 +75,4 @@ ...@@ -72,4 +75,4 @@
#new-point-form { #new-point-form {
z-index: 1200; z-index: 1200;
position: absolute; position: absolute;
} }
\ No newline at end of file
...@@ -122,7 +122,7 @@ class MapModal { ...@@ -122,7 +122,7 @@ class MapModal {
addMapContainer(parentDiv, id) { addMapContainer(parentDiv, id) {
const mapContainer = document.createElement('div'); const mapContainer = document.createElement('div');
mapContainer.id = id; mapContainer.id = id;
mapContainer.style.height = '100vh'; mapContainer.style.height = '100%';
mapContainer.style.width = '100%'; mapContainer.style.width = '100%';
mapContainer.style.position = 'relative'; mapContainer.style.position = 'relative';
parentDiv.appendChild(mapContainer); parentDiv.appendChild(mapContainer);
...@@ -438,7 +438,9 @@ class MapModal { ...@@ -438,7 +438,9 @@ class MapModal {
* @param zoomLevel * @param zoomLevel
*/ */
openModal(selectedPointOfInterestId, latitude, longitude, zoomLevel) { openModal(selectedPointOfInterestId, latitude, longitude, zoomLevel) {
this.mapModalElement.style.display = 'block'; this.mapModalElement.style.display = 'flex';
this.mapModalElement.style.justifyContent = 'center';
this.mapModalElement.style.alignItems = 'center';
this.initMap(latitude, longitude, zoomLevel); this.initMap(latitude, longitude, zoomLevel);
if (selectedPointOfInterestId) { if (selectedPointOfInterestId) {
this.selectPointById(selectedPointOfInterestId); this.selectPointById(selectedPointOfInterestId);
...@@ -643,4 +645,4 @@ const LegendControl = Control.extend({ ...@@ -643,4 +645,4 @@ const LegendControl = Control.extend({
}); });
// Export the module // Export the module
export default MapModal; export default MapModal;
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment