HDX-10024 display alert, add asterisks for steps & change disabled bt…

…n color
OCHA-DAP · Aug 8, 2024 · 0751781 · 0751781
1 parent 1ec8350
commit 0751781
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 2 deletions.
diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/landing_pages/hdx_signals.css b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/landing_pages/hdx_signals.css
@@ -0,0 +1,10 @@
+#signals-form-card #mc_embed_signup span.asterisk {
+  font-size: 1rem;
+  font-weight: normal;
+  color: #F2645A;
+}
+#signals-form-card #mc_embed_signup #mc-embedded-subscribe:disabled,
+#signals-form-card #mc_embed_signup #mc-embedded-subscribe.disabled {
+  background-color: #4B5563;
+  border-color: #4B5563;
+}
diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/landing_pages/hdx_signals.js b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/landing_pages/hdx_signals.js
@@ -2,6 +2,7 @@ $(document).ready(function () {
 
   var $form = $('#signals-form-card form');
   var $button = $form.find('#mc-embedded-subscribe');
+  var $alert = $form.find('#mc-embedded-subscribe-alert');
   var $fields = $form.find('#mce-EMAIL, #mce-FNAME, #mce-ORG');
 
   var DATASETS_GROUPS = [
@@ -113,9 +114,11 @@ $(document).ready(function () {
 
     if(dataset_checked && location_checked && fields_filled) {
       $button.removeClass('disabled').removeAttr('disabled');
+      $alert.addClass('d-none');
     }
     else {
       $button.addClass('disabled').attr('disabled', 'disabled');
+      $alert.removeClass('d-none');
     }
   }
 

diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/webassets.yml b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/webassets.yml
@@ -215,6 +215,12 @@ hdx-signals-scripts:
     - bs_tooltip.js
     - landing_pages/hdx_signals.js
 
+hdx-signals-styles:
+  output: ckanext-hdx_theme/%(version)s_hdx-signals-styles.css
+  <<: *common-css
+  contents:
+    - landing_pages/hdx_signals.css
+
 hdx-form-validator:
   <<: *common-js
   output: ckanext-hdx_theme/%(version)s_hdx-form-validator.js

diff --git a/...ext-hdx_theme/ckanext/hdx_theme/hdx-styles/src/common/less/landing_pages/hdx_signals.less b/...ext-hdx_theme/ckanext/hdx_theme/hdx-styles/src/common/less/landing_pages/hdx_signals.less
@@ -0,0 +1,21 @@
+@import "../bem.blocks/bem_variables";
+
+#signals-form-card {
+  #mc_embed_signup {
+    span {
+      &.asterisk {
+        font-size: 1rem;
+        font-weight: normal;
+        color: @red-color;
+      }
+    }
+
+    #mc-embedded-subscribe {
+      &:disabled,
+      &.disabled {
+        background-color: @grey-extra-dark-color;
+        border-color: @grey-extra-dark-color;
+      }
+    }
+  }
+}
diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/templates/landing_pages/signals.html b/ckanext-hdx_theme/ckanext/hdx_theme/templates/landing_pages/signals.html
@@ -5,6 +5,11 @@
   {% asset 'hdx_theme/hdx-signals-scripts' %}
 {% endblock %}
 
+{% block styles %}
+  {{ super() }}
+  {% asset 'hdx_theme/hdx-signals-styles' %}
+{% endblock %}
+
 {% set CONST = h.HDX_CONST('UI_CONSTANTS')['LANDING_PAGES']['SIGNALS_LANDING_PAGE'] %}
 
 {% block subtitle %}{{ _('HDX Signals') }}{% endblock %}
@@ -64,7 +69,7 @@
                                          required="" value="">
                                 </div>
                                 <div class="mc-field-group mb-4">
-                                  {{ h.snippet('bem.blocks/paragraph.html', text='Step 1: Datasets of interest', paragraph_classes=["paragraph__text_font-size-medium", "fw-bold", "mb-0"]) }}
+                                  {{ h.snippet('bem.blocks/paragraph.html', text='Step 1: Datasets of interest <span class="asterisk">*</span>', paragraph_classes=["paragraph__text_font-size-medium", "fw-bold", "mb-0"]) }}
                                   <p class="action-buttons"></p>
                                   <ul class="list-unstyled">
                                     <li class="form-check">
@@ -108,7 +113,7 @@
                               </div>
                               <div class="col-12 col-md-12">
                                 <div class="mc-field-group mb-4">
-                                  {{ h.snippet('bem.blocks/paragraph.html', text='Step 2: Locations of interest', paragraph_classes=["paragraph__text_font-size-medium", "fw-bold", "mb-0"]) }}
+                                  {{ h.snippet('bem.blocks/paragraph.html', text='Step 2: Locations of interest <span class="asterisk">*</span>', paragraph_classes=["paragraph__text_font-size-medium", "fw-bold", "mb-0"]) }}
                                   <p class="action-buttons">
                                     <button type="button" class="btn btn-link p-0 me-2" id="select-all-locations"><small>Select all</small></button>
                                     <button type="button" class="btn btn-link p-0 me-2" id="select-all-hrp-locations"><small>Select all HRP locations <span data-module="bs_tooltip" data-module-placement="top" data-bs-toggle="tooltip" data-bs-original-title="Locations with a Humanitarian Response Plan">[?]</span></small></button>
@@ -352,6 +357,9 @@
                             <div aria-hidden="true" style="position: absolute; left: -5000px;">
                               <input type="text" name="b_ea3f905d50ea939780139789d_e908cb9d48" tabindex="-1" value="">
                             </div>
+                            <div class="alert alert-warning" id="mc-embedded-subscribe-alert" role="alert">
+                              Please fill out all the required fields.
+                            </div>
                             <div class="clear text-center mb-3">
                               <input type="submit" name="subscribe" id="mc-embedded-subscribe"
                                      class="btn btn-primary disabled" disabled data-module="hdx_click_stopper"