[duplicate] 7378 mozilla says section 2

network-api/networkapi/wagtailpages/migrations/0037_productpage_mozilla_says.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.1.11 on 2021-09-21 22:02
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailpages', '0036_auto_20210917_0050'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='productpage',
+            name='mozilla_says',
+            field=models.BooleanField(blank=True, help_text='Whether or not Mozilla would recommend this product. Will appear as a thumbs up/down/middle.', null=True),
+        ),
+    ]

network-api/networkapi/wagtailpages/pagemodels/products.py

@@ -419,6 +419,12 @@ class ProductPage(AirtableMixin, FoundationMetadataPageMixin, Page):
         help_text="What's the worst thing that could happen by using this product?",
         blank=True,
     )
+    mozilla_says = models.BooleanField(
+        null=True,
+        blank=True,
+        help_text='Whether or not Mozilla would recommend this product. '
+                  'Will appear as a thumbs up/down/middle.',
+    )
 
     """
     privacy_policy_links = Orderable, defined in ProductPagePrivacyPolicyLink
@@ -553,6 +559,7 @@ def map_import_fields(cls):
             "Manages security help text": "manage_vulnerabilities_helptext",
             "Has privacy policy": "privacy_policy",
             "Privacy policy help text": "privacy_policy_helptext",
+            "Mozilla Says": "mozilla_says",
         }
         return mappings
 
@@ -597,6 +604,7 @@ 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
         }
 
     def get_status_for_airtable(self):
@@ -647,6 +655,7 @@ def get_voting_json(self):
                 FieldPanel('blurb'),
                 ImageChooserPanel('image'),
                 FieldPanel('worst_case'),
+                FieldPanel('mozilla_says')
             ],
             heading='General Product Details',
             classname='collapsible'
@@ -771,6 +780,7 @@ def get_voting_json(self):
         TranslatableField('manage_vulnerabilities_helptext'),
         SynchronizedField('privacy_policy'),
         TranslatableField('privacy_policy_helptext'),
+        SynchronizedField('mozilla_says'),
     ]
 
     @property

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

@@ -73,8 +73,10 @@ <h1 class="h1-heading col-12">{{product.title}}</h1>
             </div>
           {% endif %}
         </div>
-        <div class="col-12 mt-3">
+        <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>
         <div class="col-12"><p class="body mb-0">{{product.blurb}}</p></div>
       </div>

source/sass/buyers-guide/views/product.scss

@@ -201,6 +201,37 @@
       }
     }
   }
+
+  .subheading-divider {
+    padding: 0em 0.5em 0em 0.5em;
+    @media (max-width: $bp-md) {
+      display: none;
+    }
+  }
+
+  .mozilla-says {
+    &::after {
+      content: " ";
+      display: inline-block;
+      width: 1.5em;
+      height: 1.5em;
+      margin-left: 4px;
+      position: relative;
+      vertical-align: middle;
+    }
+  }
+
+  .thumb-down::after {
+    background: url(../_images/buyers-guide/mozilla-says/thumb-down.svg)
+      no-repeat;
+  }
+  .thumb-up::after {
+    background: url(../_images/buyers-guide/mozilla-says/thumb-up.svg) no-repeat;
+  }
+  .thumb-side::after {
+    background: url(../_images/buyers-guide/mozilla-says/thumb-side.svg)
+      no-repeat;
+  }
 }
 
 .spy {