7470/7474 relocate search bar #7591

danielfmiranda · 2021-10-11T03:05:13Z

Closes #7470, possibly #7474
Related PRs/issues #

Link to sample test page: https://foundation-s-7470-reloc-6omhmx.herokuapp.com/en/privacynotincluded/

Steps to test:

TESTING FOR #7470

Please visit the test page using the link above
Note that the search bar has been moved (updated styling coming in seperate ticket)
Please test that everything relating to search/filtering is still working as before
If so, testing is complete!

TESTING FOR #7474

I believe this PR also covers ticket 7474 as the search bar has been updated in product category pages as well.

Please visit the test category page at: https://foundation-s-7470-reloc-6omhmx.herokuapp.com/en/privacynotincluded/categories/entertainment/
Note that the search bar has been moved (updated styling coming in seperate ticket)
Please test that everything relating to search/filtering is still working as before
If so, testing is complete!

NOTE: Please note that since the ticket only asked to remove old JS/ relocate the search bar, the search bar is not going to look like the comp until ticket #7471 is complete.

Checklist

Changes in Models:

[Are my changes backward-compatible]

…ction of the page

…search-bar

danielfmiranda · 2021-10-11T03:19:45Z

source/js/buyers-guide/search.js

-    searchInput.addEventListener(`blur`, (_evt) => {
-      if (!searchInput.value.trim()) {
-        SEARCH_BAR.classList.remove(`search-active`);
+        SearchFilter.filter(searchText);


Since the search bar is no longer collapsing/expanding, we no longer needed this section of the javascript file which would add classes/ move the face icon when the search bar was expanded/ replace it if the search bar was collapsed again.

so nice to be able to remove code here.

danielfmiranda · 2021-10-11T03:20:52Z

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


+      @media (min-width: $breakpoint) {


Added a new breakpoint for the MD size, since the category navigation would cover the search bar.

danielfmiranda · 2021-10-11T03:21:28Z

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

      @media (min-width: $hero-breakpoint) {
        padding-top: 90px;
-        padding-bottom: 90px;
+        padding-bottom: calc(var(--search-box-height-desktop) + 90px);


Made room for the search bar by taking the existing 90px of padding and adding the size of the search bar.

danielfmiranda · 2021-10-11T03:24:42Z

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

@@ -356,7 +348,13 @@ body.catalog {
    );

    &.creep-o-meter-moved {
-      height: var(--small-sticky-height);
+      height: 80px;


This is for mobile sizes, when the user scrolls, the face icon drops from the middle of the page:

to the bottom corner. The containing div then shrinks to house only the privacy not included checkbox.

danielfmiranda · 2021-10-11T03:35:52Z

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

@@ -484,6 +481,7 @@ body.catalog {
  .oh-no-face {
    width: 50px;
    height: 50px;
+    margin: auto;


This is a minor fix to a bug I found while working on this ticket, where if you were to search and no results appeared, the "oh no" face would be all the way to the left of the page. The margin makes sure its at center :D

sabrinang

Relocation for search on home and category pages looks good 👍

… 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

Daniel Miranda added 2 commits October 10, 2021 20:02

removed unneeded JS, updated CSS, and relocated search bar to hero se…

10a2e64

…ction of the page

Merge remote-tracking branch 'origin/pni-q3-2021' into 7470-relocate-…

a503b4c

…search-bar

mofodevops temporarily deployed to foundation-s-7470-reloc-6omhmx October 11, 2021 03:05 Inactive

updated use of variable for color white

eeab8e7

danielfmiranda temporarily deployed to foundation-s-7470-reloc-6omhmx October 11, 2021 03:09 Inactive

danielfmiranda commented Oct 11, 2021

View reviewed changes

danielfmiranda requested review from Pomax and sabrinang October 11, 2021 03:35

danielfmiranda changed the title ~~7470 relocate search bar~~ 7470/7474 relocate search bar Oct 11, 2021

sabrinang approved these changes Oct 12, 2021

View reviewed changes

Pomax approved these changes Oct 12, 2021

View reviewed changes

Merge branch 'pni-q3-2021' into 7470-relocate-search-bar

f4cc79e

Pomax temporarily deployed to foundation-s-7470-reloc-6omhmx October 12, 2021 21:09 Inactive

Pomax approved these changes Oct 12, 2021

View reviewed changes

Pomax merged commit be10571 into pni-q3-2021 Oct 12, 2021

Pomax deleted the 7470-relocate-search-bar branch October 12, 2021 21:21

danielfmiranda mentioned this pull request Oct 13, 2021

#2 [PNI] Search - show search bar on all pages #7474

Closed

2 tasks

sabrinang mentioned this pull request Oct 18, 2021

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

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

7470/7474 relocate search bar #7591

7470/7474 relocate search bar #7591

danielfmiranda commented Oct 11, 2021 •

edited

Loading

danielfmiranda Oct 11, 2021

Pomax Oct 12, 2021

danielfmiranda Oct 11, 2021

danielfmiranda Oct 11, 2021

danielfmiranda Oct 11, 2021 •

edited

Loading

danielfmiranda Oct 11, 2021

sabrinang left a comment

7470/7474 relocate search bar #7591

7470/7474 relocate search bar #7591

Conversation

danielfmiranda commented Oct 11, 2021 • edited Loading

TESTING FOR #7470

TESTING FOR #7474

Checklist

danielfmiranda Oct 11, 2021

Choose a reason for hiding this comment

Pomax Oct 12, 2021

Choose a reason for hiding this comment

danielfmiranda Oct 11, 2021

Choose a reason for hiding this comment

danielfmiranda Oct 11, 2021

Choose a reason for hiding this comment

danielfmiranda Oct 11, 2021 • edited Loading

Choose a reason for hiding this comment

danielfmiranda Oct 11, 2021

Choose a reason for hiding this comment

sabrinang left a comment

Choose a reason for hiding this comment

danielfmiranda commented Oct 11, 2021 •

edited

Loading

danielfmiranda Oct 11, 2021 •

edited

Loading