Merge 4846770 into ec3ac8e

MozillaFoundation · Sep 26, 2020 · 3a082ab · 3a082ab
2 parents ec3ac8e + 4846770
commit 3a082ab
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 4 deletions.
diff --git a/network-api/networkapi/buyersguide/templates/product_page.html b/network-api/networkapi/buyersguide/templates/product_page.html
@@ -10,10 +10,10 @@
 {% block body_id %}product-page{% endblock %}
 
 {% block guts %}
-<div class="container-fluid text-center product-header bg-product-image{% if product.draft %} draft-product{% endif %}">
+<div class="text-center product-header bg-product-image{% if product.draft %} draft-product{% endif %}">
   <div class="container">
     <div class="row">
-      <div class="col-12 col-md-10 offset-md-1">
+      <div class="col-12 col-lg-10 offset-lg-1 product-header-content {% if product.privacy_ding %}show-privacy-ding{% endif %}">
           <img
             class="thumb-border"
             width="250"
@@ -31,9 +31,16 @@
 </div>
 
 {% with section_class="col-12 col-lg-10 offset-lg-1" %}
-<div class="container">
+<div class="container product-detail">
   <div class="row">
-    <div class="product-detail bg-white py-3 py-md-4 px-md-5 {{section_class}}">
+    {% if product.privacy_ding %}
+    <div class="privacy-ding-band px-md-5 {{section_class}}">
+      {% blocktrans %}
+      <p class="mb-0 py-2"><strong>Warning</strong>: *privacy not included with this product</p>
+      {% endblocktrans %}
+    </div>
+    {% endif %}
+    <div class="bg-white py-3 py-md-4 px-md-5 {{section_class}}">
       <div class="row intro mb-4">
         <h1 class="h1-heading col-12">{{product.name}}</h1>
         <div class="col-12 d-flex flex-column flex-md-row justify-content-between">

diff --git a/source/images/buyers-guide/icon-privacy-ding.svg b/source/images/buyers-guide/icon-privacy-ding.svg
diff --git a/source/sass/buyers-guide/views/product.scss b/source/sass/buyers-guide/views/product.scss
@@ -11,6 +11,27 @@ $pni-product-breakpoint-larger: $bp-md;
   .seal-of-approval {
     @include seal-of-approval(1rem, 0, 76px, 76px, 140px, 140px);
   }
+
+  .product-header-content.show-privacy-ding {
+    position: relative;
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 24px;
+      right: 24px;
+      background: url(../_images/buyers-guide/icon-privacy-ding.svg) center /
+        contain no-repeat;
+      width: 47px;
+      height: 61px;
+
+      @media (min-width: $pni-product-breakpoint-larger) {
+        top: 40px;
+        width: 63px;
+        height: 80px;
+      }
+    }
+  }
 }
 
 .related-product {
@@ -38,6 +59,10 @@ $pni-product-breakpoint-larger: $bp-md;
   }
 }
 
+.privacy-ding-band {
+  background: $pni-warning-yellow;
+}
+
 .product-detail {
   margin-top: -88px;
 

diff --git a/source/sass/mofo-bootstrap/_colors.scss b/source/sass/mofo-bootstrap/_colors.scss
@@ -27,6 +27,7 @@ $pni-purple: #7f28b7;
 $pni-purple-pink: #b0379b;
 $pni-pink: #e4487d;
 $pni-gradient: linear-gradient(to right, $pni-blue 0%, $pni-pink 100%);
+$pni-warning-yellow: #fbd545;
 
 $pni-product-list-background: #f5f5f5; /* keep this #f5f5f5 as this is the background colour product images on Homepage have */
 $pni-product-image-background: #f4f4f4; /* keep this #f4f4f4 as this is the background colour product images on Product Page have */