From 178320372079d2b186b5a291204187baebbccdf8 Mon Sep 17 00:00:00 2001 From: Neil Gehani Date: Thu, 19 Sep 2013 16:14:21 -0700 Subject: [PATCH] Add jQuery Masonry --- app/assets/javascripts/application.js | 1 + app/assets/javascripts/pins.js.coffee | 4 +++ app/assets/stylesheets/styles.css.scss | 27 +++++++++++++++++++ app/controllers/pins_controller.rb | 2 +- app/views/layouts/_header.html.erb | 1 + app/views/pages/home.html.erb | 1 + app/views/pins/_pin.html.erb | 24 +++++++++++------ app/views/pins/index.html.erb | 22 +++------------ .../assets/javascripts/jquery.isotope.min.js | 13 +++++++++ .../assets/javascripts/jquery.masonry.min.js | 10 +++++++ 10 files changed, 77 insertions(+), 28 deletions(-) create mode 100644 vendor/assets/javascripts/jquery.isotope.min.js create mode 100644 vendor/assets/javascripts/jquery.masonry.min.js 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 @@