diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index e3a9f2d..08cb29b 100644 --- a/app/assets/javascripts/application.js +++ b/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 . diff --git a/app/assets/javascripts/pins.js.coffee b/app/assets/javascripts/pins.js.coffee index 24f83d1..db808e6 100644 --- a/app/assets/javascripts/pins.js.coffee +++ b/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" diff --git a/app/assets/stylesheets/styles.css.scss b/app/assets/stylesheets/styles.css.scss index 90a5014..31f72ee 100644 --- a/app/assets/stylesheets/styles.css.scss +++ b/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; +} diff --git a/app/controllers/pins_controller.rb b/app/controllers/pins_controller.rb index e0d01a7..ea2d322 100644 --- a/app/controllers/pins_controller.rb +++ b/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 diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb index 5db85cd..5d177d2 100644 --- a/app/views/layouts/_header.html.erb +++ b/app/views/layouts/_header.html.erb @@ -20,6 +20,7 @@