View Single Post
qwazix's Avatar
Moderator | Posts: 2,622 | Thanked: 5,447 times | Joined on Jan 2010
#4
Code:
@media(max-width: 400px){
    @viewport {
        width: device-width;
    }
    #mcontainer #mcontent #msidebar{
        float: none;
        width: 300px;
    }

    #mcontainer, #mcontainer #mcontent{
        min-width: 0
    }

    #mcontainer #mcontent #msidebar .mwrapper_top_recent,
    #mcontainer #mcontent #msidebar .mwrapper_bottom_recent,
    #mcontainer #mcontent #msidebar ul.mrecent
    {
        background-size: 100%;
    }
    /*
    #mcontainer #mcontent #msidebar .mwrapper_top_recent{
        
    }*/

    #mcontainer #mcontent #mmain {
        margin-right: 0;
    }

    h3 {
        margin-top: 1em;
    }

    .smallfont{
        color: #bbb;
    }

    .last_reply{
        opacity: 0.5;
    }
    #mnavigation-right-wrapper ul{
        background: #424345
    }

    #mcontainer #mnavigation{
        height: auto;
        width: 100vw;
        margin-left: -8px;
    }
    #mcontainer #mnavigation #mnavigation-right-wrapper,
    #mcontainer #mnavigation #mnavigation-left-wrapper{
        height: auto;
    }
    #mcontainer #mheader #muser-login{
        float: left;
    }
    #mcontainer #mheader #mregister{
        display: none;
    }
    #mcontainer #mnavigation #msearch{
        width: 100vw;
        margin-left: -8px;
        background: #424345;
        margin-top: 0;
        padding: 3px 8px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        margin-bottom: 20px;
    }
    #mcontainer #mnavigation ul li.selected{
        background: transparent;
    }
    #mcontainer #mcontent #msidebar ul.mrecent{
        margin-top: 0;
        margin-bottom: 0;
    }
    .mwrapper_top_recent{
        display: none;
    }
    h2:hover + .mwrapper_top_recent,
    .mwrapper_top_recent:hover{
        display: block;
    }
    #mcontainer #mcontent #msidebar #mnav-sub{
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
    }
    #mnav-sub{
        width: 240px;
        height: 200px;
        overflow: hidden;
        overflow: -moz-hidden-unscrollable;
        transition: height 1s ease-in-out;
    }
    #mnav-sub:hover{
        height: 760px;
    }
    .pagenav{
        float: none;
    }
    html body div#mcontainer div#mcontent div#mmain div#mmain-wrapper div div.page div:not(#vB_Editor_QR_controls)>table table{
        display: block;
    }
    html body div#mcontainer div#mcontent div#mmain div#mmain-wrapper div div.page div:not(#vB_Editor_QR_controls)>table table tr{
        display: block;
        margin-top: 20px;
        margin-bottom: 40px;
    }
    
    html body div#mcontainer div#mcontent div#mmain div#mmain-wrapper div div.page div:not(#vB_Editor_QR_controls)>table table td{
        display: inline-block;
    }
    .tborder tbody{
        display: block;
        width: 100%;
    }
    .tborder{
        display: block
    }
    .tborder>td, .tborder>tr{
        display: block;
    }
    .tborder>tbody>tr>.tcat{
        float: left!important;
        width: 50%;
        height: 80px;
        /*margin-top: -40px;*/
    }
    td.tcat a{
        margin: 10px 0;
        display: inline-block;
        vertical-align: middle;
    }
    td.tcat a:nth-child(4){
        max-width: 80px
    }
    td.vbmenu_control{
        display: block!important;
    }
    td.alt1:nth-child(2),td.alt1:nth-child(n-2){
        font-size: 200%;
    }
    td.alt1:nth-child(2),td.alt1:nth-child(n-2){
        font-size: 200%;
    }
    .page>div[align=left]>table,
    .page>div[align=left]>table>tbody,
    .page>div[align=left]>table>tbody>tr,
    .page>div[align=left]>table>tbody>tr>td
    {
        display: block;
    }
    #threadtools, #threadsearch, #threadrating{
        text-align: right;
    }
    #threadtools, #threadrating{
        margin-right: -6px;
    }
    html body div#mcontainer div#mcontent div#mmain div#mmain-wrapper div div.page div table.tborder tbody tr td.tcat strong{
    }
    #qrform ~ .tborder > tbody > tr > .tcat{
        width: auto;
    }
}
This makes a nice mobile version of tmo, though you need to inject the viewport tag into the page, which I don't know how to do on sailfish-browser.

You can try it on the responsive website mode of desktop firefox by executing this code in the console
Code:
var style   = document.createElement( 'link' );
style.rel   = 'stylesheet';
style.type  = 'text/css';
style.href  = 'http://localhost/maemo.css';//css location 
document.getElementsByTagName( 'head' )[0].appendChild( style );
or just copy it to userContent.css

I presume that injecting a viewport is something like:
Code:
sc=document.createElement('meta'); sc.name='viewport'; 
sc.content='width=device-width'; 
document.getElementsByTagName('head')[0].appendChild(sc);
__________________
Proud coding competition 2012 winner: ρcam
My other apps: speedcrunch N9 N900 Jolla –– contactlaunch –– timenow

Nemo UX blog: Grog
My website: qwazix.com
My job: oob

Last edited by qwazix; 2013-12-19 at 23:48.