added new section dividers for news and related products

MozillaFoundation · Sep 22, 2021 · a8223af · a8223af
1 parent 5b13033
commit a8223af
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html
@@ -259,7 +259,8 @@ <h2 class="h3-heading">{% trans "Artificial Intelligence" %}</h2>
           </section>
         {% endif %}
 
-                  {% if product.updates.count > 0 %}
+        {% if product.updates.count > 0 %}
+        <hr class="pni-section-divider"/>
           <h3 class="h2-heading mb-4 mb-md-5">{% trans "News" %}</h3>
           {% endif %}
           {% if product.updates.count > 0 %}
@@ -274,8 +275,9 @@ <h3 class="h2-heading mb-4 mb-md-5">{% trans "News" %}</h3>
             {% endwith %}
             {% endfor %}
           </div>
-          {% endif %}
-
+        {% endif %}
+
+          <hr class="pni-section-divider"/>
           <h3 class="h2-heading mb-4">{% trans "Related products" %}</h3>
           <div class="row">
             {% for related_product_page in product.related_product_pages.all %}

diff --git a/source/sass/buyers-guide/views/product.scss b/source/sass/buyers-guide/views/product.scss
@@ -475,3 +475,9 @@
   min-width: 290px;
   background: $pni-product-image-background;
 }
+
+.pni-section-divider {
+  border-width: 4px;
+  border-color: $black;
+  padding-bottom: 1em;
+}