Added product name to homepage & thumbnail sizing

network-api/networkapi/buyersguide/templates/bg_base.html

@@ -63,7 +63,7 @@
         </div>
       </div>
 
-      <div class="pb-5 main-content">{% block guts %}{% endblock %}</div>
+      <div class="main-content {% block main-content-class %}pb-5{% endblock %}">{% block guts %}{% endblock %}</div>
 
       <footer class="mofo-footer">
         <div class="container">

network-api/networkapi/buyersguide/templates/buyersguide_home.html

@@ -5,6 +5,8 @@
 
 {% block body-id %}home{% endblock %}
 
+{% block main-content-class %}{% endblock %}
+
 {% block guts %}
 <div class="container-fluid text-center page-header bg-gray">
   <!-- home banner as css background -->
@@ -29,7 +31,13 @@ <h1 class="h1-heading text-center mt-4">Shop Safe This Holiday Season</h1>
             The <span class="creep-face-emoji">😮</span> below shows how creepy users find these products. Scroll to see it change. Click on a product to rate it.
           </p>
         </div>
+      </div>
+    </div>
+</div>
 
+
+
+<div>
   <div class="creepiness-slider bg-white text-center">
     <span class="current-creepiness">
       <span class="speech-bubble d-none">
@@ -42,9 +50,10 @@ <h1 class="h1-heading text-center mt-4">Shop Safe This Holiday Season</h1>
     </div>
   </div>
 
-        <div class="d-flex justify-content-center align-items-stretch flex-wrap">
+  <div class="product-box-list-wrapper">
+    <div class="product-box-list 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,22 +71,23 @@ <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 text-center mt-4 h-100 d-flex flex-column justify-content-between" 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 %}
+          <figcaption class="hidden-sm-down mt-md-2 text-left">
+            <div class="h6-heading">{{product.company}}</div>
+            <div class="body">{{product.name}}</div>
+          </figcaption>
         </a>
-          </div>
+      </figure>
       {% endfor %}
     </div>
   </div>
 </div>
-</div>
 {% endblock %}

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

@@ -13,7 +13,6 @@
 
   .product-listing {
     margin-top: -88px;
-    padding-bottom: 88px;
 
     .user-rated {
       font-family: "Zilla Slab";
@@ -42,21 +41,39 @@
     }
   }
 
-  .product-box {
+  .product-box-list-wrapper {
+    @mixin product-box-size($box-margin: 1px, $items-per-row: 2) {
+      $num-of-gutter: $items-per-row;
+      $gutter-width: $box-margin * 2;
+      $row-total-gutter-width: $gutter-width * $num-of-gutter;
+
+      .product-box-list {
+        margin-right: -$box-margin;
+        margin-left: -$box-margin;
+      }
+
+      figure.product-box {
+        $padding-x: 12px;
+        $padding-y: 12px;
+
+        display: inline-block;
         position: relative;
-    width: calc(50% - 2px);
-    margin: 1px;
-    overflow: hidden;
+        margin-left: $box-margin;
+        margin-right: $box-margin;
+        margin-bottom: $box-margin * 2;
+        padding: $padding-y $padding-x;
+        width: calc((100% - #{$row-total-gutter-width}) / #{$items-per-row});
 
-    @media screen and (min-width: 750px) {
-      width: calc(33% - 2px);
+        &.d-flex.d-none {
+          /* Bootstrap's .d-none's rule alone doesn't work when .d-flex is present on the same element */
+          display: none !important;
         }
 
         .seal-of-approval {
           position: absolute;
-      top: 10px;
-      left: 6px;
-      width: 44px;
+          top: $padding-y;
+          left: $padding-x;
+          width: 30px;
           height: auto;
         }
 
@@ -82,16 +99,45 @@
         }
 
         .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));
+            margin: 0 auto;
+
+            @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;
+          }
+        }
+      }
+    }
+
+    overflow-x: hidden;
+
+    @include product-box-size(1px, 2);
+
+    @media (min-width: $bp-md) {
+      @include product-box-size(1px, 3);
     }
+
+    @media (min-width: $bp-lg) {
+      @include product-box-size(1px, 4);
+    }
+
+    @media (min-width: $bp-xl) {
+      @include product-box-size(1px, 5);
     }
   }