Skip to content

Instantly share code, notes, and snippets.

@bhserna
Created May 10, 2012 22:09
Show Gist options
  • Save bhserna/2656211 to your computer and use it in GitHub Desktop.
Save bhserna/2656211 to your computer and use it in GitHub Desktop.
<ul id="products" class="home-products">
<% @products.each do |product| %>
<% if Spree::Config[:show_zero_stock_products] || product.has_stock? %>
<%= content_tag_for :li, product do %>
<%= link_to product do %>
<div class="product-image">
<%= product_image(product) %>
</div>
<%= link_to truncate(product.name, length: 50), product, class: "title" %>
<%= product_tooltip(product) %>
<% end %>
<% end %>
<% end %>
<% end %>
</ul>
.home-products, .gallery_with_border {
@include clearfix;
overflow: visible;
.product {
width: 300px;
height: 260px;
margin: 20px 1%;
float: left;
border: none;
background: $white;
@include box-shadow($shadowColor -4px -1px 15px);
.product-image {
width: 278px;
height: 205px;
padding: 0;
margin: 10px;
overflow: hidden;
border: 1px solid $grayBorder;
img {
height: 100%;
width: auto;
}
}
.title {
color: $grayWords;
font-size: 14px;
text-align: left;
padding-left: 10px;
font-weight: normal;
}
}
.product:first-child {
&:before {
content: "";
float: left;
width: 200px;
height: 100px;
background-image: image-url("store/liston.png");
background-repeat: no-repeat;
position: relative;
z-index: 10;
}
.product-image, .title {
position: relative;
bottom: 90px;
}
.product-tooltip {
bottom: 190px;
}
}
}
<ul id="products" class="home-products">
<% @products.each do |product| %>
<% if Spree::Config[:show_zero_stock_products] || product.has_stock? %>
<%= content_tag_for :li, product do %>
<%= link_to product do %>
<span class="new-product-image"></span>
<div class="product-image">
<%= product_image(product) %>
</div>
<%= link_to truncate(product.name, length: 50), product, class: "title" %>
<%= product_tooltip(product) %>
<% end %>
<% end %>
<% end %>
<% end %>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment