next »

[BobbyJones]

It seems that tigsource is really popular in the indie community but is still behind in the latest tech in a sense. Most forum software offer mobile themes and sites by now. So making a mobile site could possibly be as simple as flipping a switch. If it is that simple can it be done?

[Matthew]

The forum software used here is unfortunately an older version (SMF 1.x), and most theme/etc development is happening on 2.x.

It's possible we'll upgrade to 2.x at some point in 2016, but for the time being the priorities for TIGSource are stability/speed over feature development...

[jon_mdi]

Hi folks!  First post

Ironically the lack of mobile stopped me from registering before, as I tend to look at stuff like this on my phone. But I'm getting Serious about a game I'm devving so I had to join

I dev web for a living and have done quite a bit of responsive design implementation, so I thought I would see if the site could be got useable with just CSS alone -- which is course relatively easy to integrate and should not break the upgrade path for the forum back-end code, ideally tweaking just one template.

And I think it's do-able, it would be a right faff to get pretty as the HTML is ~Netscape 4-era old school, but a little CSS can work wonders these days  

This is a grab from Chrome DevTools mobile preview mode, of a style sheet applied to the site using the "Stylish" extension;



Crikey that's big.  Gotta love retina displays. And this is all the CSS;

Code:

/* ensure wide devices don't use these responsive fixes */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {

    /* this rule alone stops the RHS of the page being chopped */    
    #wrapper {
        min-width: 320px;
    }

    /* showcase font bump */    
    #showcase {
        font-size: 14px;
    }

    /* rm background fluff & float in showcase */    
    #showcase .userinfo {
        background: none;
        clear: both;
        float: none;
        width: 100%;
    }
    #showcase div.searchfield {
        padding: 0 10px;
    }

    /* nav fixes */    
    #mainbody span.pathway,
    #mainbody .nav,
    #mainbody td.nav,
    #mainbody td.middletext,
    .nav {
        height: auto;
        line-height: 100%;
        margin: 10px;
        font-size: 14px;
    }

    /* footer fix */    
    #wrapper div#footer-l {
        padding-left: 6px;
    }
    div#footer .smalltext {
        font-size: 14px;
    }

    /* post area fixes */    
    FORM#quickModForm table td {
        width: auto;
        font-size: 30px !important;
        line-height: 100%;
    }
    FORM#quickModForm table td .smalltext {
        font-size: 20px;
    }
    FORM#quickModForm table tr td:first-child {
        width: 22%;
        /* reduce long username ambiguity */
        text-overflow: ellipsis;
    }
    FORM#quickModForm .avatar {
        width: 85%;
    }
    FORM#quickModForm td.middletext {
        min-width: 250px;
        font-size: 30px;
        padding: 0.3em;
    }
}

The font sizing isn't working as I think it should, but I only looked for 5 mins so I think getting something at least usable shouldn't be a massive task. To test that you'd want to include it after all the other CSS in the page.

If there were a few more ID's on the (many) HTML Tables it would help hugely with targetting CSS & specificity issues...

[ProgramGamer]

^ this is a good post