Fix button styling issue on home page

app/assets/javascripts/pins.js.coffee

@@ -5,3 +5,13 @@
 jQuery ->
 	$('#pins').imagesLoaded ->
 		$('#pins').masonry itemSelector: ".box"
+
+# Added Pagination Code here
+	if $('.pagination').length
+        $(window).scroll ->
+            url = $('.pagination .next_page a').attr('href')
+            if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
+                # What to do at the bottom of the page
+                $('.pagination').text("Fetching more pins...")
+                $.getScript(url)
+            $(window).scroll()

app/assets/stylesheets/scaffolds.css.scss

@@ -21,11 +21,12 @@ pre {
 a {
   color: #000;
   &:visited {
-    color: #666;
+    color: #fff;
   }
   &:hover {
     color: #fff;
-    background-color: #000;
+    /* 
+    background-color: #000; */
   }
 }
 

app/assets/stylesheets/styles.css.scss

@@ -7,7 +7,7 @@ $baseFontFamily: Oxygen;
 @import url(http://fonts.googleapis.com/css?family=Oxygen);
 
 /* Change button Color */
-$btnPrimaryBackground: purple;
+$btnPrimaryBackground: #00BFFF;
 $navbarBackgroundHighlight: white;
 $navbarBackground: white;
 

app/controllers/pins_controller.rb

@@ -11,6 +11,7 @@ def index
     respond_to do |format|
       format.html # index.html.erb
       format.json { render json: @pin }
+      format.js
     end
   end
 
@@ -21,6 +22,7 @@ def show
     respond_to do |format|
       format.html # show.html.erb
       format.json { render json: @pin }
+      format.js
     end
   end
 

app/views/layouts/application.html.erb

@@ -14,7 +14,9 @@
                 <%= content_tag(:div, msg, class: "alert alert-#{name}") %>
             <% end %>
 			<%= yield %>
-			<%= render 'layouts/footer' %>
+			<div class="container">
+				<%= render 'layouts/footer' %>
+			</div>
 		</div>
 	</body>
 </html>

app/views/pins/index.js.erb

@@ -0,0 +1,10 @@
+$boxes = $('<%= j render(@pins) %>')
+
+$('#pins').append( $boxes ).imagesLoaded( function(){
+    $('#pins').masonry( 'reload');
+});
+<% if @pins.next_page %>
+    $('.pagination').replaceWith('<%= j will_paginate(@pins) %>');
+<% else %>
+    $('.pagination').remove();
+<% end %>

app/views/pins/show.js.erb

@@ -0,0 +1,10 @@
+$boxes = $('<%= j render(@pins) %>')
+
+$('#pins').append( $boxes ).imagesLoaded( function(){
+    $('#pins').masonry( 'reload');
+});
+<% if @pins.next_page %>
+    $('.pagination').replaceWith('<%= j will_paginate(@pins) %>');
+<% else %>
+    $('.pagination').remove();
+<% end %>