HDX-10171 remove metadata tab & add additional info panel

OCHA-DAP · Dec 18, 2024 · 142e8bc · 142e8bc
1 parent 712eab7
commit 142e8bc
Show file tree

Hide file tree

Showing 17 changed files with 396 additions and 499 deletions.
diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/datasets/dataset.css b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/datasets/dataset.css
@@ -82,22 +82,27 @@
 }
 /* END Style Resources List*/
 /* Style Additional Info */
-.additional-info table tr {
-  height: 38px;
-  font-family: 'Source Sans Pro', sans-serif;
+.additional-info .additional-info-content .dataset-label {
+  color: #1F2937;
+  font-family: 'Gotham-Bold', sans-serif;
+  font-size: 12px;
   font-weight: 400;
-  font-size: 14px;
+  line-height: 14.4px;
+  text-transform: uppercase;
 }
-.additional-info td {
-  text-align: justify;
-  word-break: break-word;
+.additional-info .additional-info-content .dataset-details {
+  color: #000;
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: 14px;
+  line-height: 18px;
+  margin-top: 0.25rem;
 }
-.additional-info td.dataset-details pre {
-  text-wrap: wrap;
+.additional-info .additional-info-content .dataset-details .tag-wrapper {
+  float: none;
+  display: inline-block;
 }
-.additional-info th {
-  max-width: 200px;
-  width: 190px;
+.additional-info .additional-info-content .quick-edit .dataset-details {
+  padding-right: 0;
 }
 /* END Style Additional Info */
 /* Resource grouping */
@@ -118,9 +123,16 @@
   font-size: 24px;
   margin-left: 5px;
 }
+.wrapper-secondary.col-4 {
+  border-right: 0;
+}
 .wrapper-secondary .form-check .form-check-input {
   box-shadow: none;
 }
+.wrapper-primary.col-8 {
+  border-left: 0;
+  margin-left: 0;
+}
 .notification-platform-opt-in-action-menu {
   cursor: pointer;
   background-color: #007CE1;

diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/datasets/dataset.js b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/datasets/dataset.js
@@ -15,12 +15,20 @@ $(document).ready(function() {
     }
   );
 
-  $('#show-more-dates, #hide-more-dates').on('click', function(e) {
+  $('#show-extra-dates, #hide-extra-dates').on('click', function(e) {
       e.preventDefault();
-      $('#show-more-dates, #hide-more-dates').toggleClass('d-none');
+      $('#show-extra-dates, #hide-extra-dates').toggleClass('d-none');
       $('.more-dates').toggleClass('d-none');
   });
 
+  $('#show-extra-fields').on('click', function(e) {
+    e.preventDefault();
+    var $wrapper = $(this).parent();
+    var $extraFields = $wrapper.parent().find('.additional-info-extra-fields');
+    $wrapper.remove();
+    $extraFields.removeClass('d-none');
+  });
+
   $('#showDatasetActivity').on('change', function() {
       $('.dataset-activity-wrapper').toggleClass('d-none');
   });

diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/datasets/stats-chart.js b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/datasets/stats-chart.js
@@ -128,7 +128,7 @@ $(document).ready(function(){
         if (chartData.length > 0){
             setupDatasetDownloads(datasetDwdId, "#dataset-downloads-chart");
         } else {
-            $("#dataset-downloads-chart-no-data").show();
+            $("#dataset-downloads-chart-no-data").removeClass('d-none');
         }
     }
 });
diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/light/dataset/dataset-light.css b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/light/dataset/dataset-light.css
@@ -82,22 +82,27 @@
 }
 /* END Style Resources List*/
 /* Style Additional Info */
-.additional-info table tr {
-  height: 38px;
-  font-family: 'Source Sans Pro', sans-serif;
+.additional-info .additional-info-content .dataset-label {
+  color: #1F2937;
+  font-family: 'Gotham-Bold', sans-serif;
+  font-size: 12px;
   font-weight: 400;
-  font-size: 14px;
+  line-height: 14.4px;
+  text-transform: uppercase;
 }
-.additional-info td {
-  text-align: justify;
-  word-break: break-word;
+.additional-info .additional-info-content .dataset-details {
+  color: #000;
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: 14px;
+  line-height: 18px;
+  margin-top: 0.25rem;
 }
-.additional-info td.dataset-details pre {
-  text-wrap: wrap;
+.additional-info .additional-info-content .dataset-details .tag-wrapper {
+  float: none;
+  display: inline-block;
 }
-.additional-info th {
-  max-width: 200px;
-  width: 190px;
+.additional-info .additional-info-content .quick-edit .dataset-details {
+  padding-right: 0;
 }
 /* END Style Additional Info */
 /* Resource grouping */
@@ -118,9 +123,16 @@
   font-size: 24px;
   margin-left: 5px;
 }
+.wrapper-secondary.col-4 {
+  border-right: 0;
+}
 .wrapper-secondary .form-check .form-check-input {
   box-shadow: none;
 }
+.wrapper-primary.col-8 {
+  border-left: 0;
+  margin-left: 0;
+}
 .notification-platform-opt-in-action-menu {
   cursor: pointer;
   background-color: #007CE1;

diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/light/dataset/dataset.js b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/light/dataset/dataset.js
@@ -20,9 +20,17 @@ $(document).ready(function() {
     }
   });
 
-  $('#show-more-dates, #hide-more-dates').on('click', function(e) {
+  $('#show-extra-dates, #hide-extra-dates').on('click', function(e) {
       e.preventDefault();
-      $('#show-more-dates, #hide-more-dates').toggleClass('d-none');
+      $('#show-extra-dates, #hide-extra-dates').toggleClass('d-none');
       $('.more-dates').toggleClass('d-none');
   });
+
+  $('#show-extra-fields').on('click', function(e) {
+    e.preventDefault();
+    var $wrapper = $(this).parent();
+    var $extraFields = $wrapper.parent().find('.additional-info-extra-fields');
+    $wrapper.remove();
+    $extraFields.removeClass('d-none');
+  });
 });
diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/search_/search.js b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/search_/search.js
@@ -145,12 +145,20 @@ $('document').ready(function(){
         $results.hide();
     });
 
-  $('.show-more-dates, .hide-more-dates').on('click', function(e) {
+  $('.show-extra-dates, .hide-extra-dates').on('click', function(e) {
     e.preventDefault();
     var parent = $(this).closest('.dataset-dates');
-    $('.show-more-dates, .hide-more-dates', parent).toggleClass('d-none');
+    $('.show-extra-dates, .hide-extra-dates', parent).toggleClass('d-none');
     $('.more-dates', parent).toggleClass('d-none');
   });
+
+  $('#show-extra-fields').on('click', function(e) {
+    e.preventDefault();
+    var $wrapper = $(this).parent();
+    var $extraFields = $wrapper.parent().find('.additional-info-extra-fields');
+    $wrapper.remove();
+    $extraFields.removeClass('d-none');
+  });
 });
 
 function process_title(title, termList){

diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/webassets.yml b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/webassets.yml
@@ -654,6 +654,7 @@ dataset-light-scripts:
       - hdx_theme/dataset-light-styles
   contents:
     - light/dataset/dataset.js
+    - select2/select2.js
 
 dataset-light-styles:
   <<: *common-css

diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/hdx-styles/src/common/less/datasets/dataset.less b/ckanext-hdx_theme/ckanext/hdx_theme/hdx-styles/src/common/less/datasets/dataset.less
@@ -1,5 +1,6 @@
 @import "../base/variables";
 @import "../base/mixins";
+@import "../bem.blocks/bem_variables";
 /**
  OLD Dataset CSS
 **/
@@ -96,26 +97,34 @@
 
 /* Style Additional Info */
 .additional-info {
-  table tr {
-    height: 38px;
-    font-family: 'Source Sans Pro', sans-serif;
-    font-weight: 400;
-    font-size: 14px;
-  }
+  .additional-info-content {
+    .dataset-label {
+      color: @blue-medium-dark-color;
+      font-family: @gothamBoldFont;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 14.4px;
+      text-transform: uppercase;
+    }
 
-  td {
-    text-align: justify;
-    word-break: break-word;
-    &.dataset-details {
-      pre {
-        text-wrap: wrap;
+    .dataset-details {
+      color: @black-color;
+      font-family: 'Source Sans Pro', sans-serif;
+      font-size: 14px;
+      line-height: 18px;
+      margin-top: .25rem;
+
+      .tag-wrapper {
+        float: none;
+        display: inline-block;
       }
     }
-  }
 
-  th {
-    max-width: 200px;
-    width: 190px;
+    .quick-edit {
+      .dataset-details {
+        padding-right: 0;
+      }
+    }
   }
 }
 /* END Style Additional Info */
@@ -145,12 +154,21 @@
 }
 
 .wrapper-secondary {
+  &.col-4 {
+    border-right: 0;
+  }
   .form-check {
     .form-check-input {
       box-shadow: none;
     }
   }
 }
+.wrapper-primary {
+  &.col-8 {
+    border-left: 0;
+    margin-left: 0;
+  }
+}
 
 .notification-platform-opt-in-action-menu {
   cursor: pointer;