no icon bar, make seal overlay

MozillaFoundation · Nov 15, 2018 · 85a9bf9 · 85a9bf9
1 parent 8b9dfed
commit 85a9bf9
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 44 deletions.
diff --git 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
@@ -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%;
-    }
-  }
 }