I have an array of #schools (School.all), and I am displaying these #schools within a Bootstrap row (3 per row). I was wondering how I could make it so that for every third item in #schools, Ruby/Rails would create a new row and then repeat that process. Thanks.
<% for 3 in #schools %>
<div class="row">
<% #schools.each do |s| %>
<div class="col-md-4">
</div>
<% end %>
</div>
<% end %>
each_slice is your friend.
<% #schools.each_slice(3) do |schools| %>
<div class="row">
<% schools.each do |s| %>
<div class="col-md-4">
</div>
<% end %>
</div>
<% end %>
<% #schools.in_groups_of(3) do |schools| %>
<div class="row">
<% schools.each do |s| %>
<div class="col-md-4">
</div>
<% end %>
</div>
<% end %>
For documentation: http://apidock.com/rails/Array/in_groups_of
Related
So, I have an app that is trying render 2 (or maybe more if needed) columns using a loop. It does one column and looks pretty good, but I want the option of 2 or even more. I know about "in_groups.of()", but I can't quite figure it out to work with my
<% #vendors.each do |vendor| %>
<%= link_to vendor do %>
<div class="row">
<div class="col-md-6">
<div class="card-container">
<div class="col-md-6">
<div class="card">
<%= image_tag attachment_url(vendor, :background_image), class: 'card-img-top' %>
<div class="card-block">
<h4 class="card-title"><%= vendor.Company %>. </h4>
<p class="card-text"><%= vendor.Description.html_safe.first(25) %></p>
<div class="card-standing"><strong><%= vendor.FinancialStanding %></strong></div>
</div>
</div>
</div>
</div>
</div>
</div>
<% end %>
<% end %>
Not sure why you needed this, because everything can be managed with css and html. But you can make changes like this:
<% #vendors.to_a.in_groups_of(2).each do |vendor| %> # #vendors.to_a cover AR to array
<% vendor.each do |v| %> # becuase vendor is array here.
..........your code..............
<% end %>
<% end %>
I am trying to use in_groups_of to sort my rails html output into two columns. Right now it just displays as one column. Here is the code:
<% #providers.in_groups_of(2).each do |group| %>
<div class="row">
<% group.each do |provider| %>
<div class="col-xs-6">
<h3><%= link_to provider.name, provider_path(provider) %></h3>
<h4><%= provider.address %></h4>
</div>
<% end %>
Your div.col-md-12s are each taking up the width of an entire row. Try changing them to col-xs-6. (I'm using xs so it will show up on any size of window; ignore this if not appropriate to your situation.)
<% #provider.in_groups_of(2).each do |group| %>
<div class="row">
<% group.each do |provider| %>
<div class="col-xs-6">
<h3><%= link_to provider.name, provider_path(provider) %></h3>
<h4><%= provider.address %></h4>
</div>
<% end %>
</div>
<% end %>
Im trying to make an app in Rails 4.
I have two scopes in my qualifications model:
scope :completed, ->{ where(pending: !true) }
scope :pending, -> { where(pending: true) }
I am trying to list them (newest first) in my view.
I have this view file:
<% Qualification.pending.sort_by.year_earned.asc.each do |qualification| %>
<div class="row">
<div class="col-md-12">
<div class="profilequalifications">
<%= qualification.current_study %>
</div>
</div>
</div>
<% end %>
<% Qualification.completed.sort_by(&:year_earned).each do |qualification| %>
<div class="row">
<div class="col-md-12">
<div class="profilequalifications">
<%= qualification.completed_award %>
</div>
</div>
</div>
<% end %>
The second index works - but in the wrong order.
The first index - I have tried a million variations on the expression but can't find one that doesnt throw an error.
I have tried each of the above, and the following (each of which are following examples I found on this site):
<% Qualification.pending.sort_by(&:year_earned).reverse_order.each do |qualification| %>
<% Qualification.pending.sort_by(&:year_earned.reverse).each do |qualification| %>
<% Qualification.pending.sort_by('&:year_earned ASC').each do |qualification| %>
<% Qualification.pending.sort_by('year_earned ASC').each do |qualification| %>
Rather than list them all out - does anyone know how to list in ascending order?
I would include the order inside your scope.
scope :completed, ->{ where(pending: !true).order('year_earned DESC') }
scope :pending, -> { where(pending: true).order('year_earned DESC')}
And in your view just remove .sort_by and it should work then.
<% Qualification.pending.each do |qualification| %>
<div class="row">
<div class="col-md-12">
<div class="profilequalifications">
<%= qualification.current_study %>
</div>
</div>
</div>
<% end %>
<% Qualification.completed.each do |qualification| %>
<div class="row">
<div class="col-md-12">
<div class="profilequalifications">
<%= qualification.completed_award %>
</div>
</div>
</div>
<% end %>
I think you want Qualification.pending.order(year_earned: :asc).each do |qualification|
See this for more information: http://apidock.com/rails/ActiveRecord/QueryMethods/order
I'm using Bootstrap 3 with Rails 4.0.0. Currently this is my index.html.erb for Projects:
<div class="col-lg-6">
<% #projects.each do |project| %>
<h3>
<%= project.name %>
</h3>
<% end %>
</div>
When a user adds lots of new projects, I would like to limit the length of the page and display additional 'projects' on the right hand column. So I would like to have two columns side by side. In html it would be just the following, but how can I make it work in Rails?
<div class="row">
<div class="col-lg-6">Projects...</div>
<div class="col-lg-6">Projects....</div>
</div>
You can use each_slice:
<% #projects.each_slice(<your_limit_per_column>) do |projects| %>
<div class="col-lg-6">
<% projects.each do |project| %>
<h3>
<%= project.name %>
</h3>
<% end %>
</div>
# First half of projects
<div class="col-lg-6">
<% #projects.first(#projects.length/2).each do |project| %>
<h3>
<%= project.name %>
</h3>
<% end %>
</div>
# Second half of projects
<div class="col-lg-6">
<% #projects.last(#projects.length /2 + #projects.length % 2).each do |project| %>
<h3>
<%= project.name %>
</h3>
<% end %>
</div>
The code below is fast becoming a common theme in my rails app. I have a bunch of conditions in my view for handling empty data, as well as, managing the push and pull of my grid. This will only grow as I begin to add the 3 other status's. My questions is this. What is the best way of managing my grid elegantly either in the view or controller so my views don't become increasingly bloated with conditions?
<% if #jobs.where(status: 'published').size == 0 %>
<div class="row">
<div class="large-12 columns">
</div>
</div>
<% end %>
<% if #jobs.where(status: 'published').size == 1 %>
<div class="row">
<div class="large-4 push-8 columns">
</div>
</div>
<% elsif #jobs.where(status: 'published').size == 2 %>
<div class="row">
<div class="large-4 push-4 columns">
</div>
</div>
<% else %>
<% #jobs.in_groups_of(3, false) do |row| %>
<div class="row">
<% for job in row %>
<div class="large-4 medium-4 columns">
</div>
<% end %>
</div>
<% end %>
<% end %>
I think you should use switch case statement for managing multiple conditions.
#status = #jobs.where(status: 'published').size
<% case #status %>
<% when 0 %>
<div class="row">
<div class="large-12 columns">
</div>
</div>
<% when 1 %>
<div class="row">
<div class="large-4 push-8 columns">
</div>
</div>
<% when 2 %>
<div class="row">
<div class="large-4 push-4 columns">
</div>
</div>
<% else %>
<% #published_jobs.in_groups_of(3, false) do |row| %>
<div class="row">
<% for job in row %>
<div class="large-4 medium-4 columns">
</div>
<% end %>
</div>
<% end %>
<% end %>