From 5628c497746275acc020fb5b84ff59558478304c Mon Sep 17 00:00:00 2001 From: Daniel Miranda Date: Thu, 23 Sep 2021 19:13:22 -0700 Subject: [PATCH 01/10] tips to protect yourself using richtext field --- ...37_productpage_tips_to_protect_yourself.py | 19 ++++++++++++++ .../wagtailpages/pagemodels/products.py | 3 +++ .../templates/buyersguide/product_page.html | 9 ++++++- .../images/buyers-guide/protect-tip-icon.svg | 4 +++ source/sass/buyers-guide/views/product.scss | 26 +++++++++++++++++++ 5 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 network-api/networkapi/wagtailpages/migrations/0037_productpage_tips_to_protect_yourself.py create mode 100644 source/images/buyers-guide/protect-tip-icon.svg diff --git a/network-api/networkapi/wagtailpages/migrations/0037_productpage_tips_to_protect_yourself.py b/network-api/networkapi/wagtailpages/migrations/0037_productpage_tips_to_protect_yourself.py new file mode 100644 index 00000000000..796fca3b30b --- /dev/null +++ b/network-api/networkapi/wagtailpages/migrations/0037_productpage_tips_to_protect_yourself.py @@ -0,0 +1,19 @@ +# Generated by Django 3.1.11 on 2021-09-24 01:39 + +from django.db import migrations +import wagtail.core.fields + + +class Migration(migrations.Migration): + + dependencies = [ + ('wagtailpages', '0036_auto_20210917_0050'), + ] + + 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 b79b96523fd..a95dd8a45bf 100644 --- a/network-api/networkapi/wagtailpages/pagemodels/products.py +++ b/network-api/networkapi/wagtailpages/pagemodels/products.py @@ -23,6 +23,7 @@ from wagtail.search import index from wagtail.snippets.edit_handlers import SnippetChooserPanel from wagtail.snippets.models import register_snippet +from wagtail.core.fields import RichTextField from wagtail_localize.fields import SynchronizedField, TranslatableField from wagtail_airtable.mixins import AirtableMixin @@ -419,6 +420,7 @@ 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=['ul', 'bold', 'italic', 'link'], blank=True) """ privacy_policy_links = Orderable, defined in ProductPagePrivacyPolicyLink @@ -647,6 +649,7 @@ def get_voting_json(self): FieldPanel('blurb'), ImageChooserPanel('image'), FieldPanel('worst_case'), + FieldPanel('tips_to_protect_yourself'), ], heading='General Product Details', classname='collapsible' diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html index da0096546d9..d6e9cc05910 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 %} @@ -86,6 +86,13 @@

{% trans "What could happen if something goes wrong" %} +
+
+

{% trans "Tips to protect yourself" %}

+ {{ product.tips_to_protect_yourself | richtext}} +
+
+
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 00000000000..50cb5fdf84a --- /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 e4fb1286d7e..47cd0aaad4c 100644 --- a/source/sass/buyers-guide/views/product.scss +++ b/source/sass/buyers-guide/views/product.scss @@ -201,6 +201,28 @@ } } } + + .tips-to-protect { + 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; + } + } + } + } } .spy { @@ -475,3 +497,7 @@ min-width: 290px; background: $pni-product-image-background; } + +.tips-to-protect-yourself { + border: 1px solid $gray-20; +} From 9a2544a725430dc6ef77427e0aae718dc5cc9df3 Mon Sep 17 00:00:00 2001 From: Daniel Miranda Date: Wed, 6 Oct 2021 12:22:35 -0700 Subject: [PATCH 02/10] updated to use freetext field and convert p elements to behave like list items --- .../wagtailpages/pagemodels/products.py | 2 +- .../templates/buyersguide/product_page.html | 5 +- source/sass/buyers-guide/views/product.scss | 46 +++++++++++-------- 3 files changed, 32 insertions(+), 21 deletions(-) diff --git a/network-api/networkapi/wagtailpages/pagemodels/products.py b/network-api/networkapi/wagtailpages/pagemodels/products.py index a95dd8a45bf..7c5f6285c28 100644 --- a/network-api/networkapi/wagtailpages/pagemodels/products.py +++ b/network-api/networkapi/wagtailpages/pagemodels/products.py @@ -420,7 +420,7 @@ 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=['ul', 'bold', 'italic', 'link'], blank=True) + tips_to_protect_yourself = RichTextField(features=['bold', 'italic', 'link'], blank=True) """ privacy_policy_links = Orderable, defined in ProductPagePrivacyPolicyLink diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html index d6e9cc05910..9b51a82ff46 100644 --- a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html +++ b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html @@ -86,12 +86,15 @@

{% 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/sass/buyers-guide/views/product.scss b/source/sass/buyers-guide/views/product.scss index 47cd0aaad4c..812c4d88fae 100644 --- a/source/sass/buyers-guide/views/product.scss +++ b/source/sass/buyers-guide/views/product.scss @@ -201,24 +201,36 @@ } } } + .tips-to-protect-yourself { + border: 1px solid $gray-20; - .tips-to-protect { - h2 { - display: inline-block; - - &:before { - content: ""; + .tips { + h2 { 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; + &: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; + } + } + } - @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; } } } @@ -497,7 +509,3 @@ min-width: 290px; background: $pni-product-image-background; } - -.tips-to-protect-yourself { - border: 1px solid $gray-20; -} From b760bb219b01065d32ce0f616ad250a73ff34639 Mon Sep 17 00:00:00 2001 From: Daniel Miranda Date: Wed, 6 Oct 2021 12:47:20 -0700 Subject: [PATCH 03/10] removed redundant import of richtextfield --- network-api/networkapi/wagtailpages/pagemodels/products.py | 1 - 1 file changed, 1 deletion(-) diff --git a/network-api/networkapi/wagtailpages/pagemodels/products.py b/network-api/networkapi/wagtailpages/pagemodels/products.py index c939943a039..e995ddc7287 100644 --- a/network-api/networkapi/wagtailpages/pagemodels/products.py +++ b/network-api/networkapi/wagtailpages/pagemodels/products.py @@ -25,7 +25,6 @@ from wagtail.search import index from wagtail.snippets.edit_handlers import SnippetChooserPanel from wagtail.snippets.models import register_snippet -from wagtail.core.fields import RichTextField from wagtail_localize.fields import SynchronizedField, TranslatableField from wagtail_airtable.mixins import AirtableMixin From a8dc44cf4bdef24826a909f0756f48be7be9b835 Mon Sep 17 00:00:00 2001 From: Pomax Date: Wed, 6 Oct 2021 16:30:19 -0700 Subject: [PATCH 04/10] Update network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html --- .../wagtailpages/templates/buyersguide/product_page.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html index 97daf5527fd..fb27d78d3fb 100644 --- a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html +++ b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html @@ -92,7 +92,7 @@

{% trans "What could happen if something goes wrong" %}

{% trans "Tips to protect yourself" %}

- {{ product.tips_to_protect_yourself | richtext}} + {{ product.tips_to_protect_yourself | richtext }}

{% endif %} From 01462f8bdf6867d4d8a59d62efbdf7b30e40a67e Mon Sep 17 00:00:00 2001 From: Daniel Miranda Date: Thu, 7 Oct 2021 13:07:04 -0700 Subject: [PATCH 05/10] implemented feedback --- ...elf.py => 0042_productpage_tips_to_protect_yourself.py} | 4 ++-- network-api/networkapi/wagtailpages/pagemodels/products.py | 7 +++++-- .../wagtailpages/templates/buyersguide/product_page.html | 4 ++-- 3 files changed, 9 insertions(+), 6 deletions(-) rename network-api/networkapi/wagtailpages/migrations/{0041_productpage_tips_to_protect_yourself.py => 0042_productpage_tips_to_protect_yourself.py} (75%) diff --git a/network-api/networkapi/wagtailpages/migrations/0041_productpage_tips_to_protect_yourself.py b/network-api/networkapi/wagtailpages/migrations/0042_productpage_tips_to_protect_yourself.py similarity index 75% rename from network-api/networkapi/wagtailpages/migrations/0041_productpage_tips_to_protect_yourself.py rename to network-api/networkapi/wagtailpages/migrations/0042_productpage_tips_to_protect_yourself.py index 98a7561585b..cc581a1df5b 100644 --- a/network-api/networkapi/wagtailpages/migrations/0041_productpage_tips_to_protect_yourself.py +++ b/network-api/networkapi/wagtailpages/migrations/0042_productpage_tips_to_protect_yourself.py @@ -1,4 +1,4 @@ -# Generated by Django 3.1.11 on 2021-10-06 19:24 +# Generated by Django 3.1.11 on 2021-10-07 18:28 from django.db import migrations import wagtail.core.fields @@ -7,7 +7,7 @@ class Migration(migrations.Migration): dependencies = [ - ('wagtailpages', '0040_auto_20210929_2116'), + ('wagtailpages', '0041_productpage_time_researched'), ] operations = [ diff --git a/network-api/networkapi/wagtailpages/pagemodels/products.py b/network-api/networkapi/wagtailpages/pagemodels/products.py index 39983cb8a98..f3dbba5dab2 100644 --- a/network-api/networkapi/wagtailpages/pagemodels/products.py +++ b/network-api/networkapi/wagtailpages/pagemodels/products.py @@ -422,7 +422,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) + tips_to_protect_yourself = RichTextField( + features=['bold', 'italic', 'link'], + blank=True + ) mozilla_says = models.BooleanField( null=True, blank=True, @@ -667,7 +670,7 @@ def get_voting_json(self): ImageChooserPanel('image'), FieldPanel('worst_case'), FieldPanel('tips_to_protect_yourself'), - FieldPanel('mozilla_says') + FieldPanel('mozilla_says'), FieldPanel('time_researched') ], heading='General Product Details', diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html index 71d3878d8e5..d67596a9be0 100644 --- a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html +++ b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html @@ -85,8 +85,8 @@

{% 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 }}
From c9ae62e08bbe629c27ca0eed78118df2d8515644 Mon Sep 17 00:00:00 2001 From: Daniel Miranda Date: Thu, 7 Oct 2021 13:48:01 -0700 Subject: [PATCH 06/10] implemented feedback --- network-api/networkapi/wagtailpages/pagemodels/products.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/network-api/networkapi/wagtailpages/pagemodels/products.py b/network-api/networkapi/wagtailpages/pagemodels/products.py index f3dbba5dab2..f4f1cf2d8a5 100644 --- a/network-api/networkapi/wagtailpages/pagemodels/products.py +++ b/network-api/networkapi/wagtailpages/pagemodels/products.py @@ -423,7 +423,7 @@ class ProductPage(AirtableMixin, FoundationMetadataPageMixin, Page): blank=True, ) tips_to_protect_yourself = RichTextField( - features=['bold', 'italic', 'link'], + features=['bold', 'italic', 'link'], blank=True ) mozilla_says = models.BooleanField( From 1105ba49ee2bfad6de80be7c567fbe883a703bea Mon Sep 17 00:00:00 2001 From: Daniel Miranda Date: Thu, 7 Oct 2021 14:10:04 -0700 Subject: [PATCH 07/10] implemented design feedback --- source/sass/buyers-guide/views/product.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/source/sass/buyers-guide/views/product.scss b/source/sass/buyers-guide/views/product.scss index 685c68ae08d..61d0295ac52 100644 --- a/source/sass/buyers-guide/views/product.scss +++ b/source/sass/buyers-guide/views/product.scss @@ -234,6 +234,10 @@ } } } + @media (min-width: $pni-product-breakpoint-larger) { + margin-right: -30px; + margin-left: -30px; + } } .subheading-divider { From a21aaaf7a771593950280febd27d9fa1aa0a36bf Mon Sep 17 00:00:00 2001 From: Daniel Miranda Date: Thu, 7 Oct 2021 14:40:49 -0700 Subject: [PATCH 08/10] added design feedback --- source/sass/buyers-guide/views/product.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/source/sass/buyers-guide/views/product.scss b/source/sass/buyers-guide/views/product.scss index 61d0295ac52..8b887d3c941 100644 --- a/source/sass/buyers-guide/views/product.scss +++ b/source/sass/buyers-guide/views/product.scss @@ -203,7 +203,6 @@ } .tips-to-protect-yourself { border: 1px solid $gray-20; - .tips { h2 { display: inline-block; @@ -234,9 +233,11 @@ } } } + // Removing padding from container so div can sit slightly outwards from rest of content. @media (min-width: $pni-product-breakpoint-larger) { - margin-right: -30px; - margin-left: -30px; + margin-right: -2em; + margin-left: -2em; + padding-left: 1em; } } From bb90d0e410a8a8501beba4adf1b8d3550414c0c8 Mon Sep 17 00:00:00 2001 From: Daniel Miranda Date: Thu, 7 Oct 2021 14:50:52 -0700 Subject: [PATCH 09/10] updating padding for tips to 1.5rem --- .../wagtailpages/templates/buyersguide/product_page.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html index e45621b31aa..5c36ff0526e 100644 --- a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html +++ b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html @@ -86,7 +86,7 @@

{% 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 }}
From ba4972dc3e8ba75391b510e480b1193b139ea465 Mon Sep 17 00:00:00 2001 From: Daniel Miranda Date: Fri, 8 Oct 2021 11:09:24 -0700 Subject: [PATCH 10/10] Update products.py --- network-api/networkapi/wagtailpages/pagemodels/products.py | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/network-api/networkapi/wagtailpages/pagemodels/products.py b/network-api/networkapi/wagtailpages/pagemodels/products.py index ca462899b37..ae1bf16bdf3 100644 --- a/network-api/networkapi/wagtailpages/pagemodels/products.py +++ b/network-api/networkapi/wagtailpages/pagemodels/products.py @@ -639,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): @@ -820,6 +820,7 @@ def get_voting_json(self): TranslatableField('privacy_policy_helptext'), SynchronizedField('mozilla_says'), SynchronizedField('time_researched'), + TranslatableField('tips_to_protect_yourself') ] @property