From 4c3d777fafda7fcb382dba989cf182d1e6ec2a9a Mon Sep 17 00:00:00 2001 From: Simon Date: Thu, 7 Oct 2021 00:23:18 -0700 Subject: [PATCH] 7393 - Update content width Fixed padding revision Changes Updates --- .../templates/buyersguide/bg_base.html | 2 +- .../templates/buyersguide/product_page.html | 549 +++++++++--------- source/js/buyers-guide/product-tab.js | 4 + source/sass/buyers-guide/views/product.scss | 2 +- 4 files changed, 283 insertions(+), 274 deletions(-) diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/bg_base.html b/network-api/networkapi/wagtailpages/templates/buyersguide/bg_base.html index a69a49a7cb0..176513f76c5 100644 --- a/network-api/networkapi/wagtailpages/templates/buyersguide/bg_base.html +++ b/network-api/networkapi/wagtailpages/templates/buyersguide/bg_base.html @@ -27,8 +27,8 @@ {% block stylesheets %} - {% if debug_flag %}{% endif %} + {% if debug_flag %}{% endif %} {% endblock %} diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html index 8fd79f6ab98..428dc4d73fd 100644 --- a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html +++ b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html @@ -22,323 +22,328 @@ {% block body_id %}product-page{% endblock %} {% block guts %} -
-
-
-
- {{product.title}} +
+
+
+
+ {{product.title}} +
-
-{% with section_class="col-12 col-lg-10 offset-lg-1" %} -
-
- - {% if product.privacy_ding %} -
-

{% blocktrans %}Warning: *privacy not included with this product{% endblocktrans %}

-
- {% endif %} + {% with section_class="large:tw-w-8/12 tw-w-full tw-mx-auto tw-relative" %} +
+
-
-
-
- {% for cat in product.product_categories.all %} - {% with category=cat.category %} - {% localizedroutablepageurl home_page 'category-view' category.slug as cat_url %} - - {{category.localized.name}} - - {% endwith %} - {% endfor %} + {% if product.privacy_ding %} +
+

{% blocktrans %}Warning: *privacy not included with this product{% endblocktrans %}

-

{{product.title}}

-
- {{product.company}} - {% if product.uses_wifi or product.uses_bluetooth %} -
- {% if product.uses_wifi %} - {% trans "Wi-Fi" %} - {% endif %} - {% if product.uses_bluetooth %} - {% trans "Bluetooth" %} + {% endif %} + +
+
+
+ {% for cat in product.product_categories.all %} + {% with category=cat.category %} + {% localizedroutablepageurl home_page 'category-view' category.slug as cat_url %} + + {{category.localized.name}} + + {% endwith %} + {% endfor %} +
+

{{product.title}}

+
+ {{product.company}} + {% if product.uses_wifi or product.uses_bluetooth %} +
+ {% if product.uses_wifi %} + {% trans "Wi-Fi" %} + {% endif %} + {% if product.uses_bluetooth %} + {% trans "Bluetooth" %} + {% endif %} +
{% endif %}
- {% endif %} -
- {% include "fragments/research_details.html" with review_date=product.review_date time_researched=product.time_researched mozilla_says=product.mozilla_says %} -

{{product.blurb}}

-
- -
-
-

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

-

{{product.worst_case}}

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

{{product.blurb}}

+
-
-
-
-
- - - {% csrf_token %} +
+
+

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

+

{{product.worst_case}}

+
-
- {% 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" %} - -
-
- - mobile - - {% trans "Privacy" %} - {% if product.data_collection_policy_is_bad or product.data_control_policy_is_bad or product.track_record_is_bad %} - warning - {% endif %} - - - {% trans "Security" %} - {% if product.show_ding_for_minimum_security_standards %} - warning - {% endif %} - - - {% trans "A.I." %} - +
+
+
+
+ + + {% csrf_token %} +
+
-
-
-
- {% if product.product_type == 'general' %} -
-

{% trans "Can it snoop on me?" %}

-
- {% trans "Camera" as camera %} - {% trans "Microphone" as microphone %} - {% trans "Tracks Location" as tracks_location %} - -
- {% include "fragments/it_uses.html" with title=camera device=product.camera_device app=product.camera_app %} -
-
- {% include "fragments/it_uses.html" with title=microphone device=product.microphone_device app=product.microphone_app %} -
-
- {% include "fragments/it_uses.html" with title=tracks_location device=product.location_device app=product.location_app %} + {% 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" %} + +
+
+ + mobile + + {% trans "Privacy" %} + {% if product.data_collection_policy_is_bad or product.data_control_policy_is_bad or product.track_record_is_bad %} + warning + {% endif %} + + + {% trans "Security" %} + {% if product.show_ding_for_minimum_security_standards %} + warning + {% endif %} + + + {% trans "A.I." %} + +
+
+
+
+ {% if product.product_type == 'general' %} +
+

{% trans "Can it snoop on me?" %}

+
+ {% trans "Camera" as camera %} + {% trans "Microphone" as microphone %} + {% trans "Tracks Location" as tracks_location %} + +
+ {% include "fragments/it_uses.html" with title=camera device=product.camera_device app=product.camera_app %} +
+
+ {% include "fragments/it_uses.html" with title=microphone device=product.microphone_device app=product.microphone_app %} +
+
+ {% include "fragments/it_uses.html" with title=tracks_location device=product.location_device app=product.location_app %} +
+
+
+ {% endif %} + +
+

{% trans "What can be used to sign up?" %}

+ +
+ {% trans "Email" as email %} + {% trans "Phone" as phone %} + {% trans "Third party account" as third_party_account %} + +
+ {% include "fragments/signup_requirement.html" with title=email value=product.signup_requires_email %} +
+
+ {% include "fragments/signup_requirement.html" with title=phone value=product.signup_requires_phone %} +
+
+ {% include "fragments/signup_requirement.html" with title=third_party_account value=product.signup_requires_third_party_account %} +
-
-
- {% endif %} -
-

{% trans "What can be used to sign up?" %}

+ {% if product.signup_requirement_explanation %} +

{{product.signup_requirement_explanation}}

+ {% endif %} +
+ +
+

{% trans "What data does the company collect?" %}

+ +
+ {% trans "Personal" as personal_data_collected %} + {% trans "Biometric" as biometric_data_collected %} + {% trans "Social" as social_data_collected %} + +
+ {% include "fragments/signup_requirement.html" with title=personal_data_collected value=product.personal_data_collected %} +
+
+ {% include "fragments/signup_requirement.html" with title=biometric_data_collected value=product.biometric_data_collected %} +
+
+ {% include "fragments/signup_requirement.html" with title=social_data_collected value=product.social_data_collected %} +
+
+
-
- {% trans "Email" as email %} - {% trans "Phone" as phone %} - {% trans "Third party account" as third_party_account %} + {% trans "How does the company use this data?" as how_does_it_use_data_collected %} + {% include "fragments/product_criterion.html" with label=how_does_it_use_data_collected value=product.how_does_it_use_data_collected ding=product.data_collection_policy_is_bad %} -
- {% include "fragments/signup_requirement.html" with title=email value=product.signup_requires_email %} -
-
- {% include "fragments/signup_requirement.html" with title=phone value=product.signup_requires_phone %} -
-
- {% include "fragments/signup_requirement.html" with title=third_party_account value=product.signup_requires_third_party_account %} -
-
+ {% if product.product_type == 'general' %} - {% if product.signup_requirement_explanation %} -

{{product.signup_requirement_explanation}}

- {% endif %} - + {% trans "How can you control your data?" as how_can_you_control_your_data %} + {% include "fragments/product_criterion.html" with label=how_can_you_control_your_data value=product.how_can_you_control_your_data ding=product.data_control_policy_is_bad %} -
-

{% trans "What data does the company collect?" %}

+ {% trans "What is the company’s known track record of protecting users’ data?" as company_track_record_label %} + {% include "fragments/product_criterion.html" with label=company_track_record_label value=product.company_track_record|track_record help=product.track_record_details ding=product.track_record_is_bad %} -
- {% trans "Personal" as personal_data_collected %} - {% trans "Biometric" as biometric_data_collected %} - {% trans "Social" as social_data_collected %} + {% trans "Can this product be used offline?" as offline_capable %} + {% include "fragments/product_criterion.html" with label=offline_capable value=product.offline_capable help=product.offline_use_description %} + + {% endif %} -
- {% include "fragments/signup_requirement.html" with title=personal_data_collected value=product.personal_data_collected %} -
-
- {% include "fragments/signup_requirement.html" with title=biometric_data_collected value=product.biometric_data_collected %} -
-
- {% include "fragments/signup_requirement.html" with title=social_data_collected value=product.social_data_collected %} -
+ {% if product.product_type == 'general' %} + {% trans "User friendly privacy information?" as user_friendly_privacy_policy %} + {% include "fragments/product_criterion.html" with label=user_friendly_privacy_policy value=product.user_friendly_privacy_policy|extended_yes_no help=product.user_friendly_privacy_policy_helptext %} + {% endif %}
-
- - {% trans "How does the company use this data?" as how_does_it_use_data_collected %} - {% include "fragments/product_criterion.html" with label=how_does_it_use_data_collected value=product.how_does_it_use_data_collected ding=product.data_collection_policy_is_bad %} - {% if product.product_type == 'general' %} +
+ {% localizedroutablepageurl home_page 'min-security-view' as min_sec_url %} + {% blocktrans with url=min_sec_url asvar minimum_security_standards trimmed %} + Does this product meet our Minimum Security Standards? + {% endblocktrans %} + {% include "fragments/product_criterion.html" with show_value_as_symbol=False value=product.meets_minimum_security_standards|yes_no help="" label=minimum_security_standards|safe ding=product.show_ding_for_minimum_security_standards %} + + {% trans "Encryption" as encryption %} + {% trans "Security updates" as security_updates %} + {% trans "Strong password" as strong_password %} + {% trans "Manages vulnerabilities" as manages_vulnerabilities %} + {% trans "Privacy policy" as privacy_policy %} + + {% include "fragments/product_criterion.html" with show_value_as_symbol=False value=product.uses_encryption help=product.uses_encryption_helptext label=encryption %} + {% include "fragments/product_criterion.html" with show_value_as_symbol=False value=product.strong_password help=product.strong_password_helptext label=strong_password %} + {% include "fragments/product_criterion.html" with show_value_as_symbol=False value=product.security_updates help=product.security_updates_helptext label=security_updates %} + {% include "fragments/product_criterion.html" with show_value_as_symbol=False value=product.manage_vulnerabilities help=product.manage_vulnerabilities_helptext label=manages_vulnerabilities %} + {% include "fragments/product_criterion.html" with show_value_as_symbol=False value=product.privacy_policy help=product.privacy_policy_helptext label=privacy_policy %} +
- {% trans "How can you control your data?" as how_can_you_control_your_data %} - {% include "fragments/product_criterion.html" with label=how_can_you_control_your_data value=product.how_can_you_control_your_data ding=product.data_control_policy_is_bad %} +
+ {% if product.product_type == 'general' %} +
+ {% with product.uses_ai|extended_yes_no as uses_ai %} + {% trans "Does the product use AI?" as uses_ai_label %} + {% include "fragments/product_criterion.html" with label=uses_ai_label value=uses_ai %} - {% trans "What is the company’s known track record of protecting users’ data?" as company_track_record_label %} - {% include "fragments/product_criterion.html" with label=company_track_record_label value=product.company_track_record|track_record help=product.track_record_details ding=product.track_record_is_bad %} + {% if uses_ai != "No" %} + {% trans "Does the AI use your personal data to make decisions about you?" as ai_uses_personal_data %} + {% include "fragments/product_criterion.html" with label=ai_uses_personal_data value=product.ai_uses_personal_data|extended_yes_no %} - {% trans "Can this product be used offline?" as offline_capable %} - {% include "fragments/product_criterion.html" with label=offline_capable value=product.offline_capable help=product.offline_use_description %} - - {% endif %} + {% trans "Does the company allow users to see how the AI works?" as ai_is_transparent %} + {% include "fragments/product_criterion.html" with label=ai_is_transparent value=product.ai_is_transparent|extended_yes_no %} - {% if product.product_type == 'general' %} - {% trans "User friendly privacy information?" as user_friendly_privacy_policy %} - {% include "fragments/product_criterion.html" with label=user_friendly_privacy_policy value=product.user_friendly_privacy_policy|extended_yes_no help=product.user_friendly_privacy_policy_helptext %} - {% endif %} -
- -
- {% localizedroutablepageurl home_page 'min-security-view' as min_sec_url %} - {% blocktrans with url=min_sec_url asvar minimum_security_standards trimmed %} - Does this product meet our Minimum Security Standards? - {% endblocktrans %} - {% include "fragments/product_criterion.html" with show_value_as_symbol=False value=product.meets_minimum_security_standards|yes_no help="" label=minimum_security_standards|safe ding=product.show_ding_for_minimum_security_standards %} - - {% trans "Encryption" as encryption %} - {% trans "Security updates" as security_updates %} - {% trans "Strong password" as strong_password %} - {% trans "Manages vulnerabilities" as manages_vulnerabilities %} - {% trans "Privacy policy" as privacy_policy %} - - {% include "fragments/product_criterion.html" with show_value_as_symbol=False value=product.uses_encryption help=product.uses_encryption_helptext label=encryption %} - {% include "fragments/product_criterion.html" with show_value_as_symbol=False value=product.strong_password help=product.strong_password_helptext label=strong_password %} - {% include "fragments/product_criterion.html" with show_value_as_symbol=False value=product.security_updates help=product.security_updates_helptext label=security_updates %} - {% include "fragments/product_criterion.html" with show_value_as_symbol=False value=product.manage_vulnerabilities help=product.manage_vulnerabilities_helptext label=manages_vulnerabilities %} - {% include "fragments/product_criterion.html" with show_value_as_symbol=False value=product.privacy_policy help=product.privacy_policy_helptext label=privacy_policy %} +

{{product.ai_helptext}}

+ {% endif %} + {% endwith %} + + {% endif %} +
+
+ +
+ {% endwith %} -
- {% if product.product_type == 'general' %} -
- {% with product.uses_ai|extended_yes_no as uses_ai %} - {% trans "Does the product use AI?" as uses_ai_label %} - {% include "fragments/product_criterion.html" with label=uses_ai_label value=uses_ai %} - - {% if uses_ai != "No" %} - {% trans "Does the AI use your personal data to make decisions about you?" as ai_uses_personal_data %} - {% include "fragments/product_criterion.html" with label=ai_uses_personal_data value=product.ai_uses_personal_data|extended_yes_no %} - - {% trans "Does the company allow users to see how the AI works?" as ai_is_transparent %} - {% include "fragments/product_criterion.html" with label=ai_is_transparent value=product.ai_is_transparent|extended_yes_no %} +
-

{{product.ai_helptext}}

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

{% trans "News" %}

+ {% endif %} + {% if product.updates.count > 0 %} +
+ {% for item in product.updates.all %} + {% with update=item.update %} +
+ {{update.title}} +
{{update.author}}
+
{{update.snippet}}
+
+ {% endwith %} + {% endfor %} +
{% endif %}
- -
- {% endwith %} - -
- -
- {% if product.updates.count > 0 %} -

{% trans "News" %}

- {% endif %} - {% if product.updates.count > 0 %} -
- {% for item in product.updates.all %} - {% with update=item.update %} -
- {{update.title}} -
{{update.author}}
-
{{update.snippet}}
-
- {% endwith %} - {% endfor %} -
- {% endif %} -
-
- -
-

{% trans "Related products" %}

-
- {% for related_product_page in product.related_product_pages.all %} - {% with related_product=related_product_page.related_product.localized %} -
- -
- {% image related_product.image width-600 as img %} - {{related_product.title}} +
+ +
+
+

{% trans "Related products" %}

+
+ {% for related_product_page in product.related_product_pages.all %} + {% with related_product=related_product_page.related_product.localized %} +
+ +
+ {% image related_product.image width-600 as img %} + {{related_product.title}} +
+

{{related_product.company}}

+

{{related_product.title}}

+ + + {% include "fragments/privacy_ding.html" with product=related_product %} + {% include "fragments/adult_content_badge.html" with product=related_product %} +
+ {% endwith %} + {% endfor %}
-

{{related_product.company}}

-

{{related_product.title}}

- +
+
- {% include "fragments/privacy_ding.html" with product=related_product %} - {% include "fragments/adult_content_badge.html" with product=related_product %} -
- {% endwith %} - {% endfor %} +
- - - -
-
-
-{% if use_commento %} + {% if use_commento %} -
-
-
-
-
+
+
+
+
+
-

{% trans "Comments" %}

-

{% trans "Got a comment? Let us hear it." %}

-
+

{% trans "Comments" %}

+

{% trans "Got a comment? Let us hear it." %}

+
+
+
+
-
-
-
-{% endif %} + {% endif %} + + {% endwith %} -{% endwith %} {% endblock %} {% block extra_scripts %} diff --git a/source/js/buyers-guide/product-tab.js b/source/js/buyers-guide/product-tab.js index bfbd3336a3a..c4058e98048 100644 --- a/source/js/buyers-guide/product-tab.js +++ b/source/js/buyers-guide/product-tab.js @@ -49,6 +49,10 @@ export default () => { // First tab is active by default currentTab = setHighlight(allTabs[0]); + content.style.setProperty( + `height`, + `${document.querySelector(`div[data-product-label="0"`).clientHeight}px` + ); allTabs.forEach((tab, position) => { tab.addEventListener("click", () => { diff --git a/source/sass/buyers-guide/views/product.scss b/source/sass/buyers-guide/views/product.scss index 3e6df842382..afa4773810b 100644 --- a/source/sass/buyers-guide/views/product.scss +++ b/source/sass/buyers-guide/views/product.scss @@ -485,7 +485,7 @@ top: 0; left: 0; right: 0; - height: 228px; + height: 150px; background-image: url(../_images/buyers-guide/dot-pattern.svg); background-size: 9px 9px; }