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] 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%;
-    }
-  }
 }