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

feat: More vibrant colors, button for closing new point form

parent 7fe8b518
Branches
No related tags found
1 merge request!191Add map module and Open-Meteo support
...@@ -17,6 +17,12 @@ ...@@ -17,6 +17,12 @@
background-color: #fefefe; background-color: #fefefe;
} }
#open-map-modal-icon {
font-size: 30px;
margin-left: 15px;
cursor: pointer;
}
#selectedPointInfo { #selectedPointInfo {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
font-size: 12px; font-size: 12px;
...@@ -54,7 +60,13 @@ ...@@ -54,7 +60,13 @@
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 15px; 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; color: white;
background-color: transparent; background-color: transparent;
border: none; border: none;
...@@ -62,10 +74,6 @@ ...@@ -62,10 +74,6 @@
z-index: 1500; z-index: 1500;
} }
.close-button:hover {
color: #ddd;
}
#newPointForm { #newPointForm {
z-index: 1200; z-index: 1200;
position: absolute; position: absolute;
......
...@@ -39,13 +39,13 @@ class MapModal { ...@@ -39,13 +39,13 @@ class MapModal {
// Colours for the available types of pois // Colours for the available types of pois
this.typeColorMap = { this.typeColorMap = {
0: "#B3CDE0", // Light blue 0: "#5DADE2", // Bright Blue
1: "#FBB4AE", // Soft pink 1: "#58D68D", // Vibrant Green
2: "#CCEBC5", // Light green 2: "#AF7AC5", // Medium Lavender
3: "#DECBE4", // Lavender 3: "#F5B041", // Warm Orange
5: "#FED9A6", // Light peach 5: "#F7DC6F", // Bright Yellow
6: "#FFFFCC", // Pale yellow 6: "#DC7633", // Rich Brown
7: "#E5D8BD" // Beige 7: "#FF33A6" // Vivid Magenta
}; };
} }
...@@ -183,8 +183,8 @@ class MapModal { ...@@ -183,8 +183,8 @@ class MapModal {
this.selectedPointLayer.setStyle({ this.selectedPointLayer.setStyle({
radius: 8, // Size of the marker radius: 8, // Size of the marker
fillColor: color, fillColor: color,
color: "#FFFFFF", // Border color color: "#FFFFFF",
weight: 2, // Border thickness weight: 2,
opacity: 1, opacity: 1,
fillOpacity: 0.8 fillOpacity: 0.8
}); });
...@@ -192,8 +192,9 @@ class MapModal { ...@@ -192,8 +192,9 @@ class MapModal {
// Highlight the new selected point // Highlight the new selected point
layer.setStyle({ layer.setStyle({
fillColor: 'red', radius: 12,
color: '#f00' fillColor: "#FF5733",
fillOpacity: 1,
}); });
if (zoomInToSelected) { if (zoomInToSelected) {
...@@ -241,6 +242,7 @@ class MapModal { ...@@ -241,6 +242,7 @@ class MapModal {
// Add event listener to close the form if clicked outside // Add event listener to close the form if clicked outside
document.addEventListener('click', this.handleClickOutsidePointForm.bind(this), true); document.addEventListener('click', this.handleClickOutsidePointForm.bind(this), true);
const closeButton = newPointFormElement.querySelector("#close-button");
const nameInput = newPointFormElement.querySelector('#name'); const nameInput = newPointFormElement.querySelector('#name');
const latitudeInput = newPointFormElement.querySelector('#latitude'); const latitudeInput = newPointFormElement.querySelector('#latitude');
const longitudeInput = newPointFormElement.querySelector('#longitude'); const longitudeInput = newPointFormElement.querySelector('#longitude');
...@@ -256,6 +258,10 @@ class MapModal { ...@@ -256,6 +258,10 @@ class MapModal {
longitudeInput.addEventListener('input', validateInputs); longitudeInput.addEventListener('input', validateInputs);
validateInputs(); validateInputs();
closeButton.addEventListener('click', function() {
newPointFormElement.remove();
});
submitButton.addEventListener('click', () => { submitButton.addEventListener('click', () => {
this.removeExistingNewPoint(); this.removeExistingNewPoint();
this.setNewPointAsSelected(nameInput.value, parseFloat(latitudeInput.value), parseFloat(longitudeInput.value), parseInt(typeInput.value, 10)); this.setNewPointAsSelected(nameInput.value, parseFloat(latitudeInput.value), parseFloat(longitudeInput.value), parseInt(typeInput.value, 10));
...@@ -358,6 +364,7 @@ class MapModal { ...@@ -358,6 +364,7 @@ class MapModal {
<div id="newPointForm" class="panel panel-default" style="top: ${positionY}px; left: ${positionX}px;"> <div id="newPointForm" class="panel panel-default" style="top: ${positionY}px; left: ${positionX}px;">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">Opprett nytt sted</h3> <h3 class="panel-title">Opprett nytt sted</h3>
<span id="close-button" style="position: absolute; top: 5px; right: 10px; cursor: pointer; font-size: 18px;">&times;</span>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div class="form-group"> <div class="form-group">
...@@ -381,7 +388,7 @@ class MapModal { ...@@ -381,7 +388,7 @@ class MapModal {
</select> </select>
</div> </div>
<div class="form-group text-right"> <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> </div>
</div>`; </div>`;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment