1. REGISTRATION REQUIREMENTS:

    Register with your xenforo.com Username then start a conversation at xenforo.com w/Bob and provide the following:
    1. Your XenForo License Validation Token
    2. The Domain Name associated with the License
    NOTE: Your account will be validated once ALL requirements are verified/met. Thank you for your patience.

Abbreviation

Discussion in 'Pickem Support' started by Kwesters, Aug 3, 2019.

  1. Kwesters

    Kwesters New Member Pickem

    For the smartphone, we are running into a problem. We run a pool for HS football games. With so many teams (700+), abbreviations aren't enough info for the users. They need the whole team name. Is there any way to increase the abbreviation limit (I believe it's 5) or to always to use the team nickname?
     
  2. Bob

    Bob Developer Staff Member

    If you are talking about the "Mange your picks" page, then it is possible to slightly tweak the xa_pkm.less template so that the responsive CSS does not use the .picks .pickemNarrow class for displaying the abbreviated team name when the viewport hits the narrow responsive break point...

    example.....

    This is how it currently behaves when it hits the narrow responsive breakpoint (displays the team abbr instead of team name).

    Selection_457.png


    With a slight tweak to the responsive CSS, you can keep displaying the team name when the view port hits the narrow responsive break point.

    Selection_458.png

    Here is a slightly smaller view port (around 350 px wide, which is larger than most smart phones) and it still looks decent.

    Selection_459.png

    If that is what you are asking about, I can provide you some guidance on some CSS Tweaks.

    If you are asking about the Pick Distribution, you'd have to redesign it is its not designed to display team names, its designed to display LOGOs or ABBR (its just too narrow of a space to design it for use with team names).

    The View Player picks page uses the FULL team name (City Name Team Name).

    If you are asking about somewhere else that I've not mentioned, its most likely going to require template editing (if the responsive CSS isn't handling it).
     
  3. Kwesters

    Kwesters New Member Pickem

    Yes, that is what I am asking about. Any help would be greatly appreciated.
     
  4. Bob

    Bob Developer Staff Member

    OK, this is a pretty easy one as you will just be replacing the last block of CSS in the template with a modified block of CSS... skill level: EASY

    Edit the template: xa_pkm.less (you'll need to do this for each style you have).

    Scroll to the very end of the template where you will see this block of responsive CSS that kicks in at the narrow responsive break point. This is the last block of CSS in the template.

    FIND: (this is the last block of CSS in the template)

    Code:
    @media (max-width: @xf-responsiveNarrow)
    {
        .picks .pickemWide,
        .picks .pickemMedium
        {
            display: none;
        }
       
        .picks .pickemNarrow
        {
            display: inline;
        }
       
        .picks .dataTable tr.dataRow td,
        .picks .dataTable tr.dataRow th
        {
            padding: 5px;
        }
       
        .picks .logo img,
        .picks .visitorlogo img,
        .picks .visitorlogoAlt img,
        .picks .homelogo img,
        .picks .homelogoAlt img
        {
            max-width: 24px;
            max-height: 24px;
        }
    
        .svrTeam img
        {
            max-width: 24px;
            max-height: 24px;
        }      
    }

    REPLACE WITH: (replace the last block of CSS in the template with this block of CSS)

    Code:
    @media (max-width: @xf-responsiveNarrow)
    {
        .picks .pickemWide
        {
            display: none;
        }
    
        .picks .pickemMedium
        {
            display: inline;
        }
       
        .picks .dataTable tr.dataRow td,
        .picks .dataTable tr.dataRow th
        {
            padding: 5px;
        }
       
        .picks .logo img,
        .picks .visitorlogo img,
        .picks .visitorlogoAlt img,
        .picks .homelogo img,
        .picks .homelogoAlt img
        {
            max-width: 24px;
            max-height: 24px;
        }
    
        .svrTeam img
        {
            max-width: 24px;
            max-height: 24px;
        }      
    }
    Here is a shot of an iPhone X/XS with a view port of 375px

    Selection_463.png


    Here is a shot of a Galaxy S9 with a view port of 360px.

    Selection_464.png
     
  5. Bob

    Bob Developer Staff Member

    If you don't mind the team names wrapping (including the spread), you can also eliminate the medium responsive behavior where the CITY is removed and only the Team Name is displayed...

    example (this displays the FULL Team name (City and Team Name). As you can see, the team name wraps as the cell is only allowed a hard coded max width so that it doesn't effect the output of other cells.

    Selection_465.png

    Doing this requires a slightly different EDIT that involves edits to TWO blocks of responsive CSS.

    FIND: (the last 2 blocks of CSS for responsiveMedium and responsiveNarrow)

    Code:
    @media (max-width: @xf-responsiveMedium)
    {
        .picks .pickemWide
        {
            display: none;
        }
    
        .picks .pickemMedium
        {
            display: inline;
        }
        
        .picks .logo img,
        .picks .visitorlogo img,
        .picks .visitorlogoAlt img,
        .picks .homelogo img,
        .picks .homelogoAlt img
        {
            max-width: 32px;
            max-height: 32px;
        }       
    }
        
    @media (max-width: @xf-responsiveNarrow)
    {
        .picks .pickemWide,
        .picks .pickemMedium
        {
            display: none;
        }
        
        .picks .pickemNarrow
        {
            display: inline;
        }
        
        .picks .dataTable tr.dataRow td,
        .picks .dataTable tr.dataRow th
        {
            padding: 5px;
        }
        
        .picks .logo img,
        .picks .visitorlogo img,
        .picks .visitorlogoAlt img,
        .picks .homelogo img,
        .picks .homelogoAlt img
        {
            max-width: 24px;
            max-height: 24px;
        }
    
        .svrTeam img
        {
            max-width: 24px;
            max-height: 24px;
        }       
    }

    REPLACE WITH:

    Code:
    @media (max-width: @xf-responsiveMedium)
    {
        .picks .logo img,
        .picks .visitorlogo img,
        .picks .visitorlogoAlt img,
        .picks .homelogo img,
        .picks .homelogoAlt img
        {
            max-width: 32px;
            max-height: 32px;
        }       
    }
        
    @media (max-width: @xf-responsiveNarrow)
    {
        .picks .dataTable tr.dataRow td,
        .picks .dataTable tr.dataRow th
        {
            padding: 5px;
        }
        
        .picks .logo img,
        .picks .visitorlogo img,
        .picks .visitorlogoAlt img,
        .picks .homelogo img,
        .picks .homelogoAlt img
        {
            max-width: 24px;
            max-height: 24px;
        }
    
        .svrTeam img
        {
            max-width: 24px;
            max-height: 24px;
        }       
    }
     
    EasyEazy likes this.
  6. Kwesters

    Kwesters New Member Pickem

    Thanks!
     
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.