[duplicate]: Mozilla researched 7377

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?'),
+        ),
+    ]

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

network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html

@@ -73,11 +73,7 @@ <h1 class="h1-heading col-12">{{product.title}}</h1>
             </div>
           {% endif %}
         </div>
-        <div class="col-12 mt-3 d-flex flex-column flex-md-row">
-          <p class="body-small">{% blocktrans with date=product.review_date|date:"DATE_FORMAT" context "Date format (e.g. Nov. 19, 2020)" %}Review date: {{ date }}{% endblocktrans %}</p>
-          <span class="body-small subheading-divider"> | </span>
-          <p class="body-small mozilla-says {% if product.mozilla_says %} thumb-up {% elif product.mozilla_says == False %} thumb-down {% else %} thumb-side {% endif %}"> {% 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" %} </p>  
-        </div>
+        {% include "fragments/research_details.html" with review_date=product.review_date time_researched=product.time_researched mozilla_says=product.mozilla_says  %}
         <div class="col-12"><p class="body mb-0">{{product.blurb}}</p></div>
       </div>
 

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 %}
+
+<div class="col-12 mt-3 tw-flex xsmall:tw-flex-col medium:tw-flex-wrap large:tw-flex-row">
+  <div class="tw-flex xsmall:tw-flex-col medium:tw-flex-2  medium:tw-flex-row">
+    <div class="pr-2 pl-0 tw-flex-2">
+      <p class="body-small date-reviewed">{% blocktrans with date=review_date|date:"DATE_FORMAT" context "Date format (e.g. Nov. 19, 2020)" %}Review date: {{ date }}{% endblocktrans %}</p>
+    </div>
+    <span class="body-small xsmall:tw-hidden medium:tw-inline"> | </span>
+    <div class="mozilla-researched d-flex pb-2 tw-flex-2 medium:tw-px-2 ">
+      <a class="body-small time-researched" href="/privacynotincluded/about/methodology"> {% trans "Mozilla researched" context "This string is followed by a numerical value, to show the hours spent researching the product." %} </a>  <span class="body-small pl-1"> {{ time_researched }} {% trans "hours" %}</span>
+    </div>
+  </div>
+  <span class="body-small xsmall:tw-hidden large:tw-inline"> | </span>
+  <div class="tw-flex xsmall:tw-flex-col medium:tw-flex-2 medium:tw-flex-row">
+    <div class="d-flex xsmall:tw-pr-2 large:tw-px-2">
+      <p class="body-small mozilla-says {% if mozilla_says %} thumb-up {% elif mozilla_says == False %} thumb-down {% else %} thumb-side {% endif %}"> {% 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" %} </p>  
+    </div>
+  </div>
+</div>

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: " ";

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",