diff --git a/network-api/networkapi/wagtailpages/migrations/0041_productpage_time_researched.py b/network-api/networkapi/wagtailpages/migrations/0041_productpage_time_researched.py new file mode 100644 index 00000000000..1df505e5f96 --- /dev/null +++ b/network-api/networkapi/wagtailpages/migrations/0041_productpage_time_researched.py @@ -0,0 +1,18 @@ +# Generated by Django 3.1.11 on 2021-10-01 00:54 + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ('wagtailpages', '0040_auto_20210929_2116'), + ] + + operations = [ + migrations.AddField( + model_name='productpage', + name='time_researched', + field=models.PositiveIntegerField(default=0, help_text='How many hours were spent researching this product?'), + ), + ] diff --git a/network-api/networkapi/wagtailpages/pagemodels/products.py b/network-api/networkapi/wagtailpages/pagemodels/products.py index c26c97235f5..71208bdd9ce 100644 --- a/network-api/networkapi/wagtailpages/pagemodels/products.py +++ b/network-api/networkapi/wagtailpages/pagemodels/products.py @@ -428,6 +428,10 @@ class ProductPage(AirtableMixin, FoundationMetadataPageMixin, Page): help_text='Whether or not Mozilla would recommend this product. ' 'Will appear as a thumbs up/down/middle.', ) + time_researched = models.PositiveIntegerField( + help_text="How many hours were spent researching this product?", + default=0 + ) """ privacy_policy_links = Orderable, defined in ProductPagePrivacyPolicyLink @@ -563,6 +567,7 @@ def map_import_fields(cls): "Has privacy policy": "privacy_policy", "Privacy policy help text": "privacy_policy_helptext", "Mozilla Says": "mozilla_says", + "Time Researched ": "time_researched", } return mappings @@ -607,7 +612,9 @@ def get_export_fields(self): "Manages security help text": self.manage_vulnerabilities_helptext, "Has privacy policy": self.privacy_policy, "Privacy policy help text": self.privacy_policy_helptext, - "Mozilla Says": self.mozilla_says + "Mozilla Says": self.mozilla_says, + "Time Researched ": "time_researched", + } def get_status_for_airtable(self): @@ -658,7 +665,9 @@ def get_voting_json(self): FieldPanel('blurb'), ImageChooserPanel('image'), FieldPanel('worst_case'), - FieldPanel('mozilla_says') + FieldPanel('mozilla_says'), + FieldPanel('time_researched') + ], heading='General Product Details', classname='collapsible' @@ -784,6 +793,7 @@ def get_voting_json(self): SynchronizedField('privacy_policy'), TranslatableField('privacy_policy_helptext'), SynchronizedField('mozilla_says'), + SynchronizedField('time_researched'), ] @property diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html index be5732d3e32..84bcd7b0b4c 100644 --- a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html +++ b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html @@ -73,11 +73,7 @@

{{product.title}}

{% endif %} -
-

{% blocktrans with date=product.review_date|date:"DATE_FORMAT" context "Date format (e.g. Nov. 19, 2020)" %}Review date: {{ date }}{% endblocktrans %}

- | -

{% trans "Mozilla says" context "This string is followed by a thumb up, thumb down, or thumb on the side icon to summarize Mozilla’s review of the product" %}

-
+ {% include "fragments/research_details.html" with review_date=product.review_date time_researched=product.time_researched mozilla_says=product.mozilla_says %}

{{product.blurb}}

diff --git a/network-api/networkapi/wagtailpages/templates/fragments/research_details.html b/network-api/networkapi/wagtailpages/templates/fragments/research_details.html new file mode 100644 index 00000000000..f04489a0ae8 --- /dev/null +++ b/network-api/networkapi/wagtailpages/templates/fragments/research_details.html @@ -0,0 +1,23 @@ +{% load i18n localization %} + +{% comment %} + This is the section underneath the title of the products heading, where we display date and time spent researching, as well as creepiness level people have voted. +{% endcomment %} + +
+
+
+

{% blocktrans with date=review_date|date:"DATE_FORMAT" context "Date format (e.g. Nov. 19, 2020)" %}Review date: {{ date }}{% endblocktrans %}

+
+ | +
+ {% trans "Mozilla researched" context "This string is followed by a numerical value, to show the hours spent researching the product." %} {{ time_researched }} {% trans "hours" %} +
+
+ | +
+
+

{% trans "Mozilla says" context "This string is followed by a thumb up, thumb down, or thumb on the side icon to summarize Mozilla’s review of the product" %}

+
+
+
\ No newline at end of file diff --git a/source/images/buyers-guide/info-circle.svg b/source/images/buyers-guide/info-circle.svg new file mode 100644 index 00000000000..0713b2fe3fe --- /dev/null +++ b/source/images/buyers-guide/info-circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/sass/buyers-guide/views/product.scss b/source/sass/buyers-guide/views/product.scss index 588b8bbc67a..7928e480399 100644 --- a/source/sass/buyers-guide/views/product.scss +++ b/source/sass/buyers-guide/views/product.scss @@ -209,6 +209,19 @@ } } + .mozilla-researched { + &::after { + content: " "; + display: inline-block; + width: 1.5em; + height: 1.5em; + margin-left: 4px; + position: relative; + vertical-align: middle; + background: url(../_images/buyers-guide/info-circle.svg) no-repeat; + } + } + .mozilla-says { &::after { content: " "; diff --git a/tailwind.config.js b/tailwind.config.js index bdedf27930f..1b6039f995d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -53,6 +53,7 @@ module.exports = { }, // Renaming breakpoints temporary until we remove bootstrap usage screens: { + xsmall: "380px", small: "576px", medium: "768px", large: "992px",