From b8a1128838b7c03704e249ea6e6f53ce93d87d37 Mon Sep 17 00:00:00 2001 From: Manuel Garcia Date: Wed, 3 Jul 2024 16:37:03 +0200 Subject: [PATCH] refactor: Improve popup styling and functionality in MapView.vue --- frontend/components/MapView.vue | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/frontend/components/MapView.vue b/frontend/components/MapView.vue index 81631ef6..7905ffec 100644 --- a/frontend/components/MapView.vue +++ b/frontend/components/MapView.vue @@ -291,13 +291,25 @@ const onMapWWControlReady = () => { } // popup const popupContent = document.createElement('div'); + popupContent.style.width = '200px'; // Set the width of the popup const input = document.createElement('input'); input.type = 'text'; input.id = 'feature-description'; - input.placeholder = 'Type description'; + input.placeholder = 'Type a description'; + input.style.width = '100%'; // Make input take the full width of its parent + input.style.padding = '5px 5px'; + input.style.borderRadius = '3px'; + input.style.overflowWrap = 'break-word'; // Break long words to prevent overflow + + // input.style.width = '100%'; const saveButton = document.createElement('button'); saveButton.textContent = 'Save'; + saveButton.style.backgroundColor = '#FF4C50'; + saveButton.style.color = 'white'; + saveButton.style.padding = '4px 8px'; + saveButton.style.borderRadius = '5px'; + saveButton.style.marginTop = '10px'; saveButton.onclick = () => { console.log('layer value //> ', input.value) handleSaveDescription(input.value);