dashboard_vertical_columns.css

/* This feature will create vertical columns on your dashboard, one for each sensor type.

BE AWARE this feature only springs into action if you have enough horizontal space for the amount 
device-types that you have. 


*/

body.dashboard .span4,
body.dashboard .span3{max-width:100%}

@media all and (min-width: 601px) and (max-width: 1000px)
@media all and (max-width: 600px){
    body.dashboard .divider .span4{max-width:100%;}    
    body.dashboard .divider .span3{max-width:100%;}
}

@media all and (min-width: 1001px) and (max-width: 1500px){
    body.dashboard .divider .span4{max-width:100%;}
    body.dashboard .divider .span3{max-width:100%;}    
}

@media all and (min-width: 1501px){
    /*body.dashboard .span4:last-of-type{max-width:400px;padding-right:20px}    
    body.dashboard .span4:last-of-type{max-width:700px;padding-right:20px}*/
    body.dashboard .divider .span4,
    body.dashboard .divider .span3{max-width:100%;}     
}

/* overrule extra fluid, if it's active. */

/*
@media all and (min-width: 601px) and (max-width: 767px){
    body:not(.settings) .span4,
    body:not(.settings) .span3{margin:0 10px}
}*/

@media all and (min-width: 768px) and (max-width: 1100px){
     /*body:not(.settings) .span4{max-width:calc(50%);}    
    body:not(.settings) .span3{max-width:calc(33.33%);}*/
    body:not(.settings) .divider .span4{max-width:calc(100%);}    
    body:not(.settings) .divider .span3{max-width:calc(100%);}    
}

@media all and (min-width: 1101px) and (max-width: 1500px){
    body:not(.settings) .divider .span4{max-width:calc(100%);}
    body:not(.settings) .divider .span3{max-width:calc(100%);}    
    /*body:not(.settings) .span4{max-width:33.33%;}
    body:not(.settings) .span3{max-width:25%;}*/
}

@media all and (min-width: 1501px){
    /*body.dashboard .span4:last-of-type{max-width:400px;padding-right:20px}    
    body.dashboard .span4:last-of-type{max-width:700px;padding-right:20px}*/
    body:not(.settings) .divider .span4,
    body:not(.settings) .divider .span3{max-width:calc(100%);}     
}



@media all and (min-width: 769px) and (max-width: 3200){
    
    .navbar > div > .container,
    body.dashboard #main-view > .container {width:100%!important}
    body.dashboard section > h2{max-width:1170px;margin:0 auto 10px auto!important;}
    body.dashboard .divider{display:flex;flex-wrap: wrap;/*justify-content: center*/}    

    #dashcontent .beforebannav{
        margin-bottom:20px;
    }
    
    #dashcontent .item #name{padding-top:8px;}
    
    /*#dashcontent .item #bigtext{font-size:16px}*/
    
    #dashcontent div.item #bigtext > span{background-color: transparent}
    
    #dashcontent > section:first-of-type:nth-last-of-type(2),
    #dashcontent > section:first-of-type:nth-last-of-type(2) ~ section {
            width:calc(100% / 2 - 20px);
            float:left;
            margin-left:10px;
            margin-right: 10px;
    }

    #dashcontent > section:first-of-type:nth-last-of-type(2) .divider,
    #dashcontent > section:first-of-type:nth-last-of-type(2) ~ section * .divider{
        display:block!important;
    }  
    
    #dashcontent section:first-of-type:nth-last-of-type(2) .span3,
    #dashcontent section:first-of-type:nth-last-of-type(2) ~ section * .span3,
    #dashcontent section:first-of-type:nth-last-of-type(2) .span4,
    #dashcontent section:first-of-type:nth-last-of-type(2) ~ section * .span4{
        width:100%;
        width:calc(100% - 15px)!important;
        margin-bottom:.5em;
    }  
    
}


/* three columns */
@media all and (min-width: 980px){   
    
    #dashcontent > section:first-of-type:nth-last-of-type(3),
    #dashcontent > section:first-of-type:nth-last-of-type(3) ~ section {
        width:calc(100% / 3 - 20px);
        float:left;
        margin-left:10px;
        margin-right: 10px;
    }
    
    #dashcontent > section:first-of-type:nth-last-of-type(3) .divider,
    #dashcontent > section:first-of-type:nth-last-of-type(3) ~ section * .divider{
        display:block!important;
    }  
    
    body.dashboard #dashcontent > section:first-of-type:nth-last-of-type(3) .span3,
    body.dashboard #dashcontent > section:first-of-type:nth-last-of-type(3) ~ section * .span3,    
    body.dashboard #dashcontent > section:first-of-type:nth-last-of-type(3) .span4,
    body.dashboard #dashcontent > section:first-of-type:nth-last-of-type(3) ~ section * .span4{
        width:100%;
        width:calc(100% - 20px)!important;
        margin-bottom:1em;
    }  
    
    body.dashboard #dashcontent > section:first-of-type:nth-last-of-type(3) .span3{
        width:100%;
        width:calc(100% - 20px)!important;
        margin-bottom:1em;
    }
    
    body.dashboard #dashcontent > section:first-of-type:nth-last-of-type(3) .span4{
        width:100%;
        width:calc(100% - 20px)!important;
        margin-bottom:1em;
    }
    
    
    #dashcontent > section:first-of-type:nth-last-of-type(2) #name,
    #dashcontent > section:first-of-type:nth-last-of-type(2) ~ section * #name{
        padding-top:10px;
    }  
}


/* four columns */
@media all and (min-width: 1200px){

    #dashcontent > section:first-of-type:nth-last-of-type(4),
    #dashcontent > section:first-of-type:nth-last-of-type(4) ~ section {
            width:calc(100% / 4 - 20px);
            float:left;
            margin-left:10px;
            margin-right: 10px;
    }
    
    #dashcontent > section:first-of-type:nth-last-of-type(4) .divider,
    #dashcontent > section:first-of-type:nth-last-of-type(4) ~ section * .divider{
        /*display:block!important;*/ /*  recent experiment  */
    }  
    
    #dashcontent > section:first-of-type:nth-last-of-type(4) .span3,
    #dashcontent > section:first-of-type:nth-last-of-type(4) ~ section * .span3,
    #dashcontent > section:first-of-type:nth-last-of-type(4) .span4,
    #dashcontent > section:first-of-type:nth-last-of-type(4) ~ section * .span4{
        width:100%;
        width:calc(100% - 20px)!important;
        margin-bottom:1em;
    }  
    
    #dashcontent > section:first-of-type:nth-last-of-type(3) #name,
    #dashcontent > section:first-of-type:nth-last-of-type(3) ~ section * #name{
        padding-top:10px;
    }   
}


/* five columns */
@media all and (min-width: 1500px){
    
    #dashcontent{width:100%;} /* FROM HERE ON OUT IT'S BATCOUNTRY */
    
    #dashcontent > section:first-of-type:nth-last-of-type(5),
    #dashcontent > section:first-of-type:nth-last-of-type(5) ~ section {
            width:calc(100% / 5 - 20px);
            float:left;
            margin-left:10px;
            margin-right:10px;
    }    

    #dashcontent > section:first-of-type:nth-last-of-type(5) .divider,
    #dashcontent > section:first-of-type:nth-last-of-type(5) ~ section * .divider{
        display:block!important;
    }  
    
    #dashcontent > section:first-of-type:nth-last-of-type(5) .span3,
    #dashcontent > section:first-of-type:nth-last-of-type(5) ~ section * .span3,  
    #dashcontent > section:first-of-type:nth-last-of-type(5) .span4,
    #dashcontent > section:first-of-type:nth-last-of-type(5) ~ section * .span4{
        width:100%;
        width:calc(100% - 20px)!important;
        margin-bottom:1em;
    }  

    #dashcontent > section:first-of-type:nth-last-of-type(4) #name,
    #dashcontent > section:first-of-type:nth-last-of-type(4) ~ section * #name{
        padding-top:10px;
    }  
    
}  


/* six columns */
@media all and (min-width: 1500px){
    

    #dashcontent > section:first-of-type:nth-last-of-type(6),
    #dashcontent > section:first-of-type:nth-last-of-type(6) ~ section {
            width:calc(100% / 6 - 20px);
            float:left;
            margin-left:10px;
            margin-right:10px;
    }

    #dashcontent > section:first-of-type:nth-last-of-type(6) .divider,
    #dashcontent > section:first-of-type:nth-last-of-type(6) ~ section * .divider{
        display:block!important;
    }  
    
    #dashcontent > section:first-of-type:nth-last-of-type(3) .span3,
    #dashcontent > section:first-of-type:nth-last-of-type(3) ~ section * .span3{
        width:49%!important;
        max-width:calc(50% - 20px)!important;
        width:calc(50% - 16px)!important;
    }
    
    #dashcontent > section:first-of-type:nth-last-of-type(6) .span3,
    #dashcontent > section:first-of-type:nth-last-of-type(6) ~ section * .span3,  
    #dashcontent > section:first-of-type:nth-last-of-type(6) .span4,
    #dashcontent > section:first-of-type:nth-last-of-type(6) ~ section * .span4{
        width:100%!important;
        width:calc(100% - 20px)!important;
        margin-bottom:1em;
    }  
    
    #dashcontent > section:first-of-type:nth-last-of-type(5) #name,
    #dashcontent > section:first-of-type:nth-last-of-type(5) ~ section * #name{
        padding-top:10px;
    }  
}


/* seven columns, what a power user! */
@media all and (min-width: 1700px){


    #dashcontent > section:first-of-type:nth-last-of-type(7),
    #dashcontent > section:first-of-type:nth-last-of-type(7) ~ section {
            width:calc(100% / 7 - 20px);
            float:left;
            margin-left:10px;
            margin-right:10px;
    }

    #dashcontent > section:first-of-type:nth-last-of-type(7) .divider,
    #dashcontent > section:first-of-type:nth-last-of-type(7) ~ section * .divider{
        display:block!important;
    }
    
    #dashcontent > section:first-of-type:nth-last-of-type(7) .span3,
    #dashcontent > section:first-of-type:nth-last-of-type(7) ~ section * .span3,    
    #dashcontent > section:first-of-type:nth-last-of-type(7) .span4,
    #dashcontent > section:first-of-type:nth-last-of-type(7) ~ section * .span4{
        width:100%!important;
        width:calc(100% - 20px)!important;
    } 
    
    #dashcontent > section:first-of-type:nth-last-of-type(6) #name,
    #dashcontent > section:first-of-type:nth-last-of-type(6) ~ section * #name{
        padding-top:10px;
    }  
}



@media all and (min-width: 2000px){

    #dashcontent > section:first-of-type:nth-last-of-type(4) .span3,
    #dashcontent > section:first-of-type:nth-last-of-type(4) ~ section * .span3{
        width:49%;
        max-width:calc(50% - 20px)!important;
        width:calc(50% - 20px)!important;
    }   
    
    #dashcontent > section:first-of-type:nth-last-of-type(7) #name,
    #dashcontent > section:first-of-type:nth-last-of-type(7) ~ section * #name{
        padding-top:15px;
    }  
    
    .item #bigtext{font-size:17px}
}

@media all and (min-width: 2600px){

    #dashcontent > section:first-of-type:nth-last-of-type(3) .span4,
    #dashcontent > section:first-of-type:nth-last-of-type(3) ~ section * .span4{
        width:49%;
        max-width:calc(50% - 20px)!important;
        width:calc(50% - 20px)!important;
    }   
}


@media all and (min-width: 3100px){

    #dashcontent > section:first-of-type:nth-last-of-type(4) .span4,
    #dashcontent > section:first-of-type:nth-last-of-type(4) ~ section * .span4{
        width:49%;
        max-width:calc(50% - 20px)!important;
        width:calc(50% - 20px)!important;
    }   
}