From 82cfcc5e064f7f7bfff1ffdc520e2beaf928cd30 Mon Sep 17 00:00:00 2001
From: lewa <lene.wasskog@nibio.no>
Date: Tue, 27 Aug 2024 13:56:06 +0200
Subject: [PATCH] feat: More vibrant colors, button for closing new point form
---
src/main/webapp/css/mapModal.css | 18 +++++++++++++-----
src/main/webapp/js/mapModal.js | 31 +++++++++++++++++++------------
2 files changed, 32 insertions(+), 17 deletions(-)
diff --git a/src/main/webapp/css/mapModal.css b/src/main/webapp/css/mapModal.css
index 2026c2e1..dd9694b0 100644
--- a/src/main/webapp/css/mapModal.css
+++ b/src/main/webapp/css/mapModal.css
@@ -17,6 +17,12 @@
background-color: #fefefe;
}
+#open-map-modal-icon {
+ font-size: 30px;
+ margin-left: 15px;
+ cursor: pointer;
+}
+
#selectedPointInfo {
font-family: Arial, sans-serif;
font-size: 12px;
@@ -54,7 +60,13 @@
position: absolute;
top: 10px;
right: 15px;
- font-size: 40px;
+ font-size: 50px;
+ font-weight: bold;
+ text-shadow:
+ -1px -1px 0 #000, /* Top left shadow */
+ 1px -1px 0 #000, /* Top right shadow */
+ -1px 1px 0 #000, /* Bottom left shadow */
+ 1px 1px 0 #000;
color: white;
background-color: transparent;
border: none;
@@ -62,10 +74,6 @@
z-index: 1500;
}
-.close-button:hover {
- color: #ddd;
-}
-
#newPointForm {
z-index: 1200;
position: absolute;
diff --git a/src/main/webapp/js/mapModal.js b/src/main/webapp/js/mapModal.js
index e7e0e068..1e522eac 100644
--- a/src/main/webapp/js/mapModal.js
+++ b/src/main/webapp/js/mapModal.js
@@ -39,13 +39,13 @@ class MapModal {
// Colours for the available types of pois
this.typeColorMap = {
- 0: "#B3CDE0", // Light blue
- 1: "#FBB4AE", // Soft pink
- 2: "#CCEBC5", // Light green
- 3: "#DECBE4", // Lavender
- 5: "#FED9A6", // Light peach
- 6: "#FFFFCC", // Pale yellow
- 7: "#E5D8BD" // Beige
+ 0: "#5DADE2", // Bright Blue
+ 1: "#58D68D", // Vibrant Green
+ 2: "#AF7AC5", // Medium Lavender
+ 3: "#F5B041", // Warm Orange
+ 5: "#F7DC6F", // Bright Yellow
+ 6: "#DC7633", // Rich Brown
+ 7: "#FF33A6" // Vivid Magenta
};
}
@@ -183,8 +183,8 @@ class MapModal {
this.selectedPointLayer.setStyle({
radius: 8, // Size of the marker
fillColor: color,
- color: "#FFFFFF", // Border color
- weight: 2, // Border thickness
+ color: "#FFFFFF",
+ weight: 2,
opacity: 1,
fillOpacity: 0.8
});
@@ -192,8 +192,9 @@ class MapModal {
// Highlight the new selected point
layer.setStyle({
- fillColor: 'red',
- color: '#f00'
+ radius: 12,
+ fillColor: "#FF5733",
+ fillOpacity: 1,
});
if (zoomInToSelected) {
@@ -241,6 +242,7 @@ class MapModal {
// Add event listener to close the form if clicked outside
document.addEventListener('click', this.handleClickOutsidePointForm.bind(this), true);
+ const closeButton = newPointFormElement.querySelector("#close-button");
const nameInput = newPointFormElement.querySelector('#name');
const latitudeInput = newPointFormElement.querySelector('#latitude');
const longitudeInput = newPointFormElement.querySelector('#longitude');
@@ -256,6 +258,10 @@ class MapModal {
longitudeInput.addEventListener('input', validateInputs);
validateInputs();
+ closeButton.addEventListener('click', function() {
+ newPointFormElement.remove();
+ });
+
submitButton.addEventListener('click', () => {
this.removeExistingNewPoint();
this.setNewPointAsSelected(nameInput.value, parseFloat(latitudeInput.value), parseFloat(longitudeInput.value), parseInt(typeInput.value, 10));
@@ -358,6 +364,7 @@ class MapModal {
<div id="newPointForm" class="panel panel-default" style="top: ${positionY}px; left: ${positionX}px;">
<div class="panel-heading">
<h3 class="panel-title">Opprett nytt sted</h3>
+ <span id="close-button" style="position: absolute; top: 5px; right: 10px; cursor: pointer; font-size: 18px;">×</span>
</div>
<div class="panel-body">
<div class="form-group">
@@ -381,7 +388,7 @@ class MapModal {
</select>
</div>
<div class="form-group text-right">
- <button id="submit-button" class="btn btn-primary">Save</button>
+ <button id="submit-button" class="btn btn-primary">OK</button>
</div>
</div>
</div>`;
--
GitLab