-
Notifications
You must be signed in to change notification settings - Fork 153
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* backend first pass * frontend templates first pass * CMS Panel rearranging * zen nav is now always false * button conditional based on whether it has all three fields filled out * frontend formatting and linting * finished with backend + formatting + linting * indented long help text * hide campaign_header_block * centered cta form on mobile and tablet breakpoints * pushing WIP frontend update to get design approval * updated page to use downloadbutton block * updated button styling * feedback from design and devs * updated imports, new line, and default alt text. (ready for review) * hiding campaign_page_menu on app_install page template * translatable fields. Ready for review * updated button focus state per PR feedback * button update * accidentally deleted tw-group on the download buttons
- Loading branch information
1 parent
5f0bef6
commit f9c2297
Showing
12 changed files
with
320 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
150 changes: 150 additions & 0 deletions
150
network-api/networkapi/wagtailpages/migrations/0133_appinstallpage.py
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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",), | ||
| ), | ||
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
81 changes: 81 additions & 0 deletions
81
network-api/networkapi/wagtailpages/pagemodels/app_install.py
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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"] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 12 additions & 0 deletions
12
...-api/networkapi/wagtailpages/pagemodels/customblocks/app_install_download_button_block.py
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" |
22 changes: 22 additions & 0 deletions
22
network-api/networkapi/wagtailpages/templates/wagtailpages/app_install_page.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 %} |
10 changes: 10 additions & 0 deletions
10
...workapi/wagtailpages/templates/wagtailpages/blocks/app_install_download_button_block.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
|
|
||
| {% load wagtailcore_tags wagtailimages_tags %} | ||
|
|
||
| <a class="tw-group tw-btn-secondary tw-flex tw-items-center tw-justify-center tw-gap-x-4 tw-transition-colors tw-bg-white hover:tw-bg-black focus: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 group-focus:tw-invert tw-transition-all" width="18" height="18"> | ||
| {% endif %} | ||
| <span>{{ value.label }}</span> | ||
| </a> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
33 changes: 33 additions & 0 deletions
33
network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/app_install_hero.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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-grid tw-grid-flow-row tw-auto-cols-max tw-gap-8 medium:tw-grid-flow-col"> | ||
| {% 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> |