Add jQuery Masonry

app/assets/javascripts/application.js

@@ -12,5 +12,6 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require jquery.masonry.min.js
 //= require bootstrap
-//= require_tree .
+//= 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://jashkenas.github.com/coffee-script/
+
+jQuery ->
+	$('#pins').imagesLoaded ->
+		$('#pins').masonry itemSelector: ".box"

app/assets/stylesheets/styles.css.scss

@@ -27,4 +27,32 @@ body {
 	a {
 		color: $gray;
 	}
+}
+
+/* required for jQuer Masonry */
+
+.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 {
+	display:block;
+	width: 100%;
+	-webkit-border-radius: 5px;
+	moz-border-radius: 5px;
+	border-radius: 5px;
+	box-shadow: 1px, 1px, 10px, #444;	
+}
+
+.description {
+	margin: 10px 0 5px;
 }

app/controllers/pins_controller.rb

@@ -4,7 +4,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/models/pin.rb

@@ -9,6 +9,6 @@ class Pin < ActiveRecord::Base
   								size: { less_than: 5.megabytes }
 
   belongs_to :user
-
+  has_attached_file :image, styles: { medium: "320x240>"}
 
 end

app/views/layouts/_header.html.erb

@@ -21,6 +21,7 @@
 
 		<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/pins/_pin.html.erb

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

app/views/pins/index.html.erb

@@ -1,21 +1,3 @@
-<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 />
-
-<%= link_to 'New Pin', new_pin_path %>
+<div id="pins">
+  <%= render @pins %>
+</div>