diff --git a/less/factlist.less b/less/factlist.less index 6b43532..5235326 100644 --- 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 index 3dbbbe8..d01c234 100644 --- a/templates/factlist.html +++ b/templates/factlist.html @@ -47,6 +47,7 @@

What we know

+
@@ -87,4 +88,4 @@

What we know

{{ JS.push('js/lib/moment.js') }} {{ JS.push('js/factlist.js') }} {{ JS.render('js/factlist.min.js') }} -{% endblock extra_foot_js %} \ No newline at end of file +{% endblock extra_foot_js %} diff --git a/www/js/factlist.js b/www/js/factlist.js index f596d4e..d7603c6 100644 --- 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);