Space within columns on twitter bootstrap - ruby-on-rails

I'm pulling pictures via the Facebook API and that I'm trying to split the pictures into three columns, using twitter bootstrap and the rails koala gem.
The pictures separate into columns ok, but the spacing within the columns is very lumpy. Sometimes there will be a huge gap within a column between pictures. It seems to be because there is a much longer picture in one of the other columns.
Is there a way to make sure that pictures show up more fluidly?
Here is my code. Thank you
<div class = "row-fluid">
<div class ="span16">
<% #album = #graph.get_connections("me", "albums") %>
<% #album.each do |result| %>
<% #photos = #graph.get_connections("#{result['id']}", "photos") %>
<% #photos.each do |result| %>
<div class ="span3">
<img src="<%= result["source"] %>">
</div>
<% end %>
<% end %>
</div>
</div>

If your grid system is 16 columns (span16) and you want to display images into span3 divs you have to split them into 5elements per row, cause span3*5=span15 so your code should have a loop that count elements and each 5 close the row and opens another.

Related

Rails HTML Multi Layered IF checking

I am working on a layout that requires a couple of checks to the database, but I cannot figure out the logic on the IF statement. I have a People table where each record holds a Position field. There are times that specific positions will be held by two people. In which cases they want to be Co-Position. So I current am listing said Position on my page with:
<li>
<% #people.each do |person| %>
<% if person.position == 'Office1' %>
<div class="image">
<%= link_to(person_path) do %>
<%= image_tag("profiles/#{person.uname}S.jpg") %>
<% end %>
</div>
<div class="body2">
<h4>Office</h4>
<%= link_to(person_path) do %>
<h5><%= person.fname %> <%= person.lname %></h5>
<% end %>
</div>
<% end %>
<% end %>
</li>
Now within that I need to run a check at <h4>Office</h4> to see if another record holds Office2, but if I place an IF statement around the H4 tags will it be checking the already fetched record or will it check the entirety of the Person database? Do I need to do this check first and then do an IF/Then or can this be done in a more streamlined way?
Basically I need to check if Office2 is present somewhere in the Position field, and if it is I need the H4 to read Co-Office, else I need it to read Office.
If your condition is if person.position.include?('Office2') then no, it won't touch the database again. The person object is loaded with all its attributes.

How to display music in a category when a category is clicked (without a page refresh) in Ruby on Rails?

I am building a website for a music database.
I would like to display categories like classical and hip hop first; when the user clicks on a category, I would like to display all the tracks names in that category (I would like to do this without a page refresh). I would also need to support pagination of this list displaying 10 items in one page (and I need to display buttons for display, edit, delete alongside each track in this list)
How can I accomplish this? Does bootstrap provide components that support this kind of implementation?
(If I could do this with a page refresh, I have done this before and I would know how to do it. But I am not sure how to do this without a page refresh)
On views/categories/index.html.erb:
<% #categories.each do |category| %>
<%= link_to category_path(category), :remote => true do %>
<%= category.name %>
<% end %>
<div class="category_<%= category.id %>">
</div>
<% end %>
Then create a partial views/categories/_show.html.erb (here you can insert a table or a structure with bootstrap row and columns):
<% #category.tracks.each do |track| %>
<%= track.name %>
... and you can add here delete and edit actions
<% end %>
Then create views/categories/show.js.erb:
$(".category_<%= #category.id %>").html("<%= escape_javascript(render("show")) %>");
Fyi what you are trying to do has nothing to do with bootstrap, unless you wanted for instance display tracks on a bootstrap modal.
Here is a poor man's bootstrap example I whipped up: when you click on the Track Category example, the table should expand. (You must have bootstrap v4 set up for this to work) and you must have a track_table partial as well - you can use the same partial for the two different tables that you want:
<div class="track-group">
<div class="track track-default">
<div class="track-heading">
<h4 class="track-title">
<p data-toggle="collapse" href="#collapse1"> Track Category (Click to Expand)</p>
</h4>
</div>
<div id="collapse1" class="track-collapse collapse">
<div class="track-body">
<%= render 'track-table' %>
</div>
<div class="track-footer">
</div>
</div>
</div>
</div>
Here's how it looks with an existing app on my computer:

Updating all with a dictionary in Rails

I have a small CMS-like program that has multiple pages that act like blog posts. Each page has content, and a position integer that identifies in what order they will appear on the page.
On my admin side, I have a draggable list of pages that I can reorder similar to how wordpress orders plugins. The page works as functions, and assigns the value of the dragged position to each page correctly. However, since all sortable pages have their own form, I cannot submit them all at once - only one at a time.
As an example, my code looks like this currently:
<div class="sortable">
<% #pages.each do |page| %>
<div class="dragBox">
<%= form_for(page) do |f| %>
<%= f.number_field :position, class: 'inPosition' %>
<% end %>
</div>
<% end %>
</div>
Because I can get every page_id tied to its new position, is it possible to submit those values in a new hash to get updated all at once in the controller? How would I go about doing this? Is there a better or easier way to do this? Thanks.

combining 2 tables, looping through the results and displaying items from each

So I'm trying to combine two tables and show the results in order of the start_date.
I've tried a few things but because its technically a nested loop its giving me double results for each item.
The code i currently have is as follows
<% #subcategory = Subcategory.all %>
<% #product = Product.all %>
<% (#product + #subcategory).each do |product, subcategory|%>
<% if product.display_on_home_page and !product.is_highlight_product and !(product == '..') or subcategory.
display_on_home_page and !subcategory.is_highlight_product and !(subcategory == '..')%>
<div class="column_entry">
<%= link_to image_tag(subcategory.image_attachment.url(:normal_page_size)), subcategories_content_url(subcategory.id), :controller=>'subcategories' %>
</div>
<% end %>
<% if product.price_from %>
<div class="column_entry">
<div class="product_special">
<span class="a">From Only</span>
<span class="b"><%= number_to_currency(product.price,:unit=>'€') %></span>
</div>
<%= link_to image_tag(product.product_image.url(:normal_page_size)), products_content_url(product.id), :controller=>'products' %>
</div>
<% else %>
<div class="column_entry">
<div class="product_special">
<span class="a">Only</span>
<span class="b"><%= number_to_currency(product.price,:unit=>'€') %></span>
</div>
<%= link_to image_tag(product.product_image.url(:normal_page_size)), products_content_url(product.id), :controller=>'products' %>
</div>
<% end %>
<% end %>
I know this is quite a long an complex statement, its supposed to loop through all of the subcategories and all of the products and display the images, there are also two different ways of displaying the price based on a boolean that says whether the price is a specific amount or it starts from a given price.
at the moment its reading through the loop but its giving me the error
undefined method `is_highlight_product' for nil:NilClass
since this is the first column in the table that is referenced and its breaking here I think that there must be some conflict in its ability to see the information stored in the table.
I'm still quite new to ruby on rails so any help or even just a nudge in the right direction would be very much appreciated.
If you would like more information just ask in the comments and I'll put it up as fast as I can.
The problem here is, when you do something like this:
(#product + #subcategory).each do |product, subcategory|
The local variable product will iterate firstly through products, then through subcategories, and the local variable subcategory will always be nil.
What you can do, a dirty way - check
if product.is_a?(Product)
# do your things
elsif product.is_a?(Subcategory)
# do other things
end

Thumbnails with Zurb Foundation and RoR

So I recently started using Zurb Foundation, and following this documentation.
I have the following code which are links to all the designs in the database.
<div>
<div class="small-4 small-offset-4 rows"><h2>Most Downloaded</h2></div>
<% #designs.each do |design| %>
<div><%= link_to design.title, design_path(design) %></div>
<% end %>
</div>
I wanted help on creating thumbnails for each link. Just to get the gist of it, I wanted to use the same picture for all thumbnails. I used a.th class to wrap the image but I wanted to learn how to display more than one (typically 3) thumbnails on each row.
So lets say there are 9 designs in total, I wanted 3 rows of 3 thumbnails each. I wasn't able to find many tutorials/explanations for this so any tips would be helpful to understand how it works.
Check out Foundation's block grid: http://foundation.zurb.com/docs/components/block-grid.html.
I think it does just what you're after. To get a 3 by 3 thumbnail grid would look something like:
<div>
<div class="small-4 small-offset-4 rows"><h2>Most Downloaded</h2></div>
<div class="row">
<ul class="small-block-grid-3">
<% #designs.each do |design| %>
<li><%= link_to design.title, design_path(design), class: "th" %></li>
<% end %>
</ul>
</div>
</div>

Resources