Add AppInstallPage

network-api/networkapi/templates/fragments/responsive_screen_wide_image.html

@@ -1,4 +1,4 @@
-{% load wagtailimages_tags %}
+{% load wagtailimages_tags i18n %}
 
 <picture
 >
@@ -55,6 +55,6 @@
       Assuming low probability for a high res screen (since it's an outdated browser).
     {% endcomment %}
         src="{{ img_1200.url }}"
-        alt=""
+        alt="{% trans "Hero Image" %}"
     >
 </picture>

network-api/networkapi/wagtailpages/migrations/0133_appinstallpage.py

@@ -0,0 +1,150 @@
+# Generated by Django 4.2.11 on 2024-04-03 00:02
+
+import django.db.models.deletion
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.fields
+import wagtail.images.blocks
+from django.db import migrations, models
+
+import networkapi.wagtailpages.validators
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("wagtailimages", "0025_alter_image_file_alter_rendition_file"),
+        ("wagtailpages", "0132_make_link_to_required_in_link_block"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="AppInstallPage",
+            fields=[
+                (
+                    "campaignpage_ptr",
+                    models.OneToOneField(
+                        auto_created=True,
+                        on_delete=django.db.models.deletion.CASCADE,
+                        parent_link=True,
+                        primary_key=True,
+                        serialize=False,
+                        to="wagtailpages.campaignpage",
+                    ),
+                ),
+                ("hero_heading", models.CharField(help_text="Hero story headline", max_length=80)),
+                ("hero_subheading", models.CharField(blank=True, help_text="Hero story subheadline", max_length=80)),
+                (
+                    "hero_video",
+                    models.URLField(
+                        blank=True,
+                        help_text="To find embed link: go to your YouTube video and click “Share,” then “Embed,” and then copy and paste the provided URL only. EX: https://www.youtube.com/embed/3FIVXBawyQ",
+                        null=True,
+                    ),
+                ),
+                (
+                    "download_buttons",
+                    wagtail.fields.StreamField(
+                        [
+                            (
+                                "button",
+                                wagtail.blocks.StructBlock(
+                                    [
+                                        ("label", wagtail.blocks.CharBlock()),
+                                        (
+                                            "link_to",
+                                            wagtail.blocks.ChoiceBlock(
+                                                choices=[
+                                                    ("page", "Page"),
+                                                    ("external_url", "External URL"),
+                                                    ("relative_url", "Relative URL"),
+                                                    ("email", "Email"),
+                                                    ("anchor", "Anchor"),
+                                                    ("file", "File"),
+                                                    ("phone", "Phone"),
+                                                ],
+                                                label="Link to",
+                                            ),
+                                        ),
+                                        ("page", wagtail.blocks.PageChooserBlock(label="Page", required=False)),
+                                        (
+                                            "external_url",
+                                            wagtail.blocks.URLBlock(
+                                                help_text="Enter a full URL including http:// or https://",
+                                                label="External URL",
+                                                max_length=300,
+                                                required=False,
+                                            ),
+                                        ),
+                                        (
+                                            "relative_url",
+                                            wagtail.blocks.CharBlock(
+                                                help_text='A path relative to this domain. For example, "/foo/bar"',
+                                                label="Relative URL",
+                                                max_length=300,
+                                                required=False,
+                                                validators=[networkapi.wagtailpages.validators.RelativeURLValidator()],
+                                            ),
+                                        ),
+                                        (
+                                            "anchor",
+                                            wagtail.blocks.CharBlock(
+                                                help_text='An id attribute of an element on the current page. For example, "#section-1"',
+                                                label="#",
+                                                max_length=300,
+                                                required=False,
+                                                validators=[networkapi.wagtailpages.validators.AnchorLinkValidator()],
+                                            ),
+                                        ),
+                                        ("email", wagtail.blocks.EmailBlock(required=False)),
+                                        (
+                                            "file",
+                                            wagtail.documents.blocks.DocumentChooserBlock(
+                                                label="File", required=False
+                                            ),
+                                        ),
+                                        (
+                                            "phone",
+                                            wagtail.blocks.CharBlock(label="Phone", max_length=30, required=False),
+                                        ),
+                                        (
+                                            "new_window",
+                                            wagtail.blocks.BooleanBlock(label="Open in new window", required=False),
+                                        ),
+                                        (
+                                            "icon",
+                                            wagtail.images.blocks.ImageChooserBlock(
+                                                help_text="For best results, please use black or white icons.",
+                                                required=False,
+                                            ),
+                                        ),
+                                        (
+                                            "icon_alt_text",
+                                            wagtail.blocks.CharBlock(
+                                                help_text="Image description (for screen readers).", required=False
+                                            ),
+                                        ),
+                                    ]
+                                ),
+                            )
+                        ],
+                        blank=True,
+                        use_json_field=True,
+                    ),
+                ),
+                (
+                    "hero_background",
+                    models.ForeignKey(
+                        help_text="Background image for the hero section",
+                        on_delete=django.db.models.deletion.PROTECT,
+                        related_name="+",
+                        to="wagtailimages.image",
+                    ),
+                ),
+            ],
+            options={
+                "abstract": False,
+            },
+            bases=("wagtailpages.campaignpage",),
+        ),
+    ]

network-api/networkapi/wagtailpages/models.py

@@ -1,4 +1,5 @@
 # flake8: noqa
+from .pagemodels.app_install import AppInstallPage
 from .pagemodels.base import (
     FocusArea,
     FoundationMetadataPageMixin,

network-api/networkapi/wagtailpages/pagemodels/app_install.py

@@ -0,0 +1,81 @@
+from django.db import models
+from wagtail.admin.panels import FieldPanel, InlinePanel, MultiFieldPanel
+from wagtail.fields import StreamField
+from wagtail_localize.fields import SynchronizedField, TranslatableField
+
+from .campaigns import CampaignPage
+from .customblocks.app_install_download_button_block import (
+    AppInstallDownloadButtonBlock,
+)
+
+
+class AppInstallPage(CampaignPage):
+
+    zen_nav = False
+
+    hero_heading = models.CharField(
+        max_length=80,
+        help_text="Hero story headline",
+    )
+    hero_subheading = models.CharField(
+        max_length=80,
+        blank=True,
+        help_text="Hero story subheadline",
+    )
+    hero_background = models.ForeignKey(
+        "wagtailimages.Image",
+        on_delete=models.PROTECT,
+        related_name="+",
+        help_text="Background image for the hero section",
+    )
+    hero_video = models.URLField(
+        null=True,
+        blank=True,
+        help_text="To find embed link: go to your YouTube video and click “Share,” then “Embed,” "
+        "and then copy and paste the provided URL only. EX: https://www.youtube.com/embed/3FIVXBawyQ",
+    )
+    download_buttons = StreamField(
+        [
+            ("button", AppInstallDownloadButtonBlock()),
+        ],
+        use_json_field=True,
+        max_num=2,
+        blank=True,
+    )
+
+    content_panels = [
+        FieldPanel("title"),
+        MultiFieldPanel(
+            [
+                FieldPanel("hero_background"),
+                FieldPanel("hero_heading"),
+                FieldPanel("hero_subheading"),
+                FieldPanel("download_buttons"),
+                FieldPanel("hero_video"),
+            ],
+            heading="Hero Section",
+        ),
+        MultiFieldPanel(
+            [
+                FieldPanel("cta"),
+                InlinePanel("donation_modals", label="Donation Modal", max_num=4),
+                FieldPanel("body"),
+            ],
+            heading="Page Content",
+        ),
+    ]
+
+    translatable_fields = CampaignPage.translatable_fields + [
+        SynchronizedField("hero_background"),
+        TranslatableField("hero_heading"),
+        TranslatableField("hero_subheading"),
+        TranslatableField("download_buttons"),
+        SynchronizedField("hero_video"),
+    ]
+
+    subpage_types = [
+        "BanneredCampaignPage",
+        "OpportunityPage",
+    ]
+
+    parent_page_types = ["BanneredCampaignPage", "Homepage"]

network-api/networkapi/wagtailpages/pagemodels/base.py

@@ -959,6 +959,7 @@ def get_banner(self):
     ]
 
     subpage_types = [
+        "AppInstallPage",
         "BanneredCampaignPage",
         "BlogIndexPage",
         "CampaignIndexPage",

network-api/networkapi/wagtailpages/pagemodels/campaigns.py

@@ -427,6 +427,7 @@ class BanneredCampaignPage(PrimaryPage):
     ]
 
     subpage_types = [
+        "AppInstallPage",
         "BanneredCampaignPage",
         "PublicationPage",
         "OpportunityPage",

network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py

@@ -4,6 +4,7 @@
 from .advanced_table_block import AdvancedTableBlock
 from .airtable_block import AirTableBlock
 from .annotated_image_block import AnnotatedImageBlock
+from .app_install_download_button_block import AppInstallDownloadButtonBlock
 from .article_teaser_block import ArticleTeaserBlock
 from .articles import (
     ArticleDoubleImageBlock,

network-api/networkapi/wagtailpages/pagemodels/customblocks/app_install_download_button_block.py

@@ -0,0 +1,12 @@
+from wagtail import blocks
+from wagtail.images.blocks import ImageChooserBlock
+
+from networkapi.wagtailpages.pagemodels.customblocks.link_block import LinkBlock
+
+
+class AppInstallDownloadButtonBlock(LinkBlock):
+    icon = ImageChooserBlock(required=False, help_text="For best results, please use black or white icons.")
+    icon_alt_text = blocks.CharBlock(required=False, help_text="Image description (for screen readers).")
+
+    class Meta:
+        template = "wagtailpages/blocks/app_install_download_button_block.html"

network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_page.html

@@ -0,0 +1,22 @@
+{% extends "./campaign_page.html" %}
+
+{% block subcontent %}
+    {% include "./fragments/app_install_hero.html" %}
+    {{ block.super }}
+{% endblock subcontent %}
+
+{% block html_content_desktop %}
+    {% include "./fragments/campaign_main_body.html" with page=page class="tw-block" %}
+{% endblock html_content_desktop %}
+
+{% block campaign_page_header %}
+{% endblock campaign_page_header %}
+
+{% block campaign_page_menu %}
+{% endblock campaign_page_menu %}
+
+{% block html_content_mobile %}
+{% endblock html_content_mobile %}
+
+{% block cta_sticky_button %}
+{% endblock cta_sticky_button %}

network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html

@@ -0,0 +1,10 @@
+
+{% load wagtailcore_tags wagtailimages_tags %}
+
+<a class="tw-group tw-btn-secondary tw-w-max tw-border-2 tw-flex tw-items-center tw-gap-x-4 tw-transition-colors tw-bg-white hover:tw-bg-black  after:tw-hidden" href="{{ value.url }}" target="_blank">
+    {% if value.icon %}
+        {% image value.icon original as btn_icon %}
+        <img src="{{ btn_icon.url }}" alt="{{ value.icon_alt_text }}" class="tw-inline tw-brightness-0 group-hover:tw-invert tw-transition-all" width="18" height="18">
+    {% endif %}
+    <span>{{ value.label }}</span>
+</a>

network-api/networkapi/wagtailpages/templates/wagtailpages/campaign_page.html

@@ -58,16 +58,18 @@ <h1 class="tw-h1-heading {% if uses_menu %}tw-hidden medium:tw-block{% endif %}"
 
                     {% block cta %}
                         {% if page.cta != None %}
-                            <div class="cta tw-pb-4
+                            <div class="cta tw-pb-4 tw-mx-auto
                                         {% if page.specific.narrowed_page_content == False %}
                                             large:tw-w-4/12 large:tw-ml-[8.3%] tw-px-8
                                         {% else %}
                                             tw-w-full
                                         {% endif %}"
                             >
-                                <div class="narrow-sticky-button-container hidden">
-                                    <a href="#cta-anchor" class="tw-btn-primary tw-block">{% trans "TAKE ACTION" context "Sticky button in mobile view on campaign pages" %}</a>
-                                </div>
+                                {% block cta_sticky_button %}
+                                    <div class="narrow-sticky-button-container hidden">
+                                        <a href="#cta-anchor" class="tw-btn-primary tw-block">{% trans "TAKE ACTION" context "Sticky button in mobile view on campaign pages" %}</a>
+                                    </div>
+                                {% endblock cta_sticky_button %}
                                 <div class="tw-sticky tw-top-40 tw-overflow-hidden tw-z-[1018]">
                                     <div id="cta-anchor" class="-tw-mt-40 tw-pt-40">
                                         {% cta page %}

network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html

@@ -0,0 +1,33 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+
+<div id="app-install-hero" class="tw-relative tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-overflow-hidden">
+    <div class="tw-absolute tw-inset-0">
+        {% include "fragments/responsive_screen_wide_image.html" with image_object=page.hero_background %}
+    </div>
+    <div class="tw-relative tw-container tw-px-8 {% if page.hero_video %} tw-py-32 {% else %} tw-pt-40 tw-pb-56 medium:tw-pt-56 medium:tw-pb-72 {% endif %} large:tw-pt-64 large:tw-pb-80">
+        <div class="tw-grid tw-grid-cols-1 large:tw-grid-cols-2 {% if page.hero_video %} tw-gap-x-32 {% endif %} ">
+            <div class="tw-flex tw-flex-col tw-justify-center">
+                <h2 class="tw-mb-8 tw-h1-heading tw-text-white tw-font-light tw-text-4xl large:tw-text-5xl">
+                    {{ page.hero_heading }}
+                </h2>
+                <p class="tw-pb-4 tw-body-large tw-text-white tw-font-light">
+                    {{ page.hero_subheading }}
+                </p>
+                {% if page.download_buttons %}
+                    <div class="download-btn-wrapper">
+                        <div class="tw-mt-2 tw-flex tw-flex-wrap tw-flex-col medium:tw-flex-row tw-gap-8">
+                            {% for block in page.download_buttons %}
+                                {% include_block block %}
+                            {% endfor %}
+                        </div>
+                    </div>
+                {% endif %}
+            </div>
+            {% if page.hero_video %}
+                <div class="tw-mt-14 tw-overflow-hidden tw-relative tw-w-full after:tw-pt-[56.25%] after:tw-block after:tw-content-['']">
+                    <iframe class="tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full" src="{{ page.hero_video }}" allowfullscreen></iframe>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+</div>