add facebook ratio to factlist and scale #2 #7

voxmedia · Aug 9, 2017 · 0ab8ba2 · 0ab8ba2
1 parent 427573e
commit 0ab8ba2
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 7 deletions.
diff --git a/less/factlist.less b/less/factlist.less
@@ -145,7 +145,7 @@ canvas {
         -webkit-box-shadow: none;
         box-shadow: none;
     }
-    
+
     label {
         display: block;
         font-weight: normal;
@@ -190,6 +190,12 @@ canvas {
                 width: @logo-16x9-width + @padding;
                 height: @logo-16x9-height + @padding;
             }
+
+            .facebook-ratio& {
+                background-size: @logo-fb-ratio-width @logo-fb-ratio-height;
+                width: @logo-fb-ratio-width + @padding;
+                height: @logo-fb-ratio-height + @padding;
+            }
         }
     }
 
@@ -210,6 +216,12 @@ canvas {
                 width: @theme2-16x9-logo-width + @padding;
                 height: @theme2-16x9-logo-height + @padding;
             }
+
+            .facebook-ratio& {
+                background-size: @theme2-fb-ratio-logo-width @theme2-fb-ratio-logo-height;
+                width: @theme2-fb-ratio-logo-width + @padding;
+                height: @theme2-fb-ratio-logo-height + @padding;
+            }
         }
     }
 
@@ -230,7 +242,13 @@ canvas {
                 background-size: @theme3-16x9-logo-width @theme3-16x9-logo-height;
                 width: @theme3-16x9-logo-width + @padding;
                 height: @theme3-16x9-logo-height + @padding;
-            }          
+            }
+
+            .facebook-ratio& {
+                background-size: @theme3-fb-ratio-logo-width @theme3-fb-ratio-logo-height;
+                width: @theme3-fb-ratio-logo-width + @padding;
+                height: @theme3-fb-ratio-logo-height + @padding;
+            }
         }
     }
 
@@ -251,6 +269,12 @@ canvas {
                 width: @theme4-16x9-logo-width + @padding;
                 height: @theme4-16x9-logo-height + @padding;
             }
+
+            .facebook-ratio& {
+                background-size: @theme4-fb-ratio-logo-width @theme4-fb-ratio-logo-height;
+                width: @theme4-fb-ratio-logo-width + @padding;
+                height: @theme4-fb-ratio-logo-height + @padding;
+            }
         }
     }
 
@@ -283,6 +307,35 @@ canvas {
         }
     }
 
+    &.facebook-ratio {
+        width: 600px;
+        height: 315px;
+        padding: @padding;
+
+        .quote& {
+            .left-quote {
+                top: @padding;
+                left: @padding;
+            }
+        }
+
+        blockquote {
+            margin-bottom: 20px;
+        }
+
+        .logo-wrapper {
+            padding: @padding;
+
+            img {
+                width: 150px;
+            }
+
+            .poster-music& {
+                padding-bottom: @padding - 10;
+            }
+        }
+    }
+
     h2 {
         text-transform: uppercase;
         letter-spacing: 0.05em;
@@ -292,7 +345,7 @@ canvas {
         margin-bottom: 1em;
         overflow: hidden;
     }
-    
+
     .kicker {
         white-space: nowrap;
     }
@@ -376,6 +429,12 @@ canvas {
             height: @logo-16x9-height + @padding;
         }
 
+        .facebook-ratio& {
+            background-size: @logo-fb-ratio-width @logo-fb-ratio-height;
+            width: @logo-fb-ratio-width + @padding;
+            height: @logo-fb-ratio-height + @padding;
+        }
+
         .logo {
             .hide;
         }

diff --git a/templates/factlist.html b/templates/factlist.html
@@ -47,6 +47,7 @@ <h2 class="kicker-wrapper"><span class="kicker">What we know</span></h2>
                         <label for="aspect-ratio">Aspect ratio</label>
                         <div id="aspect-ratio" class="btn-group">
                             <button id="sixteen-by-nine" class="btn btn-primary active">16:9 <i class="fa fa-twitter"></i></button>
+                            <button id="facebook-ratio" class="btn btn-primary"><i class="fa fa-facebook"></i></button>
                             <button id="square" class="btn btn-primary">Square</button>
                         </div>
                     </div>
@@ -87,4 +88,4 @@ <h2 class="kicker-wrapper"><span class="kicker">What we know</span></h2>
 {{ JS.push('js/lib/moment.js') }}
 {{ JS.push('js/factlist.js') }}
 {{ JS.render('js/factlist.min.js') }}
-{% endblock extra_foot_js %}
+{% endblock extra_foot_js %}
diff --git a/www/js/factlist.js b/www/js/factlist.js
@@ -44,7 +44,7 @@ var onDocumentLoad = function() {
     updateTimestamp();
     timestampInterval = setInterval(updateTimestamp, 1000);
     setupMediumEditor();
-    
+
     $('[data-toggle="tooltip"]').tooltip();
 }
 
@@ -121,6 +121,7 @@ var saveImage = function() {
 
     html2canvas($poster, {
       letterRendering: true,
+      scale: 2,
       onrendered: function(canvas) {
         document.body.appendChild(canvas);
         window.oCanvas = document.getElementsByTagName("canvas");
@@ -171,9 +172,9 @@ var onThemeClick = function(e) {
 var onAspectRatioClick = function(e) {
     $aspectRatioButtons.removeClass().addClass('btn btn-primary');
     $(this).addClass('active');
-    $poster.removeClass('square sixteen-by-nine').addClass($(this).attr('id'));
+    $poster.removeClass('square sixteen-by-nine facebook-ratio').addClass($(this).attr('id'));
 
-    if ($poster.hasClass('sixteen-by-nine')) {
+    if ($poster.hasClass('sixteen-by-nine') || $poster.hasClass('facebook-ratio')) {
         $fontSize.attr('min', 24);
         $fontSize.val(24);
         adjustFontSize(null, 32);