From 83f8ab4c0a108c301fc0ef9b11112bcb9cb5b538 Mon Sep 17 00:00:00 2001 From: Catalin Date: Mon, 13 Nov 2023 13:21:12 +0200 Subject: [PATCH 1/2] HDX-9233 add areas of interest field in MailChimp form --- src/footer.php | 39 +------------ src/functions.php | 42 ++++++++++++++ src/impactstory.php | 32 +---------- src/scripts/humdata.js | 25 ++++++++ src/scss/_elements.scss | 12 +++- src/scss/_front.scss | 5 -- src/scss/_impactstory.scss | 15 ++--- src/scss/_menus.scss | 113 +++++++++++++++++++++++++++++++++++-- 8 files changed, 196 insertions(+), 87 deletions(-) diff --git a/src/footer.php b/src/footer.php index 9e6f8aa..717be26 100755 --- a/src/footer.php +++ b/src/footer.php @@ -15,24 +15,7 @@

Stay in touch

Sign up to our mailing list to get the latest updates on the Centre or download our brochure to learn more

- - -
-
-
-
- -
- -
- - -
- -
-
-
- +
-
+
Connecting people and data to improve lives
-
-
-
-
- -
- -
- - -
- -
-
-
+
diff --git a/src/functions.php b/src/functions.php index 082420f..dee67bf 100644 --- a/src/functions.php +++ b/src/functions.php @@ -607,3 +607,45 @@ function get_archive_posts($post, $post_type, $tax) } return $content; } + +// Define the shortcode function +function mailchimp_newsletter_form_shortcode() { + ob_start(); // Start output buffering + + ?> + + + + + +
Related content:
diff --git a/src/scripts/humdata.js b/src/scripts/humdata.js index 0084426..615143d 100644 --- a/src/scripts/humdata.js +++ b/src/scripts/humdata.js @@ -448,5 +448,30 @@ } } + //*********** MAILCHIMP NEWSLETTER ***********// + $('.interest-areas-select').each(function() { + var select = $(this); + var form = select.parents('form:first'); + + // Initialize Select2 + var $select2 = select.select2({placeholder: 'Area(s) of Interest'}); + $select2.data().select2.$dropdown.addClass('interest-areas-container') + + // Update hidden input values when Select2 selection changes + select.on('change', function () { + var selectedValues = select.val(); + + // Uncheck all hidden inputs + form.find('input[name^="group[4368]"]').prop('checked', false); + + // Check hidden inputs based on selected values + if (selectedValues) { + selectedValues.forEach(function (value) { + form.find('input[name="group[4368][' + value + ']"]').prop('checked', true); + }); + } + }); + }); + })(jQuery); diff --git a/src/scss/_elements.scss b/src/scss/_elements.scss index 71a8eac..f2171bd 100644 --- a/src/scss/_elements.scss +++ b/src/scss/_elements.scss @@ -203,9 +203,15 @@ input{ } } -#contact #mc_embed_signup div.mce_inline_error { - background-color: transparent; - color: #FF0000; +#contact { + .mc_embed_signup { + input[type="email"] { + border: 1px solid $green; + } + .select2-container { + border: 1px solid $green; + } + } } .media-credit { diff --git a/src/scss/_front.scss b/src/scss/_front.scss index 0c2d45c..9ab2c4c 100644 --- a/src/scss/_front.scss +++ b/src/scss/_front.scss @@ -362,11 +362,6 @@ a.underline { } .contact-module { padding-bottom: 80px; - .mc-field-group { - input[type=email] { - margin-bottom: 20px; - } - } p { width: 90%; } diff --git a/src/scss/_impactstory.scss b/src/scss/_impactstory.scss index b4fb670..2396ea2 100644 --- a/src/scss/_impactstory.scss +++ b/src/scss/_impactstory.scss @@ -32,6 +32,13 @@ .impact-story { .post-content { margin-bottom: 60px; + .mc_embed_signup { + .select2-container { + width: 100% !important; + margin-top: 5px; + margin-bottom: 5px; + } + } } .summary { font-size: 20px; @@ -179,9 +186,8 @@ font-size: 16px; height: 40px; line-height: 40px; - max-width: 270px; + width: 100%; padding-left: 10px; - width: 68%; &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #CCC !important; } @@ -305,11 +311,6 @@ } } .impact-story { - .post-content { - #mc_embed_signup { - padding: 0; - } - } .author-info { h5 { font-size: 14px; diff --git a/src/scss/_menus.scss b/src/scss/_menus.scss index 7de9331..c70bb63 100644 --- a/src/scss/_menus.scss +++ b/src/scss/_menus.scss @@ -272,16 +272,15 @@ } } -#mc_embed_signup { +.mc_embed_signup { input[type="email"] { background-color: $white; border-radius: 0; font-size: 16px; height: 40px; line-height: 40px; - max-width: 270px; + width: 180px; padding-left: 10px; - width: 68%; &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #CCC !important; } @@ -294,9 +293,6 @@ &:-moz-placeholder { /* Firefox 18- */ color: #CCC !important; } - &.light { - border: 1px solid $green; - } } .btn.submit-btn { background-color: $green; @@ -305,7 +301,112 @@ line-height: 40px; padding: 0 12px !important; } + .select2-container { + width: 320px !important; + display: inline-block; + height: 40px; + line-height: 40px; + overflow: hidden; + .select2-selection { + border: 0; + border-radius: 0; + &.select2-selection--multiple { + max-height: 40px; + .select2-selection__rendered { + max-height: 40px; + } + .select2-selection__choice { + line-height: 24px !important; + } + } + .select2-selection__choice { + $selection-width: 75px; + $selection-margin: 6px; + $max-selections: 4; + float: none; + display: inline-block; + top: 0; + left: auto; + position: absolute; + width: $selection-width; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding: 2px 5px; + border-radius: 5px; + margin: $selection-margin; + border: 1px solid $green; + color: $gray66; + background-color: $white; + @for $i from 1 through $max-selections { + &:nth-child(#{$i}) { + left: ($selection-width + $selection-margin) * ($i - 1); + } + } + } + .select2-search__field { + line-height: 34px; + font-family: $font-serif-book; + font-size: 16px; + &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ + color: #CCC !important; + } + &::-moz-placeholder { /* Firefox 19+ */ + color: #CCC !important; + } + &:-ms-input-placeholder { /* IE 10+ */ + color: #CCC !important; + } + &:-moz-placeholder { /* Firefox 18- */ + color: #CCC !important; + } + } + } + } +} +.interest-areas-container { + .select2-dropdown { + .select2-results { + .select2-results__options { + .select2-results__option { + color: $gray66; + background-color: $white; + font-size: 12px; + &.select2-results__option--highlighted { + color: $green; + } + } + } + } + } +} +@media (max-width: $screen-lg) { + .mc_embed_signup { + .select2-container { + width: 215px !important; + } + } +} +@media (max-width: $screen-md) { + .mc_embed_signup { + input[type="email"] { + width: 100%; + max-width: none; + } + .select2-container { + width: 100% !important; + margin-top: 5px; + margin-bottom: 5px; + } + } } +//@media (min-width: $screen-md) { +// .interest-areas-container { +// .select2-dropdown { +// min-width: 400px; +// } +// } +//} @media (max-width: $screen-md) { From a5a97f9f49e355175bb07c4b6351cd71202d93f2 Mon Sep 17 00:00:00 2001 From: Catalin Date: Mon, 13 Nov 2023 13:24:48 +0200 Subject: [PATCH 2/2] HDX-9233 small css improvements --- src/scss/_impactstory.scss | 6 +++--- src/scss/_menus.scss | 23 ++++++++--------------- 2 files changed, 11 insertions(+), 18 deletions(-) diff --git a/src/scss/_impactstory.scss b/src/scss/_impactstory.scss index 2396ea2..b727408 100644 --- a/src/scss/_impactstory.scss +++ b/src/scss/_impactstory.scss @@ -192,13 +192,13 @@ color: #CCC !important; } &::-moz-placeholder { /* Firefox 19+ */ - color: #CCC !important; + color: $graycc !important; } &:-ms-input-placeholder { /* IE 10+ */ - color: #CCC !important; + color: $graycc !important; } &:-moz-placeholder { /* Firefox 18- */ - color: #CCC !important; + color: $graycc !important; } } .btn.submit-btn { diff --git a/src/scss/_menus.scss b/src/scss/_menus.scss index c70bb63..7690a0f 100644 --- a/src/scss/_menus.scss +++ b/src/scss/_menus.scss @@ -282,16 +282,16 @@ width: 180px; padding-left: 10px; &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ - color: #CCC !important; + color: $graycc !important; } &::-moz-placeholder { /* Firefox 19+ */ - color: #CCC !important; + color: $graycc !important; } &:-ms-input-placeholder { /* IE 10+ */ - color: #CCC !important; + color: $graycc !important; } &:-moz-placeholder { /* Firefox 18- */ - color: #CCC !important; + color: $graycc !important; } } .btn.submit-btn { @@ -349,16 +349,16 @@ font-family: $font-serif-book; font-size: 16px; &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ - color: #CCC !important; + color: $graycc !important; } &::-moz-placeholder { /* Firefox 19+ */ - color: #CCC !important; + color: $graycc !important; } &:-ms-input-placeholder { /* IE 10+ */ - color: #CCC !important; + color: $graycc !important; } &:-moz-placeholder { /* Firefox 18- */ - color: #CCC !important; + color: $graycc !important; } } } @@ -400,13 +400,6 @@ } } } -//@media (min-width: $screen-md) { -// .interest-areas-container { -// .select2-dropdown { -// min-width: 400px; -// } -// } -//} @media (max-width: $screen-md) {