Merge pull request #1756 from MozillaFoundation/1755-rework-campaign-…

…page

Added new fields and styling for Campaign pages to allow for CTA-first layouts, fixed header cascading

donate/core/migrations/0003_auto_20230531_2044.py

@@ -0,0 +1,23 @@
+# Generated by Django 3.1.14 on 2023-05-31 20:44
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0002_featureflags'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='campaignpage',
+            name='cta_first',
+            field=models.BooleanField(default=False, help_text='Check this to shift the CTA to the top on mobile'),
+        ),
+        migrations.AddField(
+            model_name='campaignpage',
+            name='intro_header',
+            field=models.CharField(blank=True, default='Donate now', max_length=200),
+        ),
+    ]

donate/core/models.py

@@ -241,17 +241,30 @@ class CampaignPage(DonationPage):
         models.PROTECT,
         related_name='+',
     )
+
     lead_text = models.CharField(max_length=800)
+    intro_header = models.CharField(max_length=200, blank=True, default="Donate now")
     intro = RichTextField()
 
     content_panels = Page.content_panels + [
+        FieldPanel('lead_text'),
         FieldPanel('project'),
         ImageChooserPanel('hero_image'),
-        FieldPanel('lead_text'),
+        FieldPanel('intro_header'),
         FieldPanel('intro'),
         InlinePanel('donation_amounts', label='Donation amount overrides'),
     ]
 
+    cta_first = models.BooleanField(
+        default=False,
+        help_text="Check this to shift the CTA to the top on mobile",
+    )
+
+    settings_panels = Page.settings_panels + [
+        FieldPanel('campaign_id'),
+        FieldPanel('cta_first')
+    ]
+
     @classmethod
     def amount_stream_to_list(cls, stream):
         return [Decimal(child.value) for child in stream]

donate/templates/fragments/campaign_page_fundraiseup_form.html

@@ -0,0 +1,12 @@
+{% load static i18n %}
+
+<div class="layout__half-col {{ order }}">
+    <div class="donate-form">
+        {% if page.cta_first == True %}
+            <h2 class="heading heading--primary donate-form__heading-mobile">
+                {% trans page.intro_header context "Header" %}
+            </h2>
+        {% endif %}
+        {% include "./donate_form_fundraise_up.html" %}
+    </div>
+</div>

donate/templates/fragments/campaign_page_intro.html

@@ -0,0 +1,14 @@
+{% load static wagtailcore_tags i18n %}
+
+<div class="layout__half-col {{ order }}">
+    <div class="introduction column-spacing">
+        {% if page.intro_header %}
+            <h2 class="heading heading--primary {% if page.cta_first == True %}heading-cta-first{% endif %}">
+                {% trans page.intro_header context "Header" %}
+            </h2>
+        {% endif %}
+        <div class="introduction__container">
+            {{ page.intro|richtext }}
+        </div>
+    </div>
+</div>

donate/templates/fragments/donate_form_fundraise_up.html

@@ -1,3 +1,3 @@
 <div class="donate-form__fundraiseup-form">
     <a href="{{ fru_form_id }}" style="display: none;"></a>
-</div>
+</div>

donate/templates/pages/core/campaign_page.html

@@ -36,22 +36,14 @@ <h1 class="heading heading--primary hero__heading">{{ page.title }}</h1>
         </div>
     </div>
     <div class="layout__container">
-        <div class="layout__half-col">
-            <div class="introduction column-spacing">
-                <h1 class="heading heading--primary">
-                    {% trans "Donate now" context "Header" %}
-                </h1>
-                <div class="introduction__container">
-                    {{ page.intro|richtext }}
-                </div>
-            </div>
-        </div>
-        <div class="layout__half-col">
-            <div class="donate-form">
-                {% include "fragments/donate_form_fundraise_up.html" %}
-            </div>
-        </div>
-        <div class="layout__full-col">
+        {% if page.cta_first == True %}
+            {% include "fragments/campaign_page_fundraiseup_form.html" with order="order__2" %}
+            {% include "fragments/campaign_page_intro.html" with order="order__1" %}
+        {% else %}
+            {% include "fragments/campaign_page_intro.html" with order="order__1" %}
+            {% include "fragments/campaign_page_fundraiseup_form.html" with order="order__2" %}
+        {% endif %}
+        <div class="layout__full-col order__3">
             {% include "fragments/donate_form_disclaimer_fundraise_up.html" %}
         </div>
     </div>

source/sass/base/_layout--fundraiseup.scss

@@ -191,6 +191,33 @@
       .heading {
         padding-bottom: $gutter;
       }
+
+      .heading-cta-first {
+        display: none;
+        @include media-query(tablet-fundraiseup) {
+          display: block;
+        }
+      }
+    }
+
+    .order {
+      &__1 {
+        @include media-query(tablet-fundraiseup) {
+          order: 1;
+        }
+      }
+
+      &__2 {
+        @include media-query(tablet-fundraiseup) {
+          order: 2;
+        }
+      }
+
+      &__3 {
+        @include media-query(tablet-fundraiseup) {
+          order: 3;
+        }
+      }
     }
   }
 }

source/sass/components/_donate-form.scss

@@ -11,6 +11,12 @@
     margin-bottom: 0;
   }
 
+  &__heading-mobile {
+    @include media-query(tablet-fundraiseup) {
+      display: none;
+    }
+  }
+
   &__tab-options {
     display: flex;
     flex-direction: row;
@@ -22,6 +28,7 @@
     grid-gap: ($gutter / 2);
     grid-template-columns: 1fr 1fr;
     margin-bottom: $gutter;
+
     @include media-query(tablet-portrait) {
       grid-template-columns: 1fr 1fr 1fr;
       grid-gap: ($gutter);