From 207db41919becd042f79f66d8892840724dddb35 Mon Sep 17 00:00:00 2001
From: Tatiana Iskandar <tatermelon@users.noreply.github.com>
Date: Mon, 10 Apr 2017 00:53:07 -0700
Subject: [PATCH] Feed Example: Fix Styling Dependency on table.css (pull #349)

For feed example development issue #246, fix styling problems that resulted from removal of examples/css/table.css as described in issue #338.

This fixes infinite scroll FF.
---
 examples/feed/css/feedDisplay.css | 34 ++++++++++++++++++++++++++-----
 examples/feed/feedDisplay.html    |  2 +-
 examples/feed/js/feedDisplay.js   |  6 +++++-
 3 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/examples/feed/css/feedDisplay.css b/examples/feed/css/feedDisplay.css
index 9babd85420..29838df49a 100644
--- a/examples/feed/css/feedDisplay.css
+++ b/examples/feed/css/feedDisplay.css
@@ -1,21 +1,42 @@
+body {
+  background: #fafafa;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
 #sidepanel {
+  box-sizing: border-box;
   display: inline-block;
+  padding-left: 1.5em;
   vertical-align: top;
   width: 29%;
 }
 
+#delay-time-select {
+  display: block;
+  margin-top: 5px;
+  width: 10em;
+}
+
 #main-content {
   display: inline-block;
   vertical-align: top;
+  min-width: 250px;
   width: 70%;
 }
 
 #restaurant-feed {
-  margin-top: 30px;
+  max-width: 100%;
   width: 500px;
 }
 
+@media screen and (max-width: 560px) {
+  #main-content {
+    width: 100%;
+  }
+}
+
 .restaurant-item {
+  background: white;
   box-shadow: 1px 1px 6px #bbb;
   margin-bottom: 15px;
   padding-top: 15px;
@@ -26,7 +47,7 @@
   margin-bottom: 10px;
   padding-left: 15px;
   vertical-align: top;
-  width: 270px;
+  width: 55%;
 }
 
 .restaurant-name {
@@ -39,19 +60,22 @@
 }
 
 .restaurant-type {
-  color: #999;
+  color: #777;
   font-size: 13px;
 }
 
 .location-block {
+  color: #777;
   display: inline-block;
-  padding-top: 5px;
   vertical-align: top;
+  margin: 0 15px 10px;
+  font-size: 14px;
+  line-height: 1.3em;
 }
 
 .restaurant-actions {
   box-sizing: border-box;
-  background: #d8d0c5;
+  background: #a2afbc;
   padding: 10px;
   width: 100%;
 }
diff --git a/examples/feed/feedDisplay.html b/examples/feed/feedDisplay.html
index 218823b6d9..e4b6f221ab 100644
--- a/examples/feed/feedDisplay.html
+++ b/examples/feed/feedDisplay.html
@@ -22,7 +22,7 @@ <h2>Recommended Restaurants</h2>
       </div>
     </section>
     <section id="sidepanel">
-      Sidepanel goes here
+      <label for="delay-time-select">Select article loading delay</label>
       <select id="delay-time-select" name="delay_time">
         <option value="200">200 ms</option>
         <option value="400">400 ms</option>
diff --git a/examples/feed/js/feedDisplay.js b/examples/feed/js/feedDisplay.js
index cd5cf9178c..eb7ec6c9b1 100644
--- a/examples/feed/js/feedDisplay.js
+++ b/examples/feed/js/feedDisplay.js
@@ -269,7 +269,11 @@ aria.FeedDisplay.prototype.checkLoadMore = function () {
   }
 
   var lastFeedItem = this.feedItems[this.feedItems.length - 1];
-  var scrollBottom = document.body.scrollTop + window.innerHeight;
+  var scrollTop = window.pageYOffset
+                  || document.documentElement.scrollTop
+                  || document.body.scrollTop
+                  || 0;
+  var scrollBottom = scrollTop + window.innerHeight;
 
   if (scrollBottom >= (lastFeedItem.offsetTop - 300)) {
     this.loadData();