refactor: Improve popup styling and functionality in MapView.vue

CUSP-Urban-Science-and-Policy · Jul 3, 2024 · b8a1128 · b8a1128
1 parent 0be95f4
commit b8a1128
Showing 1 changed file with 13 additions and 1 deletion.
diff --git 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);