diff --git a/network-api/networkapi/wagtailpages/migrations/0042_productpage_tips_to_protect_yourself.py b/network-api/networkapi/wagtailpages/migrations/0042_productpage_tips_to_protect_yourself.py new file mode 100644 index 0000000000..cc581a1df5 --- /dev/null +++ b/network-api/networkapi/wagtailpages/migrations/0042_productpage_tips_to_protect_yourself.py @@ -0,0 +1,19 @@ +# Generated by Django 3.1.11 on 2021-10-07 18:28 + +from django.db import migrations +import wagtail.core.fields + + +class Migration(migrations.Migration): + + dependencies = [ + ('wagtailpages', '0041_productpage_time_researched'), + ] + + operations = [ + migrations.AddField( + model_name='productpage', + name='tips_to_protect_yourself', + field=wagtail.core.fields.RichTextField(blank=True), + ), + ] diff --git a/network-api/networkapi/wagtailpages/pagemodels/products.py b/network-api/networkapi/wagtailpages/pagemodels/products.py index b76028e683..ae1bf16bdf 100644 --- a/network-api/networkapi/wagtailpages/pagemodels/products.py +++ b/network-api/networkapi/wagtailpages/pagemodels/products.py @@ -444,6 +444,10 @@ class ProductPage(AirtableMixin, FoundationMetadataPageMixin, Page): help_text="What's the worst thing that could happen by using this product?", blank=True, ) + tips_to_protect_yourself = RichTextField( + features=['bold', 'italic', 'link'], + blank=True + ) mozilla_says = models.BooleanField( null=True, blank=True, @@ -635,8 +639,8 @@ def get_export_fields(self): "Has privacy policy": self.privacy_policy, "Privacy policy help text": self.privacy_policy_helptext, "Mozilla Says": self.mozilla_says, - "Time Researched ": "time_researched", - + "Time Researched": self.time_researched, + "Tips to protect yourself": self.tips_to_protect_yourself } def get_status_for_airtable(self): @@ -687,9 +691,9 @@ def get_voting_json(self): FieldPanel('blurb'), ImageChooserPanel('image'), FieldPanel('worst_case'), + FieldPanel('tips_to_protect_yourself'), FieldPanel('mozilla_says'), FieldPanel('time_researched') - ], heading='General Product Details', classname='collapsible' @@ -816,6 +820,7 @@ def get_voting_json(self): TranslatableField('privacy_policy_helptext'), SynchronizedField('mozilla_says'), SynchronizedField('time_researched'), + TranslatableField('tips_to_protect_yourself') ] @property diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html index 0b6d6d45a5..a0776f228e 100644 --- a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html +++ b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html @@ -1,6 +1,6 @@ {% extends "buyersguide/bg_base.html" %} -{% load bg_selector_tags env l10n i18n localization static wagtailimages_tags %} +{% load bg_selector_tags env l10n i18n localization static wagtailimages_tags wagtailcore_tags %} {% block head_extra %} @@ -84,6 +84,16 @@

{% trans "What could happen if something goes wrong?" %}< + {% if product.tips_to_protect_yourself %} +
+
+

{% trans "Tips to protect yourself" %}

+ {{ product.tips_to_protect_yourself | richtext }} +
+
+ {% endif %} + +
diff --git a/source/images/buyers-guide/protect-tip-icon.svg b/source/images/buyers-guide/protect-tip-icon.svg new file mode 100644 index 0000000000..50cb5fdf84 --- /dev/null +++ b/source/images/buyers-guide/protect-tip-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/source/sass/buyers-guide/views/product.scss b/source/sass/buyers-guide/views/product.scss index 2dba2c12d1..4e2ee8315a 100644 --- a/source/sass/buyers-guide/views/product.scss +++ b/source/sass/buyers-guide/views/product.scss @@ -201,6 +201,45 @@ } } } + .tips-to-protect-yourself { + border: 1px solid $gray-20; + .tips { + h2 { + display: inline-block; + &:before { + content: ""; + display: inline-block; + width: 29px; + height: 27px; + background: url(../_images/buyers-guide/protect-tip-icon.svg) center / + contain no-repeat; + position: relative; + top: 4px; + margin-right: 0.5rem; + + @media (min-width: $pni-product-breakpoint-larger) { + margin-right: 1rem; + } + } + } + + .rich-text { + p { + display: list-item; + list-style-type: disc; + list-style-position: inside; + padding-left: 0.5em; + margin-bottom: 0em; + } + } + } + // Removing padding from container so div can sit slightly outwards from rest of content. + @media (min-width: $pni-product-breakpoint-larger) { + margin-right: -2em; + margin-left: -2em; + padding-left: 1em; + } + } .subheading-divider { padding: 0em 0.5em 0em 0.5em;