promo banner (chart.js dashboard challenge)

hopkinschris · Jul 17, 2013 · 3a58506 · 3a58506
1 parent f390977
commit 3a58506
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 0 deletions.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -1,6 +1,7 @@
 /*
  *= require_self
  *= require jquery.gridster
+ *= require promo
  *= require reset
  *= require_tree .
  */
diff --git a/app/assets/stylesheets/promo.scss b/app/assets/stylesheets/promo.scss
@@ -0,0 +1,43 @@
+#promo {
+  width: 100%;
+  background: #f6f6f6;
+  #wrapper {
+    max-width: 940px;
+    margin: 0 auto;
+    ul {
+      padding: 20px 10px;
+      list-style: none;
+      text-align: center;
+      li {
+        font-size: 17px;
+        line-height: 1.5em;
+        span {
+          font-family: "proxima_novasemibold", 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        }
+        a {
+          text-decoration: none;
+          border-bottom: 1px solid;
+          color: #0881b3;
+        }
+        &#social {
+          width: 165px;
+          height: 25px;
+          margin: 0 auto;
+          margin-top: 10px;
+          &:after {
+            content: "";
+            display: table;
+            clear: both;
+          }
+          .twitter-share-button {
+            width: 85px!important;
+            float: left;
+          }
+          .fb-like {
+            float: right;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/app/views/layouts/_facebook.html.erb b/app/views/layouts/_facebook.html.erb
@@ -0,0 +1,10 @@
+<div id="fb-root"></div>
+<script>(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) return;
+  js = d.createElement(s); js.id = id;
+  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=572443009461110";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script>
+
+<div class="fb-like" data-href="http://api.chocol.it" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
diff --git a/app/views/layouts/_fb_og.html b/app/views/layouts/_fb_og.html
@@ -0,0 +1,4 @@
+<meta property="og:image" content="http://api.chocol.it/assets/logo-fdfdb15cd2de11b88d4faf2f6f380287.png"/>
+<meta property="og:title" content="A personal statistics dashboard and API."/>
+<meta property="og:url" content="http://api.chocol.it"/>
+<meta property="og:site_name" content="api.chocol.it"/>
diff --git a/app/views/layouts/_promo.html.erb b/app/views/layouts/_promo.html.erb
@@ -0,0 +1,21 @@
+<div id="promo" style="display:none;">
+  <div id="wrapper">
+    <ul>
+      <li>
+        <span>Like this dashboard?</span> Vote for it starting July 17 until July 31 in the <a href="http://chartjs.challengepost.com/submissions/16508-api-chocol-it">Chart.js Dashboard Challenge</a>.
+      </li>
+      <li id="social">
+        <%= render 'layouts/twitter' %>
+        <%= render 'layouts/facebook' %>
+      </li>
+    </ul>
+  </div>
+</div>
+
+<script type="text/javascript">
+  $(document).ready(function() {
+    setTimeout(function() {
+      $('#promo').slideDown('slow');
+    }, 5000)
+  })
+</script>
diff --git a/app/views/layouts/_twitter.html b/app/views/layouts/_twitter.html
@@ -0,0 +1,2 @@
+<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://api.chocol.it" data-text="I supported @hopkinschris in the Chart.js Dashboard Challenge here http://cpo.st/1bmi7Yf — for his dashboard:" data-related="hopkinschris">Tweet</a>
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -5,6 +5,7 @@
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <%= render 'layouts/fb_og' %>
   <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/114x114.png">
   <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/72x72.png">
   <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../assets/57x57.png">
@@ -15,6 +16,7 @@
   <%= render 'layouts/ga' %>
 </head>
 <body>
+  <%= render 'layouts/promo' %>
   <%= render 'layouts/header' %>
   <section>
     <%= yield %>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://api.chocol.it" data-text="I supported @hopkinschris in the Chart.js Dashboard Challenge here http://cpo.st/1bmi7Yf — for his dashboard:" data-related="hopkinschris">Tweet</a>
		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>