Property2shp

landmapper/app/static/landmapper/css/base.css

@@ -30,6 +30,8 @@
 --primary-color: var(--primary-color-state, var(--green));
 --secondary-color: var(--secondary-color-state, var(--yellow));
 
+--primary-color-rgb: var(--primary-rgb-state, 120, 162, 47);
+
 --primary-color-hover: color-mix(in srgb, var(--primary-color) 50%, black);
 --secondary-color-hover: color-mix(in srgb, var(--secondary-color) 90%, white);
 
@@ -125,7 +127,7 @@ a {
 hr {
   border-top: 1px solid var(--dark-grey);
   height: 1px;
-  margin: 3vh 0;
+  margin: 1vh 0 1.5vh;
 }
 
 strong {

landmapper/app/static/landmapper/css/or.css

@@ -3,8 +3,15 @@
     --primary-color-or: #002A86;
     --secondary-color-or: #FFEA0F;
 
+    /**
+      * For use with rgba() and hsla() functions
+     */
+    --primary-rgb-or: 0, 42, 134;
+
     --primary-color-state: var(--primary-color-or);
     --secondary-color-state: var(--secondary-color-or);
+
+    --primary-rgb-state: var(--primary-rgb-or);
 }
 
 .navbar-brand:after {

landmapper/app/static/landmapper/css/report.css

@@ -34,6 +34,10 @@ p {
     margin: 4px 0;
   }
 
+  .action-wrap button:disabled {
+    pointer-events: none;
+  }
+
 #copy-to-account {
   background-color: var(--info);
 }
@@ -71,9 +75,9 @@ p {
 
 .anchor-links {
   font-size: 16px;
-  line-height: 30px;
+  line-height: 1.75;
   letter-spacing: 0;
-  margin: 2vh 0px;
+  margin: 1vh 0px;
   word-spacing: 0;
 }
 
@@ -82,11 +86,22 @@ p {
 }
 
 .anchor-links a {
+  border: none;
   color: var(--primary-color);
   font-family: var(--primary-font-heavy);
   font-weight: 900;
   padding: 2px;
   margin: 0;
+  text-decoration: none;
+}
+
+.anchor-links a:hover {
+  background: rgba(var(--primary-color-rgb), 0.15);
+  border: none;
+  color: var(--primary-color);
+  opacity: 1;
+  outline: 5px rgba(var(--primary-color-rgb), 0.05);
+  text-decoration: none;
 }
 
 .legend-wrap {
@@ -132,6 +147,24 @@ p {
   /* vertical-align: text-bottom; */
 }
 
+.btn-action {
+  background: transparent;
+  border: none;
+  padding: .5em .75em;
+}
+
+.btn-action:hover {
+  background: rgba(var(--primary-color-rgb), 0.15);
+  border: none;
+  outline: 5px rgba(var(--primary-color-rgb), 0.05);
+}
+
+.btn-action .icon {
+  height: 100%;
+  margin: 0 auto;
+  width: 2.5em;
+}
+
 .icon-copy {
   margin: .125em auto;
   width: 2.25em;

landmapper/app/static/landmapper/css/wa.css

@@ -3,8 +3,15 @@
     --primary-color-wa: #008457;
     --secondary-color-wa: #FFD520;
 
+    /**
+      * For use with rgba() and hsla() functions
+     */
+    --primary-rgb-wa: 0, 132, 87;
+
     --primary-color-state: var(--primary-color-wa);
     --secondary-color-state: var(--secondary-color-wa);
+
+    --primary-rgb-state: var(--primary-rgb-wa);
 }
 
 .navbar-brand:after {

landmapper/app/static/landmapper/js/report.js

@@ -35,8 +35,13 @@ if (copyToAccountBtn) {
    *  Add event listener to the export layer button
    */
   function exportLayerHandler() {
-    const propertyId = this.getAttribute('data-property-id');
-    fetch(`/export_layer/${propertyId}/shp`, {
+    const propertyPk = this.getAttribute('data-property-id');
+    const exportLayerButton = this;
+
+    // Disable the button to prevent multiple clicks
+    exportLayerButton.disabled = true;
+
+    fetch(`/export_layer/${propertyPk}/shp`, {
       method: 'GET',
       headers: {
         'X-Requested-With': 'XMLHttpRequest'
@@ -48,14 +53,17 @@ if (copyToAccountBtn) {
         const a = document.createElement('a');
         a.style.display = 'none';
         a.href = url;
-        a.download = `${propertyId}.zip`;
+        a.download = `${propertyPk}.zip`;
         document.body.appendChild(a);
         a.click();
         window.URL.revokeObjectURL(url);
       })
       .catch(error => {
         console.error('Error:', error);
         alert('An error occurred while exporting the layer.');
+      })
+      .finally(() => {
+        exportLayerButton.disabled = false;
       });
   }