• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Lack of interest Responsive Helper Classes

xf_phantom

Well-known member
#1
I'm sure that i've requested this already, but i can't find it:( (sorry if it's really a duplicate of MY suggestion:D )


Could we get some "responsive css classes as helpers" like http://getbootstrap.com/css/#responsive-utilities.


e.g. http://xenforo.com/community/thread...plate-that-disappear-during-responsive.56414/

I don't want to have a fat list like
Code:
<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth)
    {
        #firstBox { display: none; }
        #secondBox { display: none; }
        .headerFoo ...........
    }
</xen:if>


I would prefer to add just add some css classanmes to the element i want to show/hide and that's it:)
Much less work, much less needed code
 
Last edited:

xf_phantom

Well-known member
#2
OK i've seen now, that i could put
Code:
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveWideWidth)
{
.hiddenResponsiveElementForWide{ display: none; }
}
@media (max-width:@maxResponsiveMediumWidth) { 
.hiddenResponsiveElementForMedium{ display: none; } 
}
</xen:if>
but having this in core would be much better instead of having the same duplicate code in all addons
 

xf_phantom

Well-known member
#3
e.g. instead of endless lists in the css template

Code:
<xen:if is="{xen:property enableResponsive}">
@media (max-width:{xen:property maxResponsiveMediumWidth})
{
   .Responsive .discussionList .sectionHeaders .stats
   {
     display: none;
   }
   

   
   .Responsive .discussionList .sectionHeaders .main .postDate
   {
     display: none;
   }
   
   .Responsive .discussionList .statsLastPost
   {
     display: none;
   }

.Responsive .discussionListItem .listBlock.stats .minor
     {
       display: none;
     }
.Responsive .discussionListItem .listBlock.lastPost dt
     {
       display: none;
     }

we would just need to add hideForMedium class to the elemenents :)