Merge pull request #6466 from OCHA-DAP/feature/HDX-10249-implement-mi…

…xpanel-tracking PR notifications: UI changes
OCHA-DAP · Oct 28, 2024 · 500a294 · 500a294
2 parents 2ebd12a + 41d6c59
commit 500a294
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 37 deletions.
diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/bem.blocks/floating_button.css b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/bem.blocks/floating_button.css
@@ -24,4 +24,5 @@
   max-width: 300px;
   padding-left: 10px;
   padding-right: 10px;
+  line-height: 1.05;
 }
diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/datasets/dataset.css b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/datasets/dataset.css
@@ -122,18 +122,29 @@
   box-shadow: none;
 }
 .notification-platform-opt-in-action-menu {
+  cursor: pointer;
+  background-color: #007CE1;
+  display: inline-block;
+  padding: 7px;
+  border-radius: 22px;
   margin-top: -25px;
   margin-bottom: 15px;
 }
-.notification-platform-opt-in-action-menu a {
-  background-color: #007CE1;
-  color: #fff;
-  padding: 5px 10px 5px 5px;
-  display: inline-block;
-  border-radius: 5px;
+.notification-platform-opt-in-action-menu .icon {
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 15px;
+  text-align: center;
+  font-size: 18px;
+  color: #007CE1;
+  background-color: #fff;
 }
-.notification-platform-opt-in-action-menu a i {
-  width: 22px;
-  height: 22px;
-  line-height: 22px;
+.notification-platform-opt-in-action-menu .paragraph {
+  font-size: 14px;
+  color: #fff;
+  max-width: 240px;
+  padding-left: 10px;
+  padding-right: 10px;
+  line-height: 1.05;
 }
diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/datasets/notification_platform.js b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/datasets/notification_platform.js
@@ -144,7 +144,7 @@ $(document).ready(function () {
 
   $unsubscribeSubmitButton.on('click', onUnsubscribeSubmit);
 
-  $actionMenuButton.find('a').on('click', function(e) {
+  $actionMenuButton.on('click', function(e) {
     e.preventDefault();
     var datasetId = $(this).data('dataset-id');
     var datasetName = $(this).data('dataset-name');

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
@@ -122,20 +122,31 @@
   box-shadow: none;
 }
 .notification-platform-opt-in-action-menu {
+  cursor: pointer;
+  background-color: #007CE1;
+  display: inline-block;
+  padding: 7px;
+  border-radius: 22px;
   margin-top: -25px;
   margin-bottom: 15px;
 }
-.notification-platform-opt-in-action-menu a {
-  background-color: #007CE1;
-  color: #fff;
-  padding: 5px 10px 5px 5px;
-  display: inline-block;
-  border-radius: 5px;
+.notification-platform-opt-in-action-menu .icon {
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 15px;
+  text-align: center;
+  font-size: 18px;
+  color: #007CE1;
+  background-color: #fff;
 }
-.notification-platform-opt-in-action-menu a i {
-  width: 22px;
-  height: 22px;
-  line-height: 22px;
+.notification-platform-opt-in-action-menu .paragraph {
+  font-size: 14px;
+  color: #fff;
+  max-width: 240px;
+  padding-left: 10px;
+  padding-right: 10px;
+  line-height: 1.05;
 }
 .dataset-light .nav-tabs {
   margin: 0 -15px;

diff --git a/...xt-hdx_theme/ckanext/hdx_theme/hdx-styles/src/common/less/bem.blocks/floating_button.less b/...xt-hdx_theme/ckanext/hdx_theme/hdx-styles/src/common/less/bem.blocks/floating_button.less
@@ -26,5 +26,6 @@
     max-width: 300px;
     padding-left: 10px;
     padding-right: 10px;
+    line-height: 1.05;
   }
 }
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
@@ -153,19 +153,30 @@
 }
 
 .notification-platform-opt-in-action-menu {
+  cursor: pointer;
+  background-color: #007CE1;
+  display: inline-block;
+  padding: 7px;
+  border-radius: 22px;
   margin-top: -25px;
   margin-bottom: 15px;
-  a {
-    background-color: #007CE1;
+
+  .icon {
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 15px;
+    text-align: center;
+    font-size: 18px;
+    color: #007CE1;
+    background-color: #fff;
+  }
+  .paragraph {
+    font-size: 14px;
     color: #fff;
-    padding: 5px 10px 5px 5px;
-    display: inline-block;
-    border-radius: 5px;
-
-    i {
-      width: 22px;
-      height: 22px;
-      line-height: 22px;
-    }
+    max-width: 240px;
+    padding-left: 10px;
+    padding-right: 10px;
+    line-height: 1.05;
   }
 }
diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/templates/notification_platform/action_menu_button.html b/ckanext-hdx_theme/ckanext/hdx_theme/templates/notification_platform/action_menu_button.html
@@ -1,7 +1,16 @@
 {% set CONST_NOTIFICATION_PLATFORM = h.HDX_CONST('UI_CONSTANTS')['NOTIFICATION_PLATFORM'] %}
 
-<div class="notification-platform-opt-in-action-menu d-none">
-  <a href="#" data-dataset-id="{{ pkg.id }}" data-dataset-name="{{ pkg.name }}">
-    <i class="fa-solid fa-fw fa-bell"></i> <span>{{ CONST_NOTIFICATION_PLATFORM.OPT_IN_TEXT }}</span>
-  </a>
+<div class="notification-platform-opt-in-action-menu d-none" data-dataset-id="{{ pkg.id }}" data-dataset-name="{{ pkg.name }}">
+  <div class="row align-items-center g-0">
+  <div class="col-auto">
+      <div class="icon">
+        <i class="fa-solid fa-fw fa-bell"></i>
+      </div>
+    </div>
+    <div class="col-auto">
+      <div class="paragraph">
+        <p class="mb-0">{{ CONST_NOTIFICATION_PLATFORM.OPT_IN_TEXT }}</p>
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/version.py b/ckanext-hdx_theme/ckanext/hdx_theme/version.py
@@ -1 +1 @@
-hdx_version = 'v1.84.1'
+hdx_version = 'v1.84.2'