7379 people voted

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

@@ -191,6 +191,28 @@ def get_votes(self):
         votes = [int(x) for x in self.vote_bins.split(",")]
         return votes
 
+    def get_most_voted(self):
+        votes = self.get_votes()
+        vote_breakdown = {k: v for (k, v) in enumerate(votes)}
+        highest = max(vote_breakdown, key=vote_breakdown.get)
+        label = self.get_vote_labels()[highest]
+
+        return {
+            "bin": highest,
+            "value": votes[highest],
+            "label": label[0],
+            "localized": label[1],
+            }
+
+    def get_vote_labels(self):
+        return [
+            ("Not creepy", gettext("Not creepy")),
+            ("A little creepy", gettext("A little creepy")),
+            ("Somewhat creepy", gettext("Somewhat creepy")),
+            ("Very creepy", gettext("Very creepy")),
+            ("Super creepy", gettext("Super creepy")),
+            ]
+
 
 class ProductPageCategory(TranslatableMixin, Orderable):
     product = ParentalKey(

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

@@ -73,7 +73,7 @@ <h1 class="h1-heading col-12">{{product.title}}</h1>
             </div>
           {% endif %}
         </div>
-        {% include "fragments/research_details.html" with review_date=product.review_date time_researched=product.time_researched mozilla_says=product.mozilla_says  %}
+        {% 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>
 
@@ -85,15 +85,16 @@ <h2 class="h3-heading">{% trans "What could happen if something goes wrong?" %}<
       </div>
 
       <div id="product-research" data-is-wagtail-page="true">
+      <div id="creepiness-vote">
         <div class="row">
           <div class="col-12">
             <div class="creep-vote-target mb-5 mt-3 mt-md-4 p-5" data-product-name="{{product.title}}" data-product-type="{{product.product_type}}">
               <input type="hidden" name="productID" value="{{ product.id }}">
               <input type="hidden" name="votes" value='{{ product.get_voting_json | safe }}'>
               {% csrf_token %}
             </div>
-
         </div>
+      </div>
         {% with tab_class="tw-bg-white tw-text-black tw-font-zilla tw-capitalize tw-text-3xl tw-py-2 tw-px-5 tw-flex tw-justify-center tw-items-center medium:tw-flex-1 tw-flex-shrink-0 tw-text-center tw-relative tw-cursor-pointer tw-ease-in tw-transform tw-duration-150 medium:tw-w-auto" %}
           <!-- Should probably be refactored into a wagtail template afterwards -->
           <div id="product-tab" class="tw-w-full tw-mx-4 tw-mb-4">
@@ -261,13 +262,9 @@ <h3 class="tw-mb-4 tw-font-zilla tw-text-2xl tw-leading-7">{% trans "What data d
           </div>
         {% endwith %}
 
+        {% if product.updates.count > 0 %}
         <hr class="pni-section-divider"/>
-
-        <div class="col-12">
-          {% if product.updates.count > 0 %}
-          <h3 class="h2-heading mb-4 mb-md-5">{% trans "News" %}</h3>
-          {% endif %}
-          {% if product.updates.count > 0 %}
+        <h3 id="news" class="h2-heading mb-3">{% trans "News" %}</h3>
           <div class="mb-5">
             {% for item in product.updates.all %}
             {% with update=item.update %}

network-api/networkapi/wagtailpages/templates/fragments/most_voted_rating.html

@@ -0,0 +1,8 @@
+{% load i18n %}
+
+<span class="body-small">
+    {% with vote_data=product.votes.get_most_voted %} 
+    <a class="body-small" href="#creepiness-vote">{% trans "People voted:" %}</a> 
+    <span class="people-voted {{ vote_data.label|slugify }}">{{ vote_data.localized }}</span> 
+    {% endwith %} 
+</span>

network-api/networkapi/wagtailpages/templates/fragments/research_details.html

@@ -4,13 +4,13 @@
  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 tw-flex-col medium:tw-flex-wrap large:tw-flex-row">
+<div class="col-12 tw-mt-5 tw-mb-3 tw-flex tw-flex-col medium:tw-flex-wrap large:tw-flex-row">
   <div class="tw-flex 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="tw-text-gray-20 body-small tw-hidden medium:tw-inline"> | </span>
-    <div class="d-flex pb-2 tw-flex-2 medium:tw-px-2">
+    <div class="d-flex pb-3 tw-flex-2 medium:tw-px-2">
       <span class="body-small">
         {% blocktrans count count=time_researched with link_attrs='class="body-small time-researched" href="/privacynotincluded/about/methodology"' trimmed %}
           <a {{ link_attrs }}>Mozilla researched</a> {{ time_researched }} hour
@@ -26,5 +26,9 @@
     <div class="d-flex 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>
+    <span class="tw-text-gray-20 body-small tw-hidden medium:tw-inline"> | </span>
+    <div class="d-flex medium:tw-pl-2 pr-0 ">
+    {% include "fragments/most_voted_rating.html"%}
+    </div>
   </div>
 </div>