diff --git a/hub/static/css/_area.scss b/hub/static/css/_area.scss index 15ccaecb5..add7c17b2 100644 --- a/hub/static/css/_area.scss +++ b/hub/static/css/_area.scss @@ -181,3 +181,17 @@ [data-copy-text][data-copied] { animation: 500ms linear success-ping; } + +// Mailing list signup on area page +// TODO: This is super hacky, maybe we should make a component for this? +.row > * + * > .mailing-list-signup { + margin-top: map-get($spacers, 4); + padding-top: map-get($spacers, 4); + border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color); + + @include media-breakpoint-up('lg') { + margin-top: 0; + padding-top: 0; + border-top: none; + } +} \ No newline at end of file diff --git a/hub/static/css/_utilities.scss b/hub/static/css/_utilities.scss index 215c77386..284fc5dbc 100644 --- a/hub/static/css/_utilities.scss +++ b/hub/static/css/_utilities.scss @@ -59,6 +59,22 @@ $utilities: map-merge( ), ), ), + "max-width": map-merge( + map-get($utilities, "max-width"), + ( + values: ( + 50: 50%, + 100: 100%, + 10rem: 10rem, // 160px, 3-6 words + 20rem: 20rem, // 320px, 6-9 words + 30rem: 30rem, // 480px, 9-12 words + 35rem: 35rem, + 40rem: 40rem, // 640px, 12-15 words + 45rem: 45rem, + 50rem: 50rem, + ), + ), + ), "position": map-merge( map-get($utilities, "position"), ( diff --git a/hub/static/js/home.js b/hub/static/js/home.js index 3a0074e04..7283bb177 100644 --- a/hub/static/js/home.js +++ b/hub/static/js/home.js @@ -16,6 +16,28 @@ async function mailingListSignup($form) { return response.json() } +var setUpCollapsableMailingListForm = function() { + var $form = $(this); + var selectors = '.js-mailing-list-name, .js-mailing-list-extras'; + var trigger = '.js-mailing-list-email input#email'; + var instances = []; + + var updateUI = function() { + var emailEntered = $(trigger).val() !== ''; + $.each(instances, function(i, instance){ + emailEntered ? instance.show() : instance.hide(); + }); + }; + + $(selectors, $form).addClass('collapse').each(function(){ + instances.push(new Collapse(this, { toggle: false })); + }); + $(trigger, $form).on('keyup change', function(){ + updateUI(); + }); + updateUI(); +}; + $(function(){ if( 'geolocation' in navigator ) { $('.js-geolocate').removeClass('d-none'); @@ -100,14 +122,16 @@ $(function(){ }); }) - $('#mailing_list_signup').on('submit', function(e){ + $('.js-collapsable-mailing-list-form').each(setUpCollapsableMailingListForm); + + $('.js-mailing-list-signup').on('submit', function(e){ e.preventDefault(); var $form = $(this); $('.invalid-feedback').remove() mailingListSignup($form).then(function(response){ if (response['response'] == 'ok') { - $form.parent().hide() - $('#mailing_list_success').removeClass('d-none') + $form.hide() + $('.js-mailing-list-success').removeClass('d-none') } else { console.log(response) for (var k in response["errors"]) { diff --git a/hub/templates/hub/area.html b/hub/templates/hub/area.html index 294c8afab..1166b5388 100644 --- a/hub/templates/hub/area.html +++ b/hub/templates/hub/area.html @@ -662,18 +662,25 @@

{{ dataset.label }}

-{% if not user.is_authenticated %} -
+
- -{% endif %} + {% endblock %} diff --git a/hub/templates/hub/contact.html b/hub/templates/hub/contact.html index 9a4a3c455..038ec48d5 100644 --- a/hub/templates/hub/contact.html +++ b/hub/templates/hub/contact.html @@ -12,8 +12,6 @@

Contact us

Whether you’ve spotted an error on the site, or you have new data to contribute, or you need help managing your account, or anything else – send an email to localintelligencehub@theclimatecoalition.org, and we’ll direct your message to the right place.

- - {% include 'hub/includes/mailing-list-form.html' %} diff --git a/hub/templates/hub/includes/mailing-list-form.html b/hub/templates/hub/includes/mailing-list-form.html index ba5007d39..5ba07b363 100644 --- a/hub/templates/hub/includes/mailing-list-form.html +++ b/hub/templates/hub/includes/mailing-list-form.html @@ -1,51 +1,48 @@ -
-
- {% csrf_token %} -

Want notifications when we add new data?

-
- Let us know your email address and we’ll notify you about new data: -
- - - {% if form.errors.full_name %} -
- {{ form.errors.full_name }} -
- {% endif %} + + {% csrf_token %} +

Want to know when we add new data?

+
+ Tell us your email address and we’ll notify you when we add new data to the Local Intelligence Hub. +
+ + + {% if form.errors.email %} +
+ {{ form.errors.email }}
-
- - - {% if form.errors.email %} -
- {{ form.errors.email }} -
- {% endif %} + {% endif %} +
+
+ + + {% if form.errors.full_name %} +
+ {{ form.errors.full_name }}
-
-
- You can also, optionally, join our newsletters for more inspiration on data, democracy, and climate action: -
- - -
-
- - -
-
- - -
+ {% endif %} +
+ +
+ You can also, optionally, join our newsletters for more inspiration on data, democracy, and climate action: +
+ + +
+
+ + +
+
+ + -
-

- You're signed up! -

+
+

Thanks for signing up!

+

We’ll let you know when there’s new data we think you’ll be interested in, on the Local Intelligence Hub.

diff --git a/hub/templates/hub/sources.html b/hub/templates/hub/sources.html index c3377fc19..2634d070f 100644 --- a/hub/templates/hub/sources.html +++ b/hub/templates/hub/sources.html @@ -3,14 +3,30 @@ {% block content %}
-
+

Datasets and data sources

+

+ The Local Intelligence Hub brings together data from a number of public and private sources, under four categories: MP, Public opinion, Place, and Movement. +

+
-
-

The Local Intelligence Hub brings together data from a number of public and private sources, under four categories: MP, Public opinion, Place, and Movement.

-

We are constantly incorporating new data into the Local Intelligence Hub, for the benefit of the entire climate and nature movement. If your organisation has data to contribute, please get in touch.

+
+
+
+
+ {% include 'hub/includes/mailing-list-form.html' with classes="js-collapsable-mailing-list-form" %} +
+
+

Got new data to contribute?

+

We are constantly incorporating new data into the Local Intelligence Hub, for the benefit of the entire climate and nature movement.

+

If your organisation has data to contribute, please get in touch.

+
+
+
+ +
{% for slug, category in categories.items %}

{{ category.label }}