Implemented Node List Items module on responsive.

[Shelley]

Hi Bob,

I thought I'd suggest this and not sure it's even possible to do but suggesting when the style hits responsive mode have the nodelist items hidden? Hopefully I explained that correctly.

As you can see it entails much scrolling. Again, sorry if this is technically not possible but thought I'd make you aware of it (which i'm sure you are already).

 

[Bob]

Makes perfect sense to hide it once it hits a certain point (or collapse it). I have some LEARNING to do Really hoping for a HYS vid by the man Kier on using media queries for responsive custom layouts.

 

[Shelley]

I added the following in extra.css template for anyone bumping into this thread that wants a temp solution as I know yours will be better bob.

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
  { 
   .forum_list .showcaseMain { display: none !important;   }
   
}
</xen:if>

 

[Bob]

Thats exactly what I have in place right now lol

 

[Bob]

Marked as partially implemented as I've added responsive support to it, but I am still tweaking things to give admins more than 1 option for it.

 

[Bob]

I've modified the CSS for this Block, so a lot of the Class names have changed.

For Responsive, I hide the Message (if enabled) at the Wide Width break point. At the Medium Width break point, I hide the Title (if enabled) and Rating (if enabled). At the Narrow, I hide the entire block. For those that still want the block on Narrow, its a simple template edit to remove display:none; on the narrow width break point media query.

<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth)
    {
        .showcaseItemInfo .showcaseItemMessage       
        {
            display: none;
        }
    }
   
    @media (max-width:@maxResponsiveMediumWidth)
    {
        .showcaseItemInfo .showcaseItemTitle,
        .showcaseItemInfo .showcaseItemRating       
        {
            display: none;
        }
    }   
 
    @media (max-width:@maxResponsiveNarrowWidth)
    {
        .showcaseNodeListItemsBlock       
        {
            display: none;
        }
    }
</xen:if>