v1 version of results page + footer

Author: benparsons

main.js

@@ -35,6 +35,7 @@ function initialiseGlyphs() {
   most_hated = {};
 
   $.get("/get-emoji/" + window.location.pathname.split('/')[2], function(data) {
+    $(".results_link").attr("href", "/results/" + data[0].unicode_value);
     $("#emoji_name").html(data[0].emoji_name);
     document.title = "EmojiRank: " + data[0].emoji_name;
     data = shuffle(data);

results.html

@@ -28,11 +28,6 @@ <h1 id="emoji_name"></h1>
       There are no votes for this emoji yet, why don't you <a class="vote_link" href="/">cast the first vote</a>?
     </div>
     <table id="glyph_rows">
-      <tr>
-        <th>Negative</th>
-        <th>Vendor</th>
-        <th>Positive</th>
-      </tr>
     </table>
     <div style="display: none;">
       <table id="table_by_like">
@@ -48,9 +43,7 @@ <h1 id="emoji_name"></h1>
     </div>
   </main>
   <footer>
-    <div id="option"><a href="http://www.facebook.com/emojirank">Feedback</a></div>
     <div id="option"><a class="vote_link" href="/">Vote</a></div>
-    <div id="option"><a href="/next">Next</a></div>
     <div id="footer_text"><div class="addthis_inline_share_toolbox"></div></div>
   </footer>
   <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-58a70a324daea26b"></script> 

results.js

@@ -12,7 +12,12 @@ $(document).ready(function() {
 
   $.get('/reset-glyph-stats/' + unicode_value, function(data) {
     getData();
-  }); 
+  });
+});
+
+$( window ).resize(function() {
+  $("#glyph_rows").empty()
+  renderGlyphScoreRows();
 });
 
 function like_comparison(a, b) {
@@ -66,39 +71,7 @@ function getData() {
       $("#glyph_rows").hide();
     }
 
-    emoji_array.sort(glyph_score_comparison);
-
-    for (i in emoji_array) {
-      var emoji = emoji_array[i];
-
-      var glyph_bar = $("<div>");
-      glyph_bar.addClass("crisp");
-      glyph_bar.css("width", Math.abs(emoji.glyph_score) * 2);
-      glyph_bar.css("height", 36);
-      glyph_bar.css("background-image", 'url(' + image_prefix + emoji.unicode_value + "_" + emoji.vendor_name + ".png)");
-      glyph_bar.css("background-repeat", "repeat-x");
-      glyph_bar.css("background-size", "36px 36px");
-
-      var glyph_row = $("<tr>");
-      glyph_row.addClass("glyph_row");
-
-      var negative_column = $("<td>");
-      if (emoji.glyph_score < 0) {
-        glyph_bar.addClass("negative_bar");
-        negative_column.append(glyph_bar);
-      }
-      glyph_row.append(negative_column);
-
-      glyph_row.append($("<td style=\"text-align: center;\">").text(emoji.vendor_name));
-
-      var positive_column = $("<td>");
-      if (emoji.glyph_score > 0) {
-        positive_column.append(glyph_bar);
-      }
-      glyph_row.append(positive_column);
-
-      $("#glyph_rows").append(glyph_row);
-    }
+    renderGlyphScoreRows();
 
     return;
 
@@ -124,4 +97,48 @@ function getData() {
       $("#table_by_hate").append(tr);
     }
   });
+}
+
+function renderGlyphScoreRows() {
+  emoji_array.sort(glyph_score_comparison);
+
+  var barWidth = ($("#glyph_rows").width() / 2) - 40;
+
+  var header = $("<tr><th>Negative</th><th>Vendor</th><th>Positive</th></tr>");
+
+  $("#glyph_rows").append(header);
+
+  for (i in emoji_array) {
+    var emoji = emoji_array[i];
+    console.log(emoji.vendor_name + " " + emoji.glyph_score);
+
+
+    var glyph_bar = $("<div>");
+    glyph_bar.addClass("crisp");
+    glyph_bar.css("width", Math.abs(emoji.glyph_score) * barWidth/100);
+    glyph_bar.css("height", 36);
+    glyph_bar.css("background-image", 'url(' + image_prefix + emoji.unicode_value + "_" + emoji.vendor_name + ".png)");
+    glyph_bar.css("background-repeat", "repeat-x");
+    glyph_bar.css("background-size", "36px 36px");
+
+    var glyph_row = $("<tr>");
+    glyph_row.addClass("glyph_row");
+
+    var negative_column = $("<td>");
+    if (emoji.glyph_score < 0) {
+      glyph_bar.addClass("negative_bar");
+      negative_column.append(glyph_bar);
+    }
+    glyph_row.append(negative_column);
+
+    glyph_row.append($("<td style=\"text-align: center;\">").text(emoji.vendor_name));
+
+    var positive_column = $("<td>");
+    if (emoji.glyph_score > 0) {
+      positive_column.append(glyph_bar);
+    }
+    glyph_row.append(positive_column);
+
+    $("#glyph_rows").append(glyph_row);
+  }
 }

style.css

@@ -125,6 +125,7 @@ table#glyph_rows {
   margin: auto;
   padding: 20px;
   padding-bottom: 50px;
+  width: 100%;
 }
 
 .glyph_row {

vote.html

@@ -37,8 +37,7 @@ <h3>World rankings</h3>
     </div>
   </main>
   <footer>
-    <div id="option"><a href="http://www.facebook.com/emojirank">Feedback</a></div>
-    <!--div id="option"><a href="/stats">Stats</a></div-->
+    <div id="option"><a class="results_link" href="/">Results</a></div>
     <div id="option"><a href="/next">Next</a></div>
     <div id="footer_text"><div class="addthis_inline_share_toolbox"></div></div>
   </footer>