Responsive Views and Panels


Author Message
Alf

Posted: 5/8/2013
Quote message 

Hi all,

I hope someone can help me with this. I love the responsive themes Artisteer outputs. But for all my Drupal sites I use views and panels and that leaves me with an unresponsive site, except for images and the main navigation menu.

Responsiveness is always lost in Panels and Views.

For instance:
If I create a view page display with a grid containing images, title and teasers of nodes, the grid is not scaling on mobile devices. The images are, but the rest isn't.

And:

When i create a homepage panel display, or when I create a node_view variant for a content type with the title, body and comment form, responsiveness is lost there as well. The body text of the node is actually lost on mobile screens as it doesn't fit in the screen and the screen doesn't scroll horizontally.

So a few questions I haven't been able to answer myself by trial and error:
- Do I need to use fixed width or fluid panel layouts? It seems only fixed width retains some of Artisteer's responsiveness

- I'm using the Fences module, so I can easily provide CSS id's and classes to any panel panes and regions. Would responsiveness be restored that way? I already apply artisteer classes to the body field and others that I add to my node_view variant in Panels. It gives me the styling but not the responsiveness created in Artisteer. But maybe I'm doing it wrong?

- There are Drupal modules such as responsive panel layouts and views responsive grid but it seems a bit of overkill to me. It would be much more elegant if views and panels can leverage the responsiveness that comes with Artisteer themes simply by applying the right CSS classes.

- Should I use a theme sheet width of 960px or can I use 1000px widths?

Does anyone have any input for me? Does anyone have experience with getting views and panels to be responsive?

Will update any of my findings in this post, as it seems to be the only one about this subject in this forum (which surprises me, but ok....)
 
John

Posted: 5/13/2013
Quote message 

Quote Alf:

Hi all,

I hope someone can help me with this. I love the responsive themes Artisteer outputs. But for all my Drupal sites I use views and panels and that leaves me with an unresponsive site, except for images and the main navigation menu.

Responsiveness is always lost in Panels and Views.

For instance:
If I create a view page display with a grid containing images, title and teasers of nodes, the grid is not scaling on mobile devices. The images are, but the rest isn't.

And:

When i create a homepage panel display, or when I create a node_view variant for a content type with the title, body and comment form, responsiveness is lost there as well. The body text of the node is actually lost on mobile screens as it doesn't fit in the screen and the screen doesn't scroll horizontally.

So a few questions I haven't been able to answer myself by trial and error:
- Do I need to use fixed width or fluid panel layouts? It seems only fixed width retains some of Artisteer's responsiveness

- I'm using the Fences module, so I can easily provide CSS id's and classes to any panel panes and regions. Would responsiveness be restored that way? I already apply artisteer classes to the body field and others that I add to my node_view variant in Panels. It gives me the styling but not the responsiveness created in Artisteer. But maybe I'm doing it wrong?

- There are Drupal modules such as responsive panel layouts and views responsive grid but it seems a bit of overkill to me. It would be much more elegant if views and panels can leverage the responsiveness that comes with Artisteer themes simply by applying the right CSS classes.

- Should I use a theme sheet width of 960px or can I use 1000px widths?

Does anyone have any input for me? Does anyone have experience with getting views and panels to be responsive?

Will update any of my findings in this post, as it seems to be the only one about this subject in this forum (which surprises me, but ok....)

Hi Alf,

I am struggling with what seems the same issue. I would also like to make some of the views and blocks on the website I am managing responsive. This is turning to be a headache. I wish there was something to help in that regard. I also have to make a leaf type menu responsive.
 
Oscar

Posted: 5/14/2013
Quote message 

Hi John,

I haven't tested it yet, but in my attempts to solve this so far I discovered an entry in the panels issue queue that explains that the 'builders' panels layouts are not responsive by design. I dont have the link on hand by now but just search the panels issue queue for "responsive". There is a mention of a sabdbox module (click on the authors name and view his projects to find it) that provides additional panels layouts that are advertised as being responsive. Again, haven't tested it, just found this out today.
Also, I noticed that the artisteer css files contain a class ".responsive". In my next attempts I will play with assigning this class to view elements in combination with non-builders panels layouts and see if I can get a bit closer to making it all work.
Also, I've read that its better to not specify widths in " px" but rather use "em".

Just wanted to share my progress on this, hoping it helps.
 
John

Posted: 5/20/2013
Quote message 

Quote Oscar:

Hi John,

I haven't tested it yet, but in my attempts to solve this so far I discovered an entry in the panels issue queue that explains that the 'builders' panels layouts are not responsive by design. I dont have the link on hand by now but just search the panels issue queue for "responsive". There is a mention of a sabdbox module (click on the authors name and view his projects to find it) that provides additional panels layouts that are advertised as being responsive. Again, haven't tested it, just found this out today.
Also, I noticed that the artisteer css files contain a class ".responsive". In my next attempts I will play with assigning this class to view elements in combination with non-builders panels layouts and see if I can get a bit closer to making it all work.
Also, I've read that its better to not specify widths in " px" but rather use "em".

Just wanted to share my progress on this, hoping it helps.


Thank you for the suggestions above. It is true that it is better to use em's and not px's also it is better to use percentages rather than pixels.
 
Alf

Posted: 5/29/2013
Quote message 

Eureka moment has arrived. I've been troubleshooting this for the longest time now and I think I found the problem.

First of all:
- 'Builders' panels are not responsive. Use http://drupal.org/project/layout (patches required) or use non-builders panels
- Check if your pages are responsive when you are logged in! In my case, all responsiveness was lost regardless of what I did, for anonymous sessions. The reason is this bug: https://drupal.org/node/802432. Issue is for D6 but applies to D7 too. Basically, for anonymous users, query (update, UI) will not load unless there is a module that uses it and anonymous users have permissions granted for it. Drupal reasons that code should not be loaded if its not needed. Hence, jquery won't be running even though the artisteer (or other responsive themes) require it. That was my golden 'aha' moment.

When it comes to views, I have had good experiences with http://drupal.org/project/masonry to create fluid grids, such as what pinterest uses. There are more responsive views styles, but for the above mentioned effect the masonry module (and its sub modules) was the only one properly functioning. I still have to play around with view styles that make tables and grids responsive but first I need to fix the anonymous issue, for which I'm contacting Artisteer support. It may appear that extra views plugins are not needed when using the proper responsive panel pages and loading jquery.

Will keep this thread updated.
 
www

Posted: 10/19/2013
Quote message 

It comes soon in Drupal 8 version. I also have problems with Views. Some workarounds are possible, but very difficult.