Properly bootstrap-style media grid for thumbnails
This commit is contained in:
parent
6aef2a7da5
commit
b703efe785
3 changed files with 47 additions and 11 deletions
32
app/assets/stylesheets/my.css.scss
Normal file
32
app/assets/stylesheets/my.css.scss
Normal 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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue