7377 mozilla researched #7539

danielfmiranda · 2021-10-01T00:29:38Z

Note/Dependency: Ticket #7541 depends on this ticket, please do not merge once approved, thank you!

Link to sample test page: https://foundation-s-7377-mozil-3sy071.herokuapp.com/en/privacynotincluded/picture-all-response-themselves-environmental/

Steps to test:

Visit the test page at the url above
Note the addition of the "Mozilla Researched" section.
The "review date/ mozilla researched/ mozilla says" section should be responsive at all screen sizes. Please note however that we are adding the final "People voted" section in a later PR. But here is how it looks with filler content

Desktop:

Tablet:

Mobile:

If everything looks OK, testing is complete!

Checklist

Changes in Models:

Are my changes backward-compatible. If not, did I schedule a deploy with the rest of the team?

…esearched

…mozilla says and researched section.

danielfmiranda · 2021-10-01T18:23:06Z

tailwind.config.js

@@ -53,6 +53,7 @@ module.exports = {
    },
    // Renaming breakpoints temporary until we remove bootstrap usage
    screens: {
+      xsmall: "380px",


Added a new breakpoint for mobile sizes to the tailwind config

You should not need to make a new breakpoint for this situation

https://foundation.mozilla.org/en/style-guide/#breakpoints

In a mobile first approach to this there should be a reason to have different stylings between 380px and 576px

You should be able to think of it as

Have classes that work all the way to 576px

then have classes for 576px-768px
etc

danielfmiranda · 2021-10-01T18:24:40Z

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

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


Hi @fessehaye! Tagged you in this PR as I was hoping you could take a look at my use of tailwind for responsiveness and let me know what you think. Thanks!

fessehaye

can't see last column

fessehaye · 2021-10-01T23:45:56Z

tailwind.config.js

@@ -53,6 +53,7 @@ module.exports = {
    },
    // Renaming breakpoints temporary until we remove bootstrap usage
    screens: {
+      xsmall: "380px",


You should not need to make a new breakpoint for this situation

https://foundation.mozilla.org/en/style-guide/#breakpoints

In a mobile first approach to this there should be a reason to have different stylings between 380px and 576px

You should be able to think of it as

Have classes that work all the way to 576px

then have classes for 576px-768px
etc

sabrinang

mobile/tablet/desktop breakpoints look good
| divider in between sections should be $gray-20
make the 'i' info icon also link to /privacynotincluded/about/methodology/
balance space after info icon to match others

* New localization approach for Mozilla researched * Remove extra spaces and simplify string

danielfmiranda · 2021-10-05T00:01:48Z

Thanks for the feedback @fessehaye @sabrinang!

I have made the requested changes and re-requested review.

@TheoChevalier I have also made you a reviewer with your suggested changes merged in. Everything seems to be working OK, however, I cannot get the text to translate and reproduce the bug you had mentioned in your PR. I was wondering if you could take a look, or provide me with some steps to reproduce? Thank you!

sabrinang

👍 Thanks for updating the spacing!

TheoChevalier

Looking good from an l10n perspective!

fessehaye · 2021-10-01T23:49:57Z

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

+    </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">


Remember that you are using the same breakpoints as bootstraps, so making responsive elements have a similar class usage

fessehaye · 2021-10-06T18:39:25Z

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

+      </span>
+    </div>
+  </div>
+  <span class="research-detail-divider body-small tw-hidden large:tw-inline"> | </span>


research-detail-divider should be substituted with tw-text-gray-20 unless you need this for nested css or JS

… slider (#7402) CI looks stuck - overriding added external link icon and removed price/dollar-sign (#7394) * added external link icon and removed price/dollar-sign * Update product.scss * Update product.scss Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org> Update continous-integration.yml Update prod-like-ci.yml added new date format to match figma file (#7395) * added new date format to match figma file Co-authored-by: Pomax <pomax@nihongoresources.com> Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org> Updated order of items, as well as renamed Updates section to News (#7400) * Updated order of items, as well as renamed Updates section to News Co-authored-by: Pomax <pomax@nihongoresources.com> Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org> Create README.md Delete README.md 7374 - Added Category Bubbles Added padding hide the softwareproductpage child page type (#7419) removed company contact information fields from template and cms/models (#7401) * removed company contact information fields from template and cms/models Co-authored-by: Pomax <pomax@nihongoresources.com> Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org> prettier 7294 - PNI category name untranslated in page title (#7455) * 7294 - PNI category name untranslated in page title linting fix * Update network-api/networkapi/wagtailpages/pagemodels/products.py Co-authored-by: Pomax <pomax@nihongoresources.com> Co-authored-by: Pomax <pomax@nihongoresources.com> updated dotted background bar to be around comments (#7450) Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org> 7374 - Added Category Bubbles Added padding 7387-update typesetting styling added mozilla says section (#7446) * rebase * updated migrations * Update product_page.html * Update network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html Co-authored-by: Théo Chevalier <theo.chevalier11@gmail.com> * Update product_page.html * updated rebase and commits Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org> Co-authored-by: Théo Chevalier <theo.chevalier11@gmail.com> ai product fields (#7488) * added fields to be used in the AI panel * Update products.py Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org> Localize PNI category name in page title (#7478) * Localize PNI category name in page title * Line too long 7492 additional ai fields (#7513) * added new fields, however, need to ask whether or not we want the helptext fields to go along or if they are static: * updated AI fields, as well as reordered them in the code and CMS to match new PNI product page template Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org> 7389 section hrs (#7452) * added new section dividers for news and related products * updated spacing between news heading and section Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org> update the ProductUpdate meta class to include ordering (#7530) Localize category badge (#7565) 7472 - Search - update placeholder text added new lead in paragraph under the comments heading (#7572) * added new lead in paragraph under the comments heading * Update product_page.html Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org> 7382 - product tabs component Added sticky Fixes update Design revisions Refactor Addressed fixes fixes 7377 mozilla researched (#7539) * added new template to house all of the research details * Update research_details.html * New localization approach for Mozilla researched (#7553) Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org> Co-authored-by: Théo Chevalier <theo.chevalier11@gmail.com> 7473 change "all" category on mobile to a more indicative text (#7570) fix 7379 people voted (#7541) * added migrations for mozilla researched * merge with q3 branch * merge with q3 branch * updated migrations * saving to ask design for what to do on the medium breakpoint for the mozilla says and researched section. * updated to use tailwind * added new template to house all of the research details * updated migrations * Update research_details.html * 7379-people-voted * New localization approach for Mozilla researched (#7553) * New localization approach for Mozilla researched * Remove extra spaces and simplify string * added requested changes from design and review * New localization approach for People voted (#7554) * New localization approach for People voted * remove extra spaces * Simplify string * Update most_voted_rating.html * spacing * Update research_details.html * comments * removed % sign, implemented feedback from review * Removed rogue space * Update network-api/networkapi/wagtailpages/templates/fragments/most_voted_rating.html Co-authored-by: Théo Chevalier <theo.chevalier11@gmail.com> * merging with q3 Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org> Co-authored-by: Théo Chevalier <theo.chevalier11@gmail.com> Co-authored-by: Pomax <pomax@nihongoresources.com> 7393 - Update Content Width Fixed 7380 tips to protect free text (#7576) * tips to protect yourself using richtext field Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org> Co-authored-by: Pomax <pomax@nihongoresources.com> updated blurb and worst case to rich text fields with 5000 char limit (#7605) Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org> 7470/7474 relocate search bar (#7591) * removed unneeded JS, updated CSS, and relocated search bar to hero section of the page * updated use of variable for color white Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org> Co-authored-by: Pomax <pomax@nihongoresources.com> 7383 - Product page - add "information" links to certain fields Update network-api/networkapi/wagtailpages/templates/fragments/product_criterion_primary_info.html Co-authored-by: Théo Chevalier <theo.chevalier11@gmail.com> Update network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html Co-authored-by: Théo Chevalier <theo.chevalier11@gmail.com> 7386 - Content Update fixes Update network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html Co-authored-by: Théo Chevalier <theo.chevalier11@gmail.com> Changes vote now button enabled on-click (#7627) * vote now button enabled on-click * removed box shadow while disabled * transition Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org> updated styling of search bar (#7604) * removed unneeded JS, updated CSS, and relocated search bar to hero section of the page * updated use of variable for color white * updated styling of search bar to be round with 1px black border, 6 col width * css changes requested by design Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org> 7441 category share data (#7606) * added new image field, then checking if we can use them for share data * comment * migrations and Theo's localization feedback * formatting * updated migrations * localization of category share data * Removing slug from editable panels Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org> Add subcategory functionality to PNI categories. (#7641) * add "subcategories" by letting categories specify a parent. migration fix

* added new template to house all of the research details * Update research_details.html * New localization approach for Mozilla researched (#7553) Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org> Co-authored-by: Théo Chevalier <theo.chevalier11@gmail.com>

Daniel Miranda added 8 commits September 24, 2021 13:51

added migrations for mozilla researched

aca7b21

merge with q3 branch

3ef3bbe

merge with q3 branch

2991121

Merge remote-tracking branch 'origin/pni-q3-2021' into 7377-mozilla-r…

9680ca9

…esearched

updated migrations

496c371

saving to ask design for what to do on the medium breakpoint for the …

bdc9b81

…mozilla says and researched section.

updated to use tailwind

4ec3387

added new template to house all of the research details

8e29cf1

mofodevops temporarily deployed to foundation-s-7377-mozil-3sy071 October 1, 2021 00:29 Inactive

danielfmiranda changed the base branch from main to pni-q3-2021 October 1, 2021 00:37

Merge branch 'pni-q3-2021' into 7377-mozilla-researched

468de15

danielfmiranda temporarily deployed to foundation-s-7377-mozil-3sy071 October 1, 2021 00:38 Inactive

updated migrations

e56cd23

danielfmiranda temporarily deployed to foundation-s-7377-mozil-3sy071 October 1, 2021 00:59 Inactive

danielfmiranda temporarily deployed to foundation-s-7377-mozil-3sy071 October 1, 2021 01:22 Inactive

mofodevops temporarily deployed to foundation-s-mozilla-re-puqoxp October 1, 2021 01:34 Inactive

Update research_details.html

ce6674e

danielfmiranda temporarily deployed to foundation-s-7377-mozil-3sy071 October 1, 2021 16:51 Inactive

danielfmiranda requested a review from sabrinang October 1, 2021 18:22

danielfmiranda commented Oct 1, 2021

View reviewed changes

danielfmiranda requested a review from fessehaye October 1, 2021 18:24

danielfmiranda mentioned this pull request Oct 1, 2021

[duplicate]: Mozilla researched 7377 #7540

Closed

fessehaye suggested changes Oct 1, 2021

View reviewed changes

TheoChevalier mentioned this pull request Oct 4, 2021

New localization approach for Mozilla researched #7553

Merged

sabrinang requested changes Oct 4, 2021

View reviewed changes

sabrinang mentioned this pull request Oct 4, 2021

[PNI Website] Design support & reviews for dev work cont. #7489

Closed

New localization approach for Mozilla researched (#7553)

340ef7d

* New localization approach for Mozilla researched * Remove extra spaces and simplify string

danielfmiranda temporarily deployed to foundation-s-7377-mozil-3sy071 October 4, 2021 22:05 Inactive

added requested changes from design and review

f725bef

danielfmiranda temporarily deployed to foundation-s-7377-mozil-3sy071 October 4, 2021 23:45 Inactive

danielfmiranda requested review from fessehaye, sabrinang and TheoChevalier October 5, 2021 00:00

sabrinang approved these changes Oct 5, 2021

View reviewed changes

danielfmiranda mentioned this pull request Oct 5, 2021

7379 people voted #7541

Merged

1 task

TheoChevalier approved these changes Oct 6, 2021

View reviewed changes

Merge branch 'pni-q3-2021' into 7377-mozilla-researched

071cdef

danielfmiranda temporarily deployed to foundation-s-7377-mozil-3sy071 October 6, 2021 18:08 Inactive

fessehaye approved these changes Oct 6, 2021

View reviewed changes

Merge branch 'pni-q3-2021' into 7377-mozilla-researched

d799cc9

danielfmiranda temporarily deployed to foundation-s-7377-mozil-3sy071 October 6, 2021 22:27 Inactive

replaced custom class with tailwind class for text color

eba0b12

danielfmiranda temporarily deployed to foundation-s-7377-mozil-3sy071 October 6, 2021 23:45 Inactive

Merge branch 'pni-q3-2021' into 7377-mozilla-researched

87405fd

danielfmiranda temporarily deployed to foundation-s-7377-mozil-3sy071 October 6, 2021 23:51 Inactive

danielfmiranda merged commit 265add9 into pni-q3-2021 Oct 7, 2021

danielfmiranda deleted the 7377-mozilla-researched branch October 7, 2021 00:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

7377 mozilla researched #7539

7377 mozilla researched #7539

danielfmiranda commented Oct 1, 2021 •

edited

Loading

danielfmiranda Oct 1, 2021

fessehaye Oct 1, 2021

danielfmiranda Oct 1, 2021

fessehaye left a comment

fessehaye Oct 1, 2021

sabrinang left a comment

danielfmiranda commented Oct 5, 2021

sabrinang left a comment

TheoChevalier left a comment

fessehaye Oct 1, 2021

fessehaye Oct 6, 2021

7377 mozilla researched #7539

7377 mozilla researched #7539

Conversation

danielfmiranda commented Oct 1, 2021 • edited Loading

Checklist

danielfmiranda Oct 1, 2021

Choose a reason for hiding this comment

fessehaye Oct 1, 2021

Choose a reason for hiding this comment

danielfmiranda Oct 1, 2021

Choose a reason for hiding this comment

fessehaye left a comment

Choose a reason for hiding this comment

fessehaye Oct 1, 2021

Choose a reason for hiding this comment

sabrinang left a comment

Choose a reason for hiding this comment

danielfmiranda commented Oct 5, 2021

sabrinang left a comment

Choose a reason for hiding this comment

TheoChevalier left a comment

Choose a reason for hiding this comment

fessehaye Oct 1, 2021

Choose a reason for hiding this comment

fessehaye Oct 6, 2021

Choose a reason for hiding this comment

danielfmiranda commented Oct 1, 2021 •

edited

Loading