Re-build grids with different column widths when flipping device orientation

[Tadej Štajner]

Hi, all,

I'm building a responsive treesaver publication that needs to adaptively change column width based on screen size and orientation.
For instance, having 2 columns on a portrait iPad, and 3 columns on a landscape iPad, so that they fit within pre-specified margins and gutters.

Basically, I am implementing percentage column widths, as mentioned in issue #275. (https://github.com/Treesaver/treesaver/issues/275)

I currently tried to solve this through CSS by making a set of @media queries that set the column widths given the device size. However, treesaver remembers the column widths on boot, and even though the media queries change them in the CSS, when I flip from portrait to landscape, the layout is rendered with the old column widths in mind, which are too wide for the new grid.

I tried forcing the reload of the grids in the treesaver ArticleManager by refreshing the resources.html, but it didn't really work. Is there any way that I can trigger a total re-boot of treesaver on re-orientation? Or at least an official way to re-load the grids data structures so they get re-measured? Triggering a page reload on re-orientation is possible, but I'd try to avoid that.

Any ideas on that? What's the usual way of tackling mobile?

thanks,
-- Tadej

[Andrea Campi]

On Thu, Jul 25, 2013 at 11:56 AM, Tadej Štajner <tadej...@gmail.com> wrote:

Hi, all,

I'm building a responsive treesaver publication that needs to adaptively change column width based on screen size and orientation.
For instance, having 2 columns on a portrait iPad, and 3 columns on a landscape iPad, so that they fit within pre-specified margins and gutters.

 

Any ideas on that? What's the usual way of tackling mobile?

We usually try keeping the column widths the same, and just vary the number of columns as you mention.

For instance, 300px works just fine for the iPad.

Would that work for you?

[tadej...@gmail.com]

Thanks! that's also a solution, I think we'll go with something along those lines.
-- Tadej

--
You received this message because you are subscribed to the Google Groups "Treesaver" group.
To unsubscribe from this group and stop receiving emails from it, send an email to treesaverjs...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[tadej...@gmail.com]

On 7/25/2013 2:28 PM, tadej...@gmail.com wrote:

On 7/25/2013 12:02 PM, Andrea Campi wrote:

On Thu, Jul 25, 2013 at 11:56 AM, Tadej Štajner <tadej...@gmail.com> wrote:

Hi, all,

I'm building a responsive treesaver publication that needs to adaptively change column width based on screen size and orientation.
For instance, having 2 columns on a portrait iPad, and 3 columns on a landscape iPad, so that they fit within pre-specified margins and gutters.

 

Any ideas on that? What's the usual way of tackling mobile?

We usually try keeping the column widths the same, and just vary the number of columns as you mention.

For instance, 300px works just fine for the iPad.

Would that work for you?

Thanks! that's also a solution, I think we'll go with something along those lines.
-- Tadej

Just for posterity: I solved it by not using a responsive column width (which is a very uphill battle), but fixing column width and gutter to 280/30 (or 300/15), and having a responsive margin, resulting in different "left" attributes for columns, so they stay centered with regard to available space. Luckily the grid model doesn't care about the actual offsets when calculating stuff, so it still works and looks good on mobile devices.

thanks!