Noughts and Crosses layout with a variable number of entries

Rails
1

I have a product listing of 9 per-page. The products on the far right
and bottom row should NOT have a border on the aforementioned sides. So,
similar to a noughts and crosses layout. However, pages do not always
have 9 products to display.

You may have a better understanding if you see the code I’m currently
using: http://pastie.org/1223260

The code above is passed inside a block and executed on each product in
the products array.

I cannot get the specified lines to disappear or wrap my head around
this. I would really appreciate assistance with this.

If you need more information, please reply with what you need to help
me.

2

Pale H. wrote in post #950757:

I cannot get the specified lines to disappear or wrap my head around
this. I would really appreciate assistance with this.

Maybe something like this (hacked up a Products model just to test this,
and it isn’t the prettiest code… but it does yield a tic-tac-toe-ish
layout):

Listing products

<% groups = @products.in_groups_of(3) -%> <% last_row_pos = groups.length-1 -%> <% groups.each_with_index do |group, row_index| -%> <% last_col_pos = group.length-1 -%>
<% group.each_with_index do |product, col_index| -%> <% unless product.nil? -%> <% bot_spec = (row_index == last_row_pos ? " border-bottom: 0px;" : " border-bottom: red 1px solid;") -%> <% rt_spec = (col_index == 2 || col_index == last_col_pos ? " border-right: 0px;" : " border-right: red 1px solid;") -%> <% comb_spec = "border-top: 0px; border-left: 0px; " + bot_spec + rt_spec -%>
<%= product.name %>
<% end -%> <% end -%>
<% end %>

<%= link_to 'New product', new_product_path %>
3

Apologies for omitting the code you provided - I needed to reduce the
number of quoted lines.

Thanks very much, I’ll give that a try. I should’ve considered the
in_groups_of method before.

I’ve actually hacked something together that seems to have worked. I’ll
report back with my results.

4

Pale H. wrote in post #951715:

Apologies for omitting the code you provided - I needed to reduce the
number of quoted lines.

Thanks very much, I’ll give that a try. I should’ve considered the
in_groups_of method before.

Bah, my last_col_pos calc is wrong… rather than group.length-1, try
group.nitems-1 Taht should ignore any nils added if there aren’t 3
items in a group

5

Am 15.10.2010 um 15:03 schrieb Pale H.:

I cannot get the specified lines to disappear or wrap my head around
this. I would really appreciate assistance with this.

That seems complicated as hell Why not just make divs for the “rows” and
in that divs for the “cells”, and only output those divs as needed (yes,
you already only output divs as needed, but the branching seems “too
much”). Then try to find out what row or what cell adds which line. E.g.
the second cell should have a left border to separate it from the first
cell, same thing for the third cell. If you then have a fourth cell, you
begin the second row, which then should have a top border to separate it
from the first row, and so on.

Thinking of it, the rule would be simple: output a div per product,
group those in divs of 3 (the “rows”), mark the first “row” and the
first “cell” of each “row” with a special class, and style every cell
but the first of each row to have a left border, style each row but the
first to have a top border.

(oh, and you have style stuff in class attributes, and you shouldn’t
have style stuff in your view in the first place, use classes and css.)

Best,

Felix