Properly bootstrap-style media grid for thumbnails

This commit is contained in:
Christoph Haas 2013-08-09 23:02:22 +02:00
parent 6aef2a7da5
commit b703efe785
3 changed files with 47 additions and 11 deletions

View file

@ -0,0 +1,32 @@
/* Make sure thumbnails in grids are 160x120 pixels */
ul.thumbnails div.thumbnail img
{
/*border: 5px solid green;*/
margin-left: auto;
margin-right: auto;
/*width: 260px;*/
/*height: 220px;*/
}
ul.thumbnails div.thumbnail
{
width: 200px;
height: 230px;
}
ul.thumbnails h3
{
font-size: 18px;
line-height: normal;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
.row.showmorebox
{
border: 1px solid #DDD;
padding: 10px 20px;
text-align: center;
font-size: 30px;
}

View file

@ -5,12 +5,14 @@
<% @packages.each do |package| %>
<li class="span3">
<% if package.screenshots.length>0 %>
<%= link_to (image_tag '', :"data-src" => package.screenshots.first.image_url('small')),
package.screenshots.first.image_url('large'),
html_options = {:class => 'thumbnail'}
%>
<h3><%= package.name %></h3>
<p><%= package.description %></p>
<div class="thumbnail">
<div style="text-align: center; height: 120px">
<%= link_to (image_tag package.screenshots.first.image_url('small')),
package.screenshots.first.image_url('large') %>
</div>
<h3><%= package.name %></h3>
<p><%= package.description %></p>
</div>
<% else %>
<em>No screenshot. :( Care to upload one?</em>
<% end %>
@ -19,3 +21,7 @@
<% end %>
</ul>
<% end %>
<div class="row showmorebox">
<a href="#">Moar screenshots…</a>
</div>

View file

@ -1,11 +1,9 @@
<h1>Hello, Rails!</h1>
<h1>Search for a package/description:</h1>
<%= form_tag(url_for, method: "get") do %>
<%= text_field_tag :search, params[:search], autofocus: true, placeholder: 'What are you looking for...' %>
|
With screenshots? <%= check_box_tag 'with_screenshots', 'yes', true %>
With screenshots? <%= check_box_tag 'with_screenshots', 'yes', params[:with_screenshots] %>
|
<%= submit_tag "Search" %>
<% end %>
@ -14,7 +12,7 @@
<h1>Search results</h1>
<div class="row-fluid">
<!--<div class="row-fluid">-->
<%= render "packages_search_results", object: @packages %>
</div>
<!--</div>-->
</div>