diff --git a/network-api/networkapi/wagtailpages/pagemodels/products.py b/network-api/networkapi/wagtailpages/pagemodels/products.py index 71208bdd9ce..b76028e6834 100644 --- a/network-api/networkapi/wagtailpages/pagemodels/products.py +++ b/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( diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html index 8fd79f6ab98..9fa87e26f30 100644 --- a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html +++ b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html @@ -73,7 +73,7 @@

{{product.title}}

{% endif %} - {% 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 %}

{{product.blurb}}

@@ -85,6 +85,7 @@

{% trans "What could happen if something goes wrong?" %}<
+
@@ -92,8 +93,8 @@

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

-
+
{% 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" %}
@@ -261,13 +262,9 @@

{% trans "What data d

{% endwith %} + {% if product.updates.count > 0 %}
- -
- {% if product.updates.count > 0 %} -

{% trans "News" %}

- {% endif %} - {% if product.updates.count > 0 %} +

{% trans "News" %}

{% for item in product.updates.all %} {% with update=item.update %} diff --git a/network-api/networkapi/wagtailpages/templates/fragments/most_voted_rating.html b/network-api/networkapi/wagtailpages/templates/fragments/most_voted_rating.html new file mode 100644 index 00000000000..3180e4b5197 --- /dev/null +++ b/network-api/networkapi/wagtailpages/templates/fragments/most_voted_rating.html @@ -0,0 +1,8 @@ +{% load i18n %} + + + {% with vote_data=product.votes.get_most_voted %} + {% trans "People voted:" %} + {{ vote_data.localized }} + {% endwith %} + diff --git a/network-api/networkapi/wagtailpages/templates/fragments/research_details.html b/network-api/networkapi/wagtailpages/templates/fragments/research_details.html index e4d13f461fd..122d558bc32 100644 --- a/network-api/networkapi/wagtailpages/templates/fragments/research_details.html +++ b/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 %} -
+

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

| -
+
{% blocktrans count count=time_researched with link_attrs='class="body-small time-researched" href="/privacynotincluded/about/methodology"' trimmed %} Mozilla researched {{ time_researched }} hour @@ -26,5 +26,9 @@

{% 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/most_voted_rating.html"%} +
diff --git a/source/images/buyers-guide/faces/a-little-creepy-face.svg b/source/images/buyers-guide/faces/a-little-creepy-face.svg new file mode 100644 index 00000000000..262e077711e --- /dev/null +++ b/source/images/buyers-guide/faces/a-little-creepy-face.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/source/images/buyers-guide/faces/not-creepy-face.svg b/source/images/buyers-guide/faces/not-creepy-face.svg new file mode 100644 index 00000000000..7884d1d034d --- /dev/null +++ b/source/images/buyers-guide/faces/not-creepy-face.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/source/images/buyers-guide/faces/somewhat-creepy-face.svg b/source/images/buyers-guide/faces/somewhat-creepy-face.svg new file mode 100644 index 00000000000..c4fd78e0fe4 --- /dev/null +++ b/source/images/buyers-guide/faces/somewhat-creepy-face.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/source/images/buyers-guide/faces/super-creepy-face.svg b/source/images/buyers-guide/faces/super-creepy-face.svg new file mode 100644 index 00000000000..d833e054b02 --- /dev/null +++ b/source/images/buyers-guide/faces/super-creepy-face.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/source/images/buyers-guide/faces/very-creepy-face.svg b/source/images/buyers-guide/faces/very-creepy-face.svg new file mode 100644 index 00000000000..5f542583518 --- /dev/null +++ b/source/images/buyers-guide/faces/very-creepy-face.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/source/sass/buyers-guide/views/product.scss b/source/sass/buyers-guide/views/product.scss index 3e6df842382..2e942420229 100644 --- a/source/sass/buyers-guide/views/product.scss +++ b/source/sass/buyers-guide/views/product.scss @@ -209,31 +209,25 @@ } } - .mozilla-researched-icon { + .mozilla-researched-icon, + .mozilla-says, + .people-voted { &::after { - content: " "; + 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: " "; - display: inline-block; - width: 1.5em; - height: 1.5em; - margin-left: 4px; - position: relative; - vertical-align: middle; - } + .mozilla-researched-icon::after { + background: url(../_images/buyers-guide/info-circle.svg) no-repeat; } + // Thumb Icons .thumb-down::after { background: url(../_images/buyers-guide/mozilla-says/thumb-down.svg) no-repeat; @@ -245,6 +239,26 @@ background: url(../_images/buyers-guide/mozilla-says/thumb-side.svg) no-repeat; } + // "People Voted" Face Icons + .not-creepy::after { + background: url(../_images/buyers-guide/faces/not-creepy-face.svg) no-repeat; + } + .a-little-creepy::after { + background: url(../_images/buyers-guide/faces/a-little-creepy-face.svg) + no-repeat; + } + .somewhat-creepy::after { + background: url(../_images/buyers-guide/faces/somewhat-creepy-face.svg) + no-repeat; + } + .very-creepy::after { + background: url(../_images/buyers-guide/faces/very-creepy-face.svg) + no-repeat; + } + .super-creepy::after { + background: url(../_images/buyers-guide/faces/super-creepy-face.svg) + no-repeat; + } } .spy {