Fix download buttons on the dashboard (#4027)

kartoza · Jun 28, 2024 · 3b4f3f6 · 3b4f3f6
1 parent d24c71b
commit 3b4f3f6
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 10 deletions.
diff --git a/bims/static/css/map.css b/bims/static/css/map.css
@@ -2950,3 +2950,16 @@ div:hover::-webkit-scrollbar {
     background-color: rgba(var(--secondary-accent-color), 1);
     color: white;
 }
+
+.btn-wrap {
+    white-space: normal;
+    word-wrap: break-word;
+}
+
+.equal-height {
+    display: flex;
+    align-items: stretch;
+}
+.equal-height button {
+    flex: 1;
+}
diff --git a/bims/static/js/views/detail_dashboard/site_detail.js b/bims/static/js/views/detail_dashboard/site_detail.js
@@ -836,6 +836,8 @@ define([
                         }
                     });
                 }, false, function () {
+                    button.html('Download checklist');
+                    button.prop('disabled', false);
                 })
             }
         },

diff --git a/bims/templates/map_page/dashboard-templates.html b/bims/templates/map_page/dashboard-templates.html
@@ -507,16 +507,16 @@ <h2 class="dashboard-header">
 
                     </div>
                     <div class="card-footer">
-                         <div class="container" style="display: flex; align-items: center; justify-content: space-between;">
-                            <button class="btn btn-info download-as-csv"
-                                    style="width: 30%;">Download data
-                            </button>
-                              <button class="btn btn-info download-checklist"
-                                    style="width: 30%;">Download checklist
-                            </button>
-                             <button class="btn btn-info download-gbif-ids pull-right"
-                                    style="width: 30%;">Download GBIF ids
-                            </button>
+                        <div class="row equal-height">
+                            <div class="col-12 col-sm-6 col-md-4 mb-2">
+                                <button class="btn btn-info h-100 w-100 btn-wrap download-as-csv">Download data</button>
+                            </div>
+                            <div class="col-12 col-sm-6 col-md-4 mb-2">
+                                <button class="btn btn-info h-100 w-100 btn-wrap download-checklist">Download checklist</button>
+                            </div>
+                            <div class="col-12 col-sm-6 col-md-4 mb-2">
+                                <button class="btn btn-info h-100 w-100 btn-wrap download-gbif-ids">Download GBIF ids</button>
+                            </div>
                         </div>
                     </div>
                 </div>