Modify sytlesheet to make matrix have the common 4x3 look for all browser window...

diff --git a/css/matrix.css b/css/matrix.css
index 96b26077a1b4a958d880705de59b69abade59f52..4f7af0e448bb0c4cd4e4b3822d639585910e0bc6 100644 (file)
--- a/css/matrix.css
+++ b/css/matrix.css
@@ -28,29 +28,34 @@ a img{
        padding-top: 20px;
        position: fixed;
        width: 100%;
+       height: 10%;
        background-color: #000000;
 }
 .mainMenuBtn{
        float: right;
-       width: 32px;
-       height: 32px;
-       padding-right: 15px;
+       width: 48px;
+       height: 48px;
+       padding-right: 10px;
+       padding-top: 10px;
 }
 .menuContainer{
-       clear: both;
-       padding-top: 50px;
+       padding-top: 8%;
        width: 100%;
+       height: 100%;
+       background-color: #000000;
 }
 .tex{
        float:left;
-       width: 32px;
-       height: 32px;
+       width: 48px;
+       height: 48px;
+       padding-left: 10px;
+       padding-top: 10px;
 }
 .title{
        font-size: 24px;
-       width: auto !important;
-       clear: none;
-       padding-left: 20px;
+       padding-top: 10px;
+       width: 80%;
+       text-align: center;
        float: left;
 }
 .base{
@@ -60,9 +65,8 @@ a img{
        padding-top: 20px;
 }
 .appContainer{
-       width: 155px;
-       height: 138px;
-       padding-top: 5px !important;
+       width: 25%;
+       height: 30%;
 }
 .app_icon{
        width: 96px;
@@ -83,7 +87,6 @@ a img{
 .runDiv{
        width:100%;
        text-align: center;
-       padding-top: 10px;
 }
 .outputDiv{
        clear: both;
@@ -132,7 +135,7 @@ a img{
        font-weight: bolder;
 }
 .runImg{
-       width: 96px;
-       height: 96px;
+       width: 64px;
+       height: 64px;
 }
 

diff --git a/scripts/matrix.js b/scripts/matrix.js
index 0ae0ea1ecc6d2cf61f019a0e3b7d71161b955cc8..74baae6f915b46ac8772f74be093966682c3b9b1 100644 (file)
--- a/scripts/matrix.js
+++ b/scripts/matrix.js
@@ -606,7 +606,7 @@ var setupCss = function(){
        if($(window).height() < 400 || $(window).width() < 400){
                var cssrule = "<style type='text/css'>";
                cssrule += ".app_icon{ width: 64px !important; height:62px !important}";
-               cssrule += ".appContainer{ width: 115px !important; height: 106px !important}";
+               cssrule += ".appContainer{ width: 25% !important; height: 30% !important}"
                cssrule += ".appTitle{font-size: 12px !important;}";
                cssrule += "</style>";
                $(cssrule).appendTo("head");