Improved styling for mailing list signup

- Add mailing list signup into yellow section of area page.
- Add mailing list signup to top of /sources page.
- Remove mailing list signup from Contact page.
- Tweaks to wording of mailing list signup intro and success message.
- Progressively enhance mailing list signup form with hidden name and
  newsletter checkboxes until an email address is entered, to reduce
  visual weight on the page until we know the user is interested.
- Add `.mw-` Boostrap utlity classes for max-width.

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;
+    }
+}

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"),
             (

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"]) {

hub/templates/hub/area.html

@@ -662,18 +662,25 @@ <h3 class="h5">{{ dataset.label }}</h3>
     </div>
 </div>
 
-{% if not user.is_authenticated %}
-<div class="py-4 py-lg-5 bg-yellow-100 border-top d-print-none">
+<aside class="py-4 py-lg-5 bg-yellow-100 border-top d-print-none">
     <div class="container">
-        <aside class="d-flex align-items-center">
-            {% include 'hub/includes/icons/tcc-heart.html' with width="3em" height="3em" classes="me-3 me-lg-4 flex-shrink-0 flex-grow-0" %}
-            <div>
-                <h2 class="h4">Climate Coalition member?</h2>
-                <p class="mb-0"><a href="{% url 'login' %}">Sign in</a> or <a href="{% url 'signup' %}">request an account</a> to access exclusive members-only MRP and local movement data.</p>
+        <div class="row">
+          {% if not user.is_authenticated %}
+            <div class="col-lg-5 me-lg-auto">
+                <div class="d-flex align-items-center">
+                    {% include 'hub/includes/icons/tcc-heart.html' with width="3em" height="3em" classes="me-3 me-lg-4 flex-shrink-0 flex-grow-0" %}
+                    <div>
+                        <h2 class="h4">Climate Coalition member?</h2>
+                        <p class="mb-0"><a href="{% url 'login' %}">Sign in</a> or <a href="{% url 'signup' %}">request an account</a> to access exclusive members-only MRP and local movement data.</p>
+                    </div>
+                </div>
             </div>
-        </aside>
+          {% endif %}
+            <div class="col-lg-6">
+                {% include 'hub/includes/mailing-list-form.html' classes="js-collapsable-mailing-list-form" %}
+            </div>
+        </div>
     </div>
-</div>
-{% endif %}
+</aside>
 
 {% endblock %}

hub/templates/hub/contact.html

@@ -12,8 +12,6 @@ <h1 class="mb-4">Contact us</h1>
             <p>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 <a href="mailto:[email protected]">[email protected]</a>, and we’ll direct your message to the right place.</p>
 
         </div>
-
-        {% include 'hub/includes/mailing-list-form.html' %}
     </div>
 </div>
 

hub/templates/hub/includes/mailing-list-form.html

@@ -1,51 +1,48 @@
-<div class="readable">
-    <form id="mailing_list_signup" method="POST" action="{% url 'mailing_list_signup' %}">
-        {% csrf_token %}
-        <h2 class="h4">Want notifications when we add new data?</h2>
-        <fieldset>
-            <legend>Let us know your email address and we’ll notify you about new data:</legend>
-            <div class="mb-3">
-                <label class="form-label" for="full_name">Name</label>
-                <input type="text" name="full_name" id="full_name" class="form-control">
-                {% if form.errors.full_name %}
-                  <div class="invalid-feedback d-block fs-6 mt-2">
-                      {{ form.errors.full_name }}
-                  </div>
-                {% endif %}
+<form class="mailing-list-signup js-mailing-list-signup {{ classes }}" method="POST" action="{% url 'mailing_list_signup' %}">
+    {% csrf_token %}
+    <h2 class="h4 mt-0">Want to know when we add new data?</h2>
+    <fieldset class="mw-30rem">
+        <legend class="float-none mb-0">Tell us your email address and we’ll notify you when we add new data to the Local Intelligence Hub.</legend>
+        <div class="mt-3 js-mailing-list-email">
+            <label class="form-label" for="email">Email address</label>
+            <input type="email" name="email" id="email" class="form-control" autocomplete="email" spellcheck="false">
+          {% if form.errors.email %}
+            <div class="invalid-feedback d-block fs-6 mt-2 mb-n3">
+                {{ form.errors.email }}
             </div>
-            <div class="mb-3">
-                <label class="form-label" for="email">Email address</label>
-                <input type="email" name="email" id="email" class="form-control">
-                {% if form.errors.email %}
-                  <div class="invalid-feedback d-block fs-6 mt-2">
-                      {{ form.errors.email }}
-                  </div>
-                {% endif %}
+          {% endif %}
+        </div>
+        <div class="mt-3 js-mailing-list-name">
+            <label class="form-label" for="full_name">Name</label>
+            <input type="text" name="full_name" id="full_name" class="form-control">
+          {% if form.errors.full_name %}
+            <div class="invalid-feedback d-block fs-6 mt-2 mb-n3">
+                {{ form.errors.full_name }}
             </div>
-        </fieldset>
-        <fieldset>
-            <legend>You can also, optionally, join our newsletters for more inspiration on data, democracy, and climate action:</legend>
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" value="yes" name="mysoc_signup" id="mysoc_signup">
-                <label class="form-check-label" for="mysoc_signup">
-                    mySociety
-                    <a href="https://www.mysociety.org/privacy/">(privacy policy)</a>
-                </label>
-            </div>
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" value="yes" name="tcc_signup" id="tcc_signup">
-                <label class="form-check-label" for="tcc_signup">
-                    The Climate Coalition
-                    <a href="https://www.theclimatecoalition.org/privacy-policy">(privacy policy)</a>
-                </label>
-            </div>
-        </fieldset>
-        <button type="submit" class="btn btn-primary mt-4">Subscribe</button>
-    </form>
-</div>
+          {% endif %}
+        </div>
+    </fieldset>
+    <fieldset class="mt-4 js-mailing-list-extras mw-30rem">
+        <legend>You can also, optionally, join our newsletters for more inspiration on data, democracy, and climate action:</legend>
+        <div class="form-check">
+            <input class="form-check-input" type="checkbox" value="yes" name="mysoc_signup" id="mysoc_signup">
+            <label class="form-check-label" for="mysoc_signup">
+                mySociety newsletter
+                <a href="https://www.mysociety.org/privacy/" target="_blank" title="Opens in a new window">(privacy policy)</a>
+            </label>
+        </div>
+        <div class="form-check mt-2">
+            <input class="form-check-input" type="checkbox" value="yes" name="tcc_signup" id="tcc_signup">
+            <label class="form-check-label" for="tcc_signup">
+                The Climate Coalition  newsletter
+                <a href="https://www.theclimatecoalition.org/privacy-policy" target="_blank" title="Opens in a new window">(privacy policy)</a>
+            </label>
+        </div>
+    </fieldset>
+    <button type="submit" class="btn btn-primary mt-4">Subscribe</button>
+</form>
 
-<div class="d-none" id="mailing_list_success">
-    <p>
-        You're signed up!
-    </p>
+<div class="d-none js-mailing-list-success">
+    <h2 class="h4 mt-0">Thanks for signing up!</h2>
+    <p class="mw-30rem">We’ll let you know when there’s new data we think you’ll be interested in, on the Local Intelligence Hub.</p>
 </div>

hub/templates/hub/sources.html

@@ -3,14 +3,30 @@
 {% block content %}
 
 <div class="py-4 py-lg-5">
-    <div class="container pb-5">
 
+    <div class="container pb-5">
         <h1>Datasets and data sources</h1>
+        <p class="readable mt-4 mb-0">
+            The Local Intelligence Hub brings together data from a number of public and private sources, under four categories: <a href="#mp">MP</a>, <a href="#opinion">Public opinion</a>, <a href="#place">Place</a>, and <a href="#movement">Movement</a>.
+        </p>
+    </div>
 
-        <div class="readable mt-4">
-            <p>The Local Intelligence Hub brings together data from a number of public and private sources, under four categories: <a href="#mp">MP</a>, <a href="#opinion">Public opinion</a>, <a href="#place">Place</a>, and <a href="#movement">Movement</a>.</p>
-            <p>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, <a href="{% url 'contact' %}">please get in touch</a>.</p>
+    <div class="bg-gray-100 border-top border-bottom py-5">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-5 col-xl-6">
+                    {% include 'hub/includes/mailing-list-form.html' with classes="js-collapsable-mailing-list-form" %}
+                </div>
+                <div class="col-md-5 mt-5 mt-md-0 mx-md-auto">
+                    <h2 class="h4 mt-0">Got new data to contribute?</h2>
+                    <p>We are constantly incorporating new data into the Local Intelligence Hub, for the benefit of the entire climate and nature movement.</p>
+                    <p class="mb-0">If your organisation has data to contribute, <a href="{% url 'contact' %}">please get in touch</a>.</p>
+                </div>
+            </div>
         </div>
+    </div>
+
+    <div class="container pb-5">
 
       {% for slug, category in categories.items %}
         <h2 class="mt-5 text-primary" id="{{ slug }}">{{ category.label }}</h2>