1. 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

Discussion in 'Closed Suggestions' started by xf_phantom, Aug 3, 2013.

  1. xf_phantom

    xf_phantom Well-Known Member

    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: Aug 3, 2013
  2. xf_phantom

    xf_phantom Well-Known Member

    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
     
  3. xf_phantom

    xf_phantom Well-Known Member

    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 :)
     
  4. Mike

    Mike XenForo Developer Staff Member

    They already exist:

    .visibleResponsiveFull,
    .visibleResponsiveWide,
    .visibleResponsiveMedium,
    .visibleResponsiveNarrow

    .hiddenResponsiveFull,
    .hiddenResponsiveWide,
    .hiddenResponsiveMedium,
    .hiddenResponsiveNarrow
     
  5. Mike

    Mike XenForo Developer Staff Member

    That said, there may not be an ideal "hide for this and smaller" option there.
     
    xf_phantom likes this.

Share This Page