From 8b9dfedc2042e4246e74f67fe15680d529539f08 Mon Sep 17 00:00:00 2001
From: Pomax <pomax@nihongoresources.com>
Date: Thu, 15 Nov 2018 14:26:20 -0800
Subject: [PATCH 1/5] remove the thumb icons from the homepage

---
 .../buyersguide/templates/buyersguide_home.html           | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/network-api/networkapi/buyersguide/templates/buyersguide_home.html b/network-api/networkapi/buyersguide/templates/buyersguide_home.html
index 44a464a1513..19e57441529 100644
--- a/network-api/networkapi/buyersguide/templates/buyersguide_home.html
+++ b/network-api/networkapi/buyersguide/templates/buyersguide_home.html
@@ -54,14 +54,6 @@ <h1 class="h1-heading text-center mt-4">Shop Safe This Holiday Season</h1>
                   alt="this product meets our minimum security standards"
                 >
               {% endif %}
-
-              {% if product.votes.confidence %}
-                {% if product.votes.confidence.1 > product.votes.confidence.0 %}
-                  <div class="recommendation positive m-2"></div>
-                {% else %}
-                  <div class="recommendation negative m-2"></div>
-                {% endif %}
-              {% endif %}
             </div>
 
             <a class="product-image" href="/en/privacynotincluded/products/{{ product.slug }}">

From 85a9bf9303bc5bbe3aaa66caeaaa5ac1c6954ca3 Mon Sep 17 00:00:00 2001
From: Pomax <pomax@nihongoresources.com>
Date: Thu, 15 Nov 2018 14:51:35 -0800
Subject: [PATCH 2/5] no icon bar, make seal overlay

---
 .../templates/buyersguide_home.html           | 18 +++---
 source/sass/buyers-guide/views/homepage.scss  | 60 ++++++++-----------
 2 files changed, 34 insertions(+), 44 deletions(-)

diff --git a/network-api/networkapi/buyersguide/templates/buyersguide_home.html b/network-api/networkapi/buyersguide/templates/buyersguide_home.html
index 19e57441529..ef436324045 100644
--- a/network-api/networkapi/buyersguide/templates/buyersguide_home.html
+++ b/network-api/networkapi/buyersguide/templates/buyersguide_home.html
@@ -45,16 +45,14 @@ <h1 class="h1-heading text-center mt-4">Shop Safe This Holiday Season</h1>
         <div class="d-flex justify-content-center align-items-stretch flex-wrap">
           {% for product in products %}
           <div class="product-box bg-gray" data-creepiness="{{ product.votes.creepiness.average }}">
-            <div class="iconography-bar">
-              {% if product.meets_minimum_security_standards is True %}
-                <img
-                  class="seal-of-approval"
-                  src="/_images/buyers-guide/mini-badge.svg"
-                  title="this product meets our minimum security standards"
-                  alt="this product meets our minimum security standards"
-                >
-              {% endif %}
-            </div>
+            {% if product.meets_minimum_security_standards is True %}
+              <img
+                class="seal-of-approval"
+                src="/_images/buyers-guide/mini-badge.svg"
+                title="this product meets our minimum security standards"
+                alt="this product meets our minimum security standards"
+              >
+            {% endif %}
 
             <a class="product-image" href="/en/privacynotincluded/products/{{ product.slug }}">
               {% if USE_CLOUDINARY %}
diff --git a/source/sass/buyers-guide/views/homepage.scss b/source/sass/buyers-guide/views/homepage.scss
index ee74bad940d..a2d7136a7da 100644
--- a/source/sass/buyers-guide/views/homepage.scss
+++ b/source/sass/buyers-guide/views/homepage.scss
@@ -43,6 +43,7 @@
   }
 
   .product-box {
+    position: relative;
     width: calc(50% - 2px);
     margin: 1px;
     overflow: hidden;
@@ -51,20 +52,37 @@
       width: calc(33% - 2px);
     }
 
-    $icon-bar-height: 56px;
+    .seal-of-approval {
+      position: absolute;
+      top: 10px;
+      left: 6px;
+      width: 44px;
+      height: auto;
+    }
+
+    .recommendation {
+      float: right;
+      width: 1em;
+      height: 1em;
+
+      &.positive {
+        background-image: url(/_images/buyers-guide/icon-thumb-up.svg);
+        background-position: 0 0;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
 
-    .iconography-bar {
-      height: $icon-bar-height;
+      &.negative {
+        background-image: url(/_images/buyers-guide/icon-thumb-down.svg);
+        background-position: 0 0;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
     }
 
     .product-image {
       display: block;
       text-align: center;
-
-      img {
-        background: #e0e0e0;
-        max-width: calc(100% - (#{$icon-bar-height} / 2));
-      }
     }
   }
 
@@ -133,30 +151,4 @@
       }
     }
   }
-
-  .seal-of-approval {
-    width: 44px;
-    height: auto;
-    margin: 10px 0 0 6px;
-  }
-
-  .recommendation {
-    float: right;
-    width: 1em;
-    height: 1em;
-
-    &.positive {
-      background-image: url(/_images/buyers-guide/icon-thumb-up.svg);
-      background-position: 0 0;
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-    }
-
-    &.negative {
-      background-image: url(/_images/buyers-guide/icon-thumb-down.svg);
-      background-position: 0 0;
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-    }
-  }
 }

From 5b00491ec39ba29d711f015978be689fbcb3d09d Mon Sep 17 00:00:00 2001
From: Pomax <pomax@nihongoresources.com>
Date: Thu, 15 Nov 2018 15:09:42 -0800
Subject: [PATCH 3/5] css tweak

---
 source/sass/buyers-guide/views/homepage.scss | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/source/sass/buyers-guide/views/homepage.scss b/source/sass/buyers-guide/views/homepage.scss
index a2d7136a7da..c77574d98bd 100644
--- a/source/sass/buyers-guide/views/homepage.scss
+++ b/source/sass/buyers-guide/views/homepage.scss
@@ -83,11 +83,19 @@
     .product-image {
       display: block;
       text-align: center;
+
+      $image-margin: 26px;
+
+      img {
+        display: inline-block;
+        margin: $image-margin;
+        width: calc(100% - (#{$image-margin} * 2));
+      }
     }
   }
 
   .creepiness-slider {
-    z-index: 0;
+    z-index: 1;
     position: sticky;
     position: -webkit-sticky;
     top: 16px;

From 410dbb96f971a4589cbf387cdf0f09c7363c3f4e Mon Sep 17 00:00:00 2001
From: Pomax <pomax@nihongoresources.com>
Date: Thu, 15 Nov 2018 15:25:47 -0800
Subject: [PATCH 4/5] show thumbs when explicitly filtering for likely/unlikely

---
 .../templates/buyersguide_home.html           |  8 +++++++
 .../buyers-guide/components/filter/filter.jsx | 23 ++++++++++++++-----
 source/sass/buyers-guide/views/homepage.scss  |  3 ++-
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/network-api/networkapi/buyersguide/templates/buyersguide_home.html b/network-api/networkapi/buyersguide/templates/buyersguide_home.html
index ef436324045..7f04b53374a 100644
--- a/network-api/networkapi/buyersguide/templates/buyersguide_home.html
+++ b/network-api/networkapi/buyersguide/templates/buyersguide_home.html
@@ -54,6 +54,14 @@ <h1 class="h1-heading text-center mt-4">Shop Safe This Holiday Season</h1>
               >
             {% endif %}
 
+            {% if product.votes.confidence %}
+              {% if product.votes.confidence.1 > product.votes.confidence.0 %}
+                <div class="d-none recommendation positive m-2"></div>
+              {% else %}
+                <div class="d-none recommendation negative m-2"></div>
+              {% endif %}
+            {% endif %}
+
             <a class="product-image" href="/en/privacynotincluded/products/{{ product.slug }}">
               {% if USE_CLOUDINARY %}
               <img
diff --git a/source/js/buyers-guide/components/filter/filter.jsx b/source/js/buyers-guide/components/filter/filter.jsx
index e9401b8606e..e3f380bd251 100644
--- a/source/js/buyers-guide/components/filter/filter.jsx
+++ b/source/js/buyers-guide/components/filter/filter.jsx
@@ -239,12 +239,23 @@ export default class Filter extends React.Component {
       // not hidden by creepiness: do we need to hide it due to buyers likelihood?
       let recommendation = productBox.querySelector(`.recommendation`);
 
-      if (like === `Likely` && recommendation.classList.contains(`negative`)) {
-        classes.add(`d-none`);
-        hidden = true;
-      } else if (like === `Not likely` && recommendation.classList.contains(`positive`)) {
-        classes.add(`d-none`);
-        hidden = true;
+      if (recommendation) {
+        if (like === `Both`) {
+          recommendation.classList.add('d-none');
+          hidden = true;
+        } else {
+          recommendation.classList.remove('d-none');
+        }
+
+        if (hidden) { return; }
+
+        if (like === `Likely` && recommendation.classList.contains(`negative`)) {
+          classes.add(`d-none`);
+          hidden = true;
+        } else if (like === `Not likely` && recommendation.classList.contains(`positive`)) {
+          classes.add(`d-none`);
+          hidden = true;
+        }
       }
 
       if (hidden) { return; }
diff --git a/source/sass/buyers-guide/views/homepage.scss b/source/sass/buyers-guide/views/homepage.scss
index c77574d98bd..3d0bbbab7da 100644
--- a/source/sass/buyers-guide/views/homepage.scss
+++ b/source/sass/buyers-guide/views/homepage.scss
@@ -61,7 +61,8 @@
     }
 
     .recommendation {
-      float: right;
+      position: absolute;
+      right: 0;
       width: 1em;
       height: 1em;
 

From 3fd9a05b0a012b3d80738e575f24de16f5c30ee0 Mon Sep 17 00:00:00 2001
From: Pomax <pomax@nihongoresources.com>
Date: Thu, 15 Nov 2018 15:32:03 -0800
Subject: [PATCH 5/5] linting

---
 source/js/buyers-guide/components/filter/filter.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/source/js/buyers-guide/components/filter/filter.jsx b/source/js/buyers-guide/components/filter/filter.jsx
index e3f380bd251..0640526eab4 100644
--- a/source/js/buyers-guide/components/filter/filter.jsx
+++ b/source/js/buyers-guide/components/filter/filter.jsx
@@ -241,10 +241,10 @@ export default class Filter extends React.Component {
 
       if (recommendation) {
         if (like === `Both`) {
-          recommendation.classList.add('d-none');
+          recommendation.classList.add(`d-none`);
           hidden = true;
         } else {
-          recommendation.classList.remove('d-none');
+          recommendation.classList.remove(`d-none`);
         }
 
         if (hidden) { return; }