From 0726d9d2a9ab1487f2d34a1eadd2197a534ae1d0 Mon Sep 17 00:00:00 2001
From: Andrew Mason <andrewmcodes@protonmail.com>
Date: Wed, 9 Oct 2019 19:00:43 -0400
Subject: [PATCH] css and ad optimizations (#660)

partial fix for #389
---
 app/views/ad_templates/@responsive_footer/themes/dark.css | 2 +-
 app/views/ad_templates/default/themes/dark.css            | 1 +
 app/views/ad_templates/default/themes/light.css           | 1 +
 app/views/ad_templates/docsify/show.html.erb              | 2 +-
 app/views/ad_templates/docsify/themes/dark.css            | 1 +
 app/views/ad_templates/docsify/themes/light.css           | 1 +
 app/views/ad_templates/image-centered/themes/dark.css     | 1 +
 app/views/ad_templates/image-centered/themes/light.css    | 1 +
 app/views/ad_templates/image-only/show.html.erb           | 2 +-
 app/views/ad_templates/image-only/themes/dark.css         | 1 +
 app/views/ad_templates/image-only/themes/light.css        | 1 +
 app/views/ad_templates/media/themes/dark.css              | 1 +
 app/views/ad_templates/media/themes/light.css             | 1 +
 app/views/ad_templates/rectangle-narrow/themes/dark.css   | 3 ++-
 app/views/ad_templates/rectangle-narrow/themes/light.css  | 3 ++-
 app/views/ad_templates/sponsored-text/show.html.erb       | 2 +-
 app/views/ad_templates/sponsored-text/themes/dark.css     | 1 +
 app/views/ad_templates/sponsored-text/themes/light.css    | 1 +
 app/views/ad_templates/square/show.html.erb               | 2 +-
 app/views/ad_templates/square/themes/dark.css             | 3 ++-
 app/views/ad_templates/square/themes/light.css            | 3 ++-
 app/views/ad_templates/text/themes/dark.css               | 4 ++--
 app/views/ad_templates/text/themes/light.css              | 4 ++--
 app/views/ad_templates/vertical/show.html.erb             | 2 +-
 app/views/ad_templates/vertical/themes/dark.css           | 3 ++-
 app/views/ad_templates/vertical/themes/light.css          | 3 ++-
 26 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/app/views/ad_templates/@responsive_footer/themes/dark.css b/app/views/ad_templates/@responsive_footer/themes/dark.css
index 0d67f3389..a2eb23808 100644
--- a/app/views/ad_templates/@responsive_footer/themes/dark.css
+++ b/app/views/ad_templates/@responsive_footer/themes/dark.css
@@ -22,7 +22,7 @@
 
 #cf .cf-img-wrapper {
   margin-right: 10px;
-  line-height: 0px;
+  line-height: 0;
 }
 
 #cf .cf-img-wrapper img {
diff --git a/app/views/ad_templates/default/themes/dark.css b/app/views/ad_templates/default/themes/dark.css
index 4cb63a613..f9fc2709d 100644
--- a/app/views/ad_templates/default/themes/dark.css
+++ b/app/views/ad_templates/default/themes/dark.css
@@ -30,6 +30,7 @@
   vertical-align: middle;
   border-style: none;
   max-width: 130px;
+  position: relative;
 }
 
 #cf .cf-text {
diff --git a/app/views/ad_templates/default/themes/light.css b/app/views/ad_templates/default/themes/light.css
index e26ccbbf3..4cc42b84a 100644
--- a/app/views/ad_templates/default/themes/light.css
+++ b/app/views/ad_templates/default/themes/light.css
@@ -29,6 +29,7 @@
   vertical-align: middle;
   border-style: none;
   max-width: 130px;
+  position: relative;
 }
 
 #cf .cf-text {
diff --git a/app/views/ad_templates/docsify/show.html.erb b/app/views/ad_templates/docsify/show.html.erb
index 2592675e5..bf583075e 100644
--- a/app/views/ad_templates/docsify/show.html.erb
+++ b/app/views/ad_templates/docsify/show.html.erb
@@ -4,7 +4,7 @@
       <div class="clearfix">
         <a data-href="campaign_url" target="_blank" rel="nofollow noopener">
           <span class="cf-img-wrapper">
-            <%= image_tag @creative.small_image.cloudfront_url, class: "cf-img", alt: @creative.name rescue nil %>
+            <%= image_tag @creative.small_image.cloudfront_url, width: 130, height: 130, class: "cf-img", alt: @creative.name rescue nil %>
           </span>
           <span class="cf-text">
             <strong><%= @creative.headline %></strong>
diff --git a/app/views/ad_templates/docsify/themes/dark.css b/app/views/ad_templates/docsify/themes/dark.css
index b8a5f05c9..38889c34d 100644
--- a/app/views/ad_templates/docsify/themes/dark.css
+++ b/app/views/ad_templates/docsify/themes/dark.css
@@ -27,6 +27,7 @@
   vertical-align: middle;
   border-style: none;
   max-width: 130px;
+  position: relative;
 }
 
 #cf .cf-text {
diff --git a/app/views/ad_templates/docsify/themes/light.css b/app/views/ad_templates/docsify/themes/light.css
index 994ddd4eb..8c5b9c06f 100644
--- a/app/views/ad_templates/docsify/themes/light.css
+++ b/app/views/ad_templates/docsify/themes/light.css
@@ -27,6 +27,7 @@
   vertical-align: middle;
   border-style: none;
   max-width: 130px;
+  position: relative;
 }
 
 #cf .cf-text {
diff --git a/app/views/ad_templates/image-centered/themes/dark.css b/app/views/ad_templates/image-centered/themes/dark.css
index 9e996f5e5..e4809f807 100644
--- a/app/views/ad_templates/image-centered/themes/dark.css
+++ b/app/views/ad_templates/image-centered/themes/dark.css
@@ -47,6 +47,7 @@
 
 #cf .cf-img-wrapper img {
   max-width: 130px;
+  position: relative;
 }
 
 #cf .cf-text {
diff --git a/app/views/ad_templates/image-centered/themes/light.css b/app/views/ad_templates/image-centered/themes/light.css
index 48225f222..60335592e 100644
--- a/app/views/ad_templates/image-centered/themes/light.css
+++ b/app/views/ad_templates/image-centered/themes/light.css
@@ -47,6 +47,7 @@
 
 #cf .cf-img-wrapper img {
   max-width: 130px;
+  position: relative;
 }
 
 #cf .cf-text {
diff --git a/app/views/ad_templates/image-only/show.html.erb b/app/views/ad_templates/image-only/show.html.erb
index 6ce1eec77..0c33eee60 100644
--- a/app/views/ad_templates/image-only/show.html.erb
+++ b/app/views/ad_templates/image-only/show.html.erb
@@ -3,7 +3,7 @@
     <span class="cf-wrapper">
       <div class="cf-header">supported by</div>
       <a data-href="campaign_url" class="cf-img-wrapper" target="_blank" rel="nofollow noopener">
-        <%= image_tag @creative.small_image.cloudfront_url, class: "cf-img", alt: @creative.name rescue nil %>
+        <%= image_tag @creative.small_image.cloudfront_url, height: 150, width: 150, class: "cf-img", alt: @creative.name rescue nil %>
       </a>
       <a href="https://codefund.io" data-target="powered_by_url" class="cf-powered-by" target="_blank" rel="nofollow noopener">
         <em>ethical</em> ad by CodeFund
diff --git a/app/views/ad_templates/image-only/themes/dark.css b/app/views/ad_templates/image-only/themes/dark.css
index 8308a10f3..7573a9a85 100644
--- a/app/views/ad_templates/image-only/themes/dark.css
+++ b/app/views/ad_templates/image-only/themes/dark.css
@@ -45,6 +45,7 @@
 #cf .cf-img-wrapper img {
   width: 150px;
   height: 150px;
+  position: relative;
 }
 
 #cf .cf-text {
diff --git a/app/views/ad_templates/image-only/themes/light.css b/app/views/ad_templates/image-only/themes/light.css
index 1a10de02c..0bc518dd2 100644
--- a/app/views/ad_templates/image-only/themes/light.css
+++ b/app/views/ad_templates/image-only/themes/light.css
@@ -45,6 +45,7 @@
 #cf .cf-img-wrapper img {
   width: 150px;
   height: 150px;
+  position: relative;
 }
 
 #cf .cf-text {
diff --git a/app/views/ad_templates/media/themes/dark.css b/app/views/ad_templates/media/themes/dark.css
index dfd81d173..202e14a98 100644
--- a/app/views/ad_templates/media/themes/dark.css
+++ b/app/views/ad_templates/media/themes/dark.css
@@ -17,6 +17,7 @@
 
 #cf .cf-img-wrapper img {
   border-radius: 5px;
+  position: relative;
 }
 
 #cf a {
diff --git a/app/views/ad_templates/media/themes/light.css b/app/views/ad_templates/media/themes/light.css
index 507ae982a..e4196f9ea 100644
--- a/app/views/ad_templates/media/themes/light.css
+++ b/app/views/ad_templates/media/themes/light.css
@@ -17,6 +17,7 @@
 
 #cf .cf-img-wrapper img {
   border-radius: 5px;
+  position: relative;
 }
 
 #cf a {
diff --git a/app/views/ad_templates/rectangle-narrow/themes/dark.css b/app/views/ad_templates/rectangle-narrow/themes/dark.css
index e8872d466..7110be4d3 100644
--- a/app/views/ad_templates/rectangle-narrow/themes/dark.css
+++ b/app/views/ad_templates/rectangle-narrow/themes/dark.css
@@ -11,7 +11,7 @@
 }
 
 #cf .cf-wrapper {
-  border-radius: 0px;
+  border-radius: 0;
   display: block;
   padding: 14px 10px;
   overflow: hidden;
@@ -30,6 +30,7 @@
   vertical-align: middle;
   border-style: none;
   max-width: 130px;
+  position: relative;
 }
 
 #cf .cf-text {
diff --git a/app/views/ad_templates/rectangle-narrow/themes/light.css b/app/views/ad_templates/rectangle-narrow/themes/light.css
index 8cdd6aef1..5643acab3 100644
--- a/app/views/ad_templates/rectangle-narrow/themes/light.css
+++ b/app/views/ad_templates/rectangle-narrow/themes/light.css
@@ -11,7 +11,7 @@
 }
 
 #cf .cf-wrapper {
-  border-radius: 0px;
+  border-radius: 0;
   display: block;
   padding: 14px 10px;
   overflow: hidden;
@@ -30,6 +30,7 @@
   vertical-align: middle;
   border-style: none;
   max-width: 130px;
+  position: relative;
 }
 
 #cf .cf-text {
diff --git a/app/views/ad_templates/sponsored-text/show.html.erb b/app/views/ad_templates/sponsored-text/show.html.erb
index 44a5bad61..9a0de62de 100644
--- a/app/views/ad_templates/sponsored-text/show.html.erb
+++ b/app/views/ad_templates/sponsored-text/show.html.erb
@@ -2,7 +2,7 @@
   <ins id="cf">
     <span class="cf-wrapper">
       Sponsored:&nbsp;
-      <%= image_tag @creative.icon_image.cloudfront_url, class: "cf-img", style: "width: 20px; height: 20px;", alt: @creative.name rescue nil %>
+      <%= image_tag @creative.icon_image.cloudfront_url, height: 20, width: 20, class: "cf-img", style: "width: 20px; height: 20px;", alt: @creative.name rescue nil %>
       <b><%= @creative.headline %></b>
       <%= @creative.body %>
       <a href="#" data-href="campaign_url" rel="nofollow noopener" target="_blank">
diff --git a/app/views/ad_templates/sponsored-text/themes/dark.css b/app/views/ad_templates/sponsored-text/themes/dark.css
index e3afb3de9..e5a33eaa9 100644
--- a/app/views/ad_templates/sponsored-text/themes/dark.css
+++ b/app/views/ad_templates/sponsored-text/themes/dark.css
@@ -18,6 +18,7 @@
 #cf .cf-wrapper img,
 #cf .cf-wrapper svg {
   vertical-align: middle;
+  position: relative;
 }
 
 #cf a.cf-powered-by {
diff --git a/app/views/ad_templates/sponsored-text/themes/light.css b/app/views/ad_templates/sponsored-text/themes/light.css
index 129090e01..7c38a5f05 100644
--- a/app/views/ad_templates/sponsored-text/themes/light.css
+++ b/app/views/ad_templates/sponsored-text/themes/light.css
@@ -18,6 +18,7 @@
 #cf .cf-wrapper img,
 #cf .cf-wrapper svg {
   vertical-align: middle;
+  position: relative;
 }
 
 #cf a.cf-powered-by {
diff --git a/app/views/ad_templates/square/show.html.erb b/app/views/ad_templates/square/show.html.erb
index 2a37581f8..9c332b592 100644
--- a/app/views/ad_templates/square/show.html.erb
+++ b/app/views/ad_templates/square/show.html.erb
@@ -3,7 +3,7 @@
     <span class="cf-wrapper">
       <a data-href="campaign_url" target="_blank" rel="nofollow noopener">
         <span class="cf-img-wrapper" >
-          <%= image_tag @creative.large_image.cloudfront_url, class: "cf-img", alt: @creative.name rescue nil %>
+          <%= image_tag @creative.large_image.cloudfront_url, width: 255, height: 255, class: "cf-img", alt: @creative.name rescue nil %>
         </span>
         <span class="cf-text">
           <strong><%= @creative.headline %></strong>
diff --git a/app/views/ad_templates/square/themes/dark.css b/app/views/ad_templates/square/themes/dark.css
index 969b551a6..49b9a89b4 100644
--- a/app/views/ad_templates/square/themes/dark.css
+++ b/app/views/ad_templates/square/themes/dark.css
@@ -19,7 +19,7 @@
 
 #cf .cf-wrapper {
   display: block;
-  padding: 0px;
+  padding: 0;
   font-size: 14px;
   line-height: 1.4;
   text-align: left;
@@ -40,6 +40,7 @@
   vertical-align: middle;
   border-style: none;
   width: 100%;
+  position: relative;
 }
 
 #cf .cf-text {
diff --git a/app/views/ad_templates/square/themes/light.css b/app/views/ad_templates/square/themes/light.css
index af143f596..06c8acaf3 100644
--- a/app/views/ad_templates/square/themes/light.css
+++ b/app/views/ad_templates/square/themes/light.css
@@ -19,7 +19,7 @@
 
 #cf .cf-wrapper {
   display: block;
-  padding: 0px;
+  padding: 0;
   font-size: 14px;
   line-height: 1.4;
   text-align: left;
@@ -40,6 +40,7 @@
   vertical-align: middle;
   border-style: none;
   width: 100%;
+  position: relative;
 }
 
 #cf .cf-text {
diff --git a/app/views/ad_templates/text/themes/dark.css b/app/views/ad_templates/text/themes/dark.css
index 0392e9d95..23136a656 100644
--- a/app/views/ad_templates/text/themes/dark.css
+++ b/app/views/ad_templates/text/themes/dark.css
@@ -21,7 +21,7 @@
 
 #cf .cf-hidden {
   visibility: hidden;
-  width: 0px;
-  height: 0px;
+  width: 0;
+  height: 0;
   border-style: none;
 }
diff --git a/app/views/ad_templates/text/themes/light.css b/app/views/ad_templates/text/themes/light.css
index 0392e9d95..23136a656 100644
--- a/app/views/ad_templates/text/themes/light.css
+++ b/app/views/ad_templates/text/themes/light.css
@@ -21,7 +21,7 @@
 
 #cf .cf-hidden {
   visibility: hidden;
-  width: 0px;
-  height: 0px;
+  width: 0;
+  height: 0;
   border-style: none;
 }
diff --git a/app/views/ad_templates/vertical/show.html.erb b/app/views/ad_templates/vertical/show.html.erb
index 1c1b92e7a..6816ac166 100644
--- a/app/views/ad_templates/vertical/show.html.erb
+++ b/app/views/ad_templates/vertical/show.html.erb
@@ -3,7 +3,7 @@
     <span class="cf-wrapper">
       <a data-href="campaign_url" target="_blank" rel="nofollow noopener">
         <span class="cf-img-wrapper">
-          <%= image_tag @creative.small_image.cloudfront_url, border: 0, class: "cf-img", alt: @creative.name rescue nil %>
+          <%= image_tag @creative.small_image.cloudfront_url, height: 125, width: 125, border: 0, class: "cf-img", alt: @creative.name rescue nil %>
         </span>
         <span class="cf-text">
           <strong><%= @creative.headline %></strong>
diff --git a/app/views/ad_templates/vertical/themes/dark.css b/app/views/ad_templates/vertical/themes/dark.css
index 1ca104217..a19d1ff8e 100644
--- a/app/views/ad_templates/vertical/themes/dark.css
+++ b/app/views/ad_templates/vertical/themes/dark.css
@@ -12,7 +12,7 @@
 
 #cf .cf-wrapper {
   display: block;
-  padding: 0px;
+  padding: 0;
   font-size: 14px;
   line-height: 1.4;
   text-align: left;
@@ -30,6 +30,7 @@
 #cf .cf-img-wrapper img {
   width: 125px;
   height: 125px;
+  position: relative;
 }
 
 #cf .cf-text {
diff --git a/app/views/ad_templates/vertical/themes/light.css b/app/views/ad_templates/vertical/themes/light.css
index dd723a7aa..8ccaa7f1a 100644
--- a/app/views/ad_templates/vertical/themes/light.css
+++ b/app/views/ad_templates/vertical/themes/light.css
@@ -12,7 +12,7 @@
 
 #cf .cf-wrapper {
   display: block;
-  padding: 0px;
+  padding: 0;
   font-size: 14px;
   line-height: 1.4;
   text-align: left;
@@ -30,6 +30,7 @@
 #cf .cf-img-wrapper img {
   width: 125px;
   height: 125px;
+  position: relative;
 }
 
 #cf .cf-text {