Abbreviation

[Kwesters]

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?

 

[Bob]

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




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.



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



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

 

[Kwesters]

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

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

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

 

[Bob]

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

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)

@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)

@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




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

 

[Bob]

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.



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)

@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:

@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;
    }       
}

 

[Kwesters]

Thanks!