Firstly, great module, using it on almost all projects now and is a massive time saver.

You mentioned in the project description about using Advanced Classes to switch from a 4 column to 2 column layout. Would be a really great feature but still not quite sure of the best way to achieve this. I just wondered if you had any further documentation or could provide a quick overview of how to do that?

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

nlisgo’s picture

I'm so glad that you are finding the module useful. The advanced classes is a great feature that I have just not had time to shout about. It would enable you to put set markup that you could target in each of your layouts.

Below is example code. You could target the -normal classes with your normal.css which was called via a media query if the resolution exceeded 960 pixels wide

<ul>
<li class="views-row views-row-1 views-row-odd views-row-first grid-4-narrow grid-3-normal alpha-narrow alpha-normal">...</li>

<li class="... grid-4-narrow grid-3-normal">...</li>

<li class="... grid-4-narrow grid-3-normal omega-narrow">...</li>

<li class="... grid-4-narrow grid-3-normal alpha-narrow omega-normal">...</li>

<li class="... grid-4-narrow grid-3-normal alpha-normal">...</li>

...

<li class="... grid-4-narrow grid-3-normal omega-narrow omega-normal">...</li>

</ul>

With the markup the same you could target the classes that you had added using the settings in the Advanced classes textarea. So for a narrow layout you could target the -narrow classes.

I demoed this at a recent Drupalcamp in the UK which was recorded but the videos haven't been posted up yet. I am also hoping to have a session at Drupalcon Munich.

nlisgo’s picture

I've attached a screenshot of the settings to create that type of markup. The screenshot is from the latest dev version. The dev version also has an offset setting which can make some cool stuff happen which I won't go into here but I do touch upon in my presentation at Brighton Drupalcamp which I will post a link to when it is available.

Because I couldn't fit it in the screenshot this is the help text for the Advanced classes for the current dev version:
Entries one per line and in the format columns|offset|class_column_left|class_column_right|column_class_prefix|row_class_prefix|column_row_class_prefix.

Everything I have described is available in the alpha version.

nlisgo’s picture

I attached the wrong screenshot :(

tymn’s picture

Thanks a lot for the speedy and very helpful reply!

To be clear, I'm aiming for:
normal - 4 column layout
narrow - 4 column layout
mobile - 2 column layout

I updated to the latest dev version and added settings based on your example, markup is now as follows:

<li class="views-row views-row-1 views-row-odd views-row-first grid-6-normal teaser alpha-normal alpha-mobile grid-mobile"> </li>
<li class="views-row views-row-2 views-row-even grid-6-normal teaser omega-mobile grid-mobile"></li>
<li class="views-row views-row-3 views-row-odd grid-6-normal teaser alpha-mobile grid-mobile"></li>
<li class="views-row views-row-4 views-row-even grid-6-normal teaser omega-normal omega-mobile grid-mobile"></li>
<li class="views-row views-row-5 views-row-odd grid-6-normal teaser alpha-normal alpha-mobile grid-mobile"></li>
<li class="views-row views-row-6 views-row-even views-row-last grid-6-normal teaser omega-mobile grid-mobile"></li>

I'm just struggling a bit with the CSS to get this working properly.

I tried adding some CSS to global.css for the mobile two column layout and then additional css to normal and narrow but having problems with classes like omega-mobile affecting the margins for normal and narrow.

What would be the best way to handle the CSS to get this working properly?

MrPaulDriver’s picture

I've just watched the DrupalCamp Brighton video and whilst audio quality is good, it is very difficult to view clearly any of the examples on the projector screen.

I find myself still unsure about how to arrive at a kind of layout, that is also sought by tymn in the comment above.

In particular, is it possible to specify a multi-column layout for mobile? I'm guessing not, as Omega does not use the grid structure at this level, but if would be most helpful if somebody can clarify this point.

MrPaulDriver’s picture

FileSize
148.09 KB

Okay, I've made quite a lot of progress here, but must to confess to having had a mental block along the way.

To provide context I need to say that I am using the Omega theme, with the standard three layouts, being wide, normal and narrow for desktop resolutions, plus the global.css layout (for mobile). For images I am using the Adaptive Images module to provide scaled images, however one also can achieve similar results for scaled images using css {width:100%:height:auto;}

For me, the objective is to have a a six column views grid for wide, normal and narrow, This is easy with Views Column Class module using basic settings of 'Row Class' = grid-2 and 'Number of columns' = 6. I haven't bothered getting into the advanced settings and from what I understand, I don't need to.

Beyond the six column layout for desktop resolutions, I want a two column layout for mobile and this is where I was struggling.

My mental block came because Views Column Class module, renders single list items stacked vertically at the global.css level. As Fig.1 in the attached screenshot.

Mobile Two Column Layouts

What I wanted, was a two or three column layout for mobile, as can be seen in Fig.2 of the screenshot.

In the end, I realised that all I needed to do, was apply some multi-column css to my global.css file, as below, in order to get a 2 column layout;

.my-views-item-content {
	-moz-column-count: 2;
	-moz-column-gap: 5px;
	-webkit-column-count: 2;
	-webkit-column-gap: 5px;
	column-count: 2;
}

And this in my default.css

.my-views-item-content {
	-moz-column-count: 1;
	-moz-column-gap: 0px;
	-webkit-column-count: 1;
	-webkit-column-gap: 0px;
	column-count: 1;
}

This above css gave me Fig.2 in the sceenshot which was pretty much what I wanted (but not sure if this works with older browsers smartphones).

There is however a small snag with Views Column Class at the mobile level which can result in the outcome demonstrated in Fig.3 and is caused by empty cells in the table row - like if there were 5 results in the view rather than six. However, the anomaly is not altogether unattractive and even looks a bit Pinteresty.

Feature Request:
Provide an option called 'Fill up single line' as is already provided with views grid layouts.

To achieve this without error or discrepancy, it may be necessary to incorporate global multi-column css into the module itself, which is perhaps starting get a bit complicated, but perhaps worthwhile from a usability and documentation angle?

----------------
Nathen, maybe you could incorporate the column css thing into your DrupalCon Munich presentation.

nlisgo’s picture

Category: support » feature

My session proposal was not accepted for Munich but I can work this in to a video tutorial.

MrPaulDriver’s picture

Title: Advanced Classes » Advanced Classes and Multi-Column layout for mobile
Category: feature » support
castelar’s picture

Trying to do the same thing. 6 columns for wide, 4 for normal, 2 for narrow - Omega 3x. Tried the above methods without any luck. Anybody figure this out or post video/tutorial?