Merge pull request jsonwebtoken#213 from jsonwebtoken/banner-rotate

Added ability to rotate banners

Author: diegopoza

js/app.js

@@ -719,6 +719,18 @@ $('.stars').each(function(idx, element){
     }
 });
 
+function rotateBanner() {
+    var extensionSection = $(".update-site");
+    var ebookSection = $(".jtw-ebook-banner");
+    if (Math.random() >= .5) {
+        extensionSection.show();
+    } else {
+        ebookSection.show();
+    }
+};
+
+rotateBanner();
+
 function setInstalledText() {
     var button = $('#extension-button');
     if(button && button.hasClass('is-installed')) {

stylus/app.styl

@@ -338,6 +338,7 @@ body
         width 80px
 
 .update-site
+  display: none;
   background: #e3e5e7
   padding: 30px 20px;
   font-size: 18px;
@@ -394,6 +395,29 @@ body
       line-height: 33px;
       display: inline-block;
 
+// jtw ebook banner
+.jtw-ebook-banner
+  display: none;
+  background: #e3e5e7;
+  padding: 30px 20px;
+  font-size: 18px;
+  text-align: center;
+  color: darken(#e3e5e7, 70%);
+
+  +breakpoint("desktop")
+    padding: 30px 0;
+
+  .btn-download-ebook
+    padding: 8px 24px;
+    margin: 0px auto 0 11px;
+    color: #fff;
+    border-radius: 3px;
+    background-color: #00b9f1;
+    font-size: 14px;
+    font-weight: bold;
+    text-transform: uppercase;
+    text-align: center;
+    text-decoration: none;
 
 // debugger-jwt
 

views/index.jade

@@ -57,7 +57,11 @@ block content
           use(fill='#FFFFFF', fill-rule='evenodd', xlink:href='#path-1')
 
       span.button-text Add to chrome
-
+  section.jtw-ebook-banner
+    span
+      strong Get the JWT Handbook for free! 
+      |Spread the word and download it now.
+    a.btn.btn-download-ebook(href='https://auth0.com/e-books/jwt-handbook', target='_blank') Download Ebook
   section#debugger-io.debugger-jwt
     .container
       //- a(name='debugger')