Related to #2229 - added product name to homepage

MozillaFoundation · Nov 19, 2018 · d5d1cce · d5d1cce
1 parent ecb12c4
commit d5d1cce
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 22 deletions.
diff --git a/network-api/networkapi/buyersguide/templates/buyersguide_home.html b/network-api/networkapi/buyersguide/templates/buyersguide_home.html
@@ -44,7 +44,7 @@ <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 }}">
+          <figure class="product-box bg-gray d-flex flex-column justify-content-between" data-creepiness="{{ product.votes.creepiness.average }}">
             {% if product.meets_minimum_security_standards is True %}
               <img
                 class="seal-of-approval"
@@ -62,19 +62,21 @@ <h1 class="h1-heading text-center mt-4">Shop Safe This Holiday Season</h1>
               {% endif %}
             {% endif %}
 
-            <a class="product-image" href="/en/privacynotincluded/products/{{ product.slug }}">
+            <a class="product-image d-block text-center mt-4" href="/en/privacynotincluded/products/{{ product.slug }}">
               {% if USE_CLOUDINARY %}
               <img
-                class="thumb-border"
-                width="300"
                 src="{% cloudinary_url product.cloudinary_image quality=50 fetch_format="auto" crop="fit" width=600 %}"
                 alt="link to {{product.name}}"
               >
               {% else %}
               <img src="{{mediaUrl}}{{"AWS_LOCATION"|env}}/{{product.image }}" alt="link to {{product.name}}">
               {% endif %}
-            </a>
-          </div>
+              <figcaption class="hidden-sm-down mt-md-2 text-left">
+                <div class="h6-heading">{{product.company}}</div>
+                <div class="body">{{product.name}}</div>
+              </figcaption>
+            </figure>
+          </a>
           {% endfor %}
         </div>
       </div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/source/sass/buyers-guide/views/homepage.scss b/source/sass/buyers-guide/views/homepage.scss
@@ -43,20 +43,24 @@
   }
 
   .product-box {
+    $padding-x: 12px;
+    $padding-y: 12px;
+
     position: relative;
     width: calc(50% - 2px);
     margin: 1px;
     overflow: hidden;
+    padding: $padding-y $padding-x;
 
     @media screen and (min-width: 750px) {
       width: calc(33% - 2px);
     }
 
     .seal-of-approval {
       position: absolute;
-      top: 10px;
-      left: 6px;
-      width: 44px;
+      top: $padding-y;
+      left: $padding-x;
+      width: 30px;
       height: auto;
     }
 
@@ -82,15 +86,24 @@
     }
 
     .product-image {
-      display: block;
-      text-align: center;
-
-      $image-margin: 26px;
+      @include hover-focus-active {
+        text-decoration: none;
+      }
 
       img {
-        display: inline-block;
-        margin: $image-margin;
-        width: calc(100% - (#{$image-margin} * 2));
+        @media (min-width: $bp-md) {
+          max-width: 78%;
+        }
+      }
+    }
+
+    figcaption {
+      color: #909090;
+      position: relative;
+      bottom: -($padding-y/2); // to offset the extra bottom spacing from line-height
+
+      .body {
+        font-weight: initial;
       }
     }
   }