Add jQuery Masonry

app/assets/javascripts/application.js

@@ -12,6 +12,7 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require jquery.masonry.min.js
 //= require bootstrap
 //= require turbolinks
 //= require_tree .

app/assets/javascripts/pins.js.coffee

@@ -1,3 +1,7 @@
 # Place all the behaviors and hooks related to the matching controller here.
 # All this logic will automatically be available in application.js.
 # You can use CoffeeScript in this file: http://coffeescript.org/
+
+jQuery ->
+	$('#pins').imagesLoaded ->
+		$('#pins').masonry itemSelector: ".box"

app/assets/stylesheets/styles.css.scss

@@ -30,3 +30,30 @@ body{
         color: $gray;
     }
 }
+
+/* Required for jQuery Masonry */
+/* anything beginning with a . is a class and used in views as class = "blah" */
+
+.box {
+    margin: 5px;
+    padding: 5px;
+    font-size: 11px;
+    line-height: 1.4em;
+    float: left;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    box-shadow: 1px 1px 10px #444;
+    width: 214px;
+}
+
+.box img {
+    width: 100%;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.description {
+    margin: 10px 0 5px;
+}

app/controllers/pins_controller.rb

@@ -5,7 +5,7 @@ class PinsController < ApplicationController
   # GET /pins
   # GET /pins.json
   def index
-    @pins = Pin.all
+    @pins = Pin.order("created_at desc")
 
     respond_to do |format|
       format.html # index.html.erb

app/views/layouts/_header.html.erb

@@ -20,6 +20,7 @@
                     </ul>
                     <ul class="nav pull-right">
                         <% if user_signed_in? %>
+                            <li><%= link_to "Add +", new_pin_path %></li>
                             <li><%= link_to "Edit Profile", edit_user_registration_path %></li>
                             <li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
                         <% else %>

app/views/pages/home.html.erb

@@ -10,6 +10,7 @@
 </p>
 <p>
 	<%= link_to "Sign Up Now!", new_user_registration_path, class: "btn btn-primary btn-large" %>
+	<%= link_to "Sign In", new_user_session_path, class: "btn btn-primary btn-large" %>
 </p>
 </div>
 <% end %>

app/views/pins/_pin.html.erb

@@ -1,10 +1,18 @@
-
-<tr>
-	<td><%= image_tag pin.image(:medium) %></td>
-	<td><%= pin.description %></td>
-	<td><%= link_to 'Show', pin %></td>
+<div class="box">
+	<%= link_to (image_tag pin.image(:medium)), pin %>
+	<p class= "description">
+		<%= pin.description %>
+	</p>
+	<p>
+		<strong>
+			<%= link_to 'Show', pin %>
+		</strong>
+	</p>
 	<% if current_user == pin.user %>
-		<td><%= link_to 'Edit', edit_pin_path(pin) %></td>
-		<td><%= link_to 'Destroy', pin, method: :delete, data: { confirm: 'Are you sure?' } %></td>
+	<p>
+		<%= link_to 'Edit', edit_pin_path(pin) %>
+		<%= link_to 'Destroy', pin, method: :delete, data: { confirm: 'Are you sure?' } %>
+	</p>
 	<% end %>
-</tr>
+</div>
+

app/views/pins/index.html.erb

@@ -1,21 +1,5 @@
-<h1>Listing pins</h1>
-
-<table class="table table-striped">
-  <thead>
-    <tr>
-      <th>Image</th>
-      <th>Description</th>
-      <th></th>
-      <th></th>
-      <th></th>
-    </tr>
-  </thead>
-
-  <tbody>
-      <%= render @pins %>
-  </tbody>
-</table>
-
-<br>
+<div id="pins">
+  <%= render @pins %>
+</div>
 
 <%= link_to 'New Pin', new_pin_path %>