From 45e0dd1e5897344664a10d8bf3777c0075c5eed3 Mon Sep 17 00:00:00 2001
From: Lene Wasskog <lene.wasskog@nibio.no>
Date: Mon, 21 Oct 2024 14:35:33 +0200
Subject: [PATCH] feat: Ensure map modal does not cover the whole screen
---
src/main/webapp/css/mapModal.css | 23 +++++++++++++----------
src/main/webapp/js/mapModal.js | 8 +++++---
2 files changed, 18 insertions(+), 13 deletions(-)
diff --git a/src/main/webapp/css/mapModal.css b/src/main/webapp/css/mapModal.css
index 161c578b..40990f46 100644
--- a/src/main/webapp/css/mapModal.css
+++ b/src/main/webapp/css/mapModal.css
@@ -2,19 +2,22 @@
display: none;
position: fixed;
z-index: 1000;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
+ left: 50%;
+ top: 50%;
+ width: 90%;
+ height: 90%;
overflow: hidden;
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 {
- position: relative;
- height: 100%;
- width: 100%;
- background-color: #fefefe;
+.map-modal.show {
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
#selected-point-info-panel {
@@ -72,4 +75,4 @@
#new-point-form {
z-index: 1200;
position: absolute;
-}
\ No newline at end of file
+}
diff --git a/src/main/webapp/js/mapModal.js b/src/main/webapp/js/mapModal.js
index 33770f1f..1a773e93 100644
--- a/src/main/webapp/js/mapModal.js
+++ b/src/main/webapp/js/mapModal.js
@@ -122,7 +122,7 @@ class MapModal {
addMapContainer(parentDiv, id) {
const mapContainer = document.createElement('div');
mapContainer.id = id;
- mapContainer.style.height = '100vh';
+ mapContainer.style.height = '100%';
mapContainer.style.width = '100%';
mapContainer.style.position = 'relative';
parentDiv.appendChild(mapContainer);
@@ -438,7 +438,9 @@ class MapModal {
* @param 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);
if (selectedPointOfInterestId) {
this.selectPointById(selectedPointOfInterestId);
@@ -643,4 +645,4 @@ const LegendControl = Control.extend({
});
// Export the module
-export default MapModal;
\ No newline at end of file
+export default MapModal;
--
GitLab