Moving style definition from login.handlebars to styles.css

public/scripts/common-0.0.1.js

@@ -16,6 +16,7 @@ function QE(x, y) { try { Q(x).disabled = !y; } catch (x) { } }
 function QV(x, y) { try { QS(x).display = (y ? '' : 'none'); } catch (x) { } }  // "Q" visible
 function QA(x, y) { Q(x).innerHTML += y; }                                      // "Q" append
 function QH(x, y) { Q(x).innerHTML = y; }                                       // "Q" html
+function QC(x) { try { return Q(x).classList; } catch (x) { } }                     // "Q" class
 
 // Move cursor to end of input box
 function inputBoxFocus(x) { Q(x).focus(); var v = Q(x).value; Q(x).value = ''; Q(x).value = v; }

public/styles/style.css

@@ -12,6 +12,7 @@
     background-color: #fff;
     width: 960px;
     min-width: 960px;
+    max-height: 100vh;
     margin: 0 auto;
     border-top: 0;
     border-right: 1px solid #b7b7b7;
@@ -20,14 +21,112 @@
     padding: 0;
 }
 
+    .fullscreen #container {
+        width: 100%;
+        min-width: 700px;
+        min-height: 0px;
+        border-right: 0px none #b7b7b7;
+        border-left: 0px none #b7b7b7;
+    }
+
 #masthead {
     width: auto;
     margin: 0;
     padding: 0;
-    overflow: auto;
+    overflow: hidden;
     text-align: right;
     background-color: #036;
+    background-image: url(../logo.png);
+    background-position-x: 0px;
+    background-position-y: 0px;
+    background-attachment: initial;
+    background-repeat: no-repeat;
     width: 960px;
+    height: 66px;
+}
+
+    .fullscreen #masthead {
+        width: 100%;
+    }
+
+#masthead .title {
+    float: left;
+    height: 66px;
+    color: #c8c8c8;
+    padding-left: 20px;
+    padding-top: 8px;
+    font-size: 46px;
+    font-family: Arial,Helvetica,sans-serif;
+    font-weight: bold;
+}
+
+#masthead .title2 {
+    float: left;
+    height: 66px;
+    color: #c8c8c8;
+    padding-left: 5px;
+    padding-top: 14px;
+    font-size: 14px;
+    font-family: Arial,Helvetica,sans-serif;
+    font-weight: bold;
+}
+
+#page_content {
+    max-height: calc(100vh - 108px);
+}
+    .fullscreen #page_content {
+        position: absolute;
+        top: 66px;
+        left: 90px;
+        right: 0px;
+        bottom: 0px;
+    }
+    .arg_hide #page_content {
+        left: 0px;
+    }
+
+#page_leftbar {
+    height: calc(100vh - 66px);
+    width: 90px;
+    position: absolute;
+    z-index: 1000;
+    background: #113962;
+    background: linear-gradient(to bottom, #104893 0%,#113962 100%);
+    color: white;
+    display: none;
+}
+    .fullscreen #page_leftbar {
+        display: block;
+    }
+    .arg_hide #page_leftbar {
+        display: none;
+    }
+
+#topbar {
+    /* height: 24px; */
+    position: relative;
+}
+.topbar_td {
+    width: 100px;
+    height: 24px;
+    cursor: pointer;
+}
+.topbar_td_end {
+    text-align: right;
+    height: 24px;
+}
+
+#toggle {
+    cursor: pointer;
+    color: white;
+    position: absolute;
+    top: 3px;
+    right: 6px
+}
+
+#MainMenuSpan, #MainSubMenu, #MeshSubMenu, #UserSubMenu, #ServerSubMenu, #UserDummyMenu {
+    width: 100%;
+    height: 22px
 }
 
 #column_l {
@@ -37,6 +136,62 @@
     margin: 0;
     padding: 0 15px;
     background-color: #fff;
+    max-height: calc(100vh - 111px);
+    min-width: unset;
+}
+
+    .fullscreen #column_l {
+        height: calc(100vh - 135px);
+        width: calc(100% - 30px);
+        overflow-y: auto;
+    }
+
+#centralTable {
+    width: 100%;
+}
+
+#welcomeimage {
+    text-align: right;
+}
+
+@media (max-width: 800px) {
+    .fullscreen #welcomeimage {
+        display: none;
+    }
+}
+
+#welcomeimage img {
+    height: 310px;
+    width: 359px;
+}
+
+#logincell {
+    text-align: center;
+}
+
+#loginpanel, #createpanel, #resetpanel, #tokenpanel, #resettokenpanel, #resetpasswordpanel, #resetpasswordpanel {
+    display: inline-block;
+    margin: 0;
+    background-color: #979797;
+    border-radius: 16px;
+    width: 300px;
+    padding: 16px;
+    text-align: center;
+}
+
+#passwordPolicyCallout, #rpasswordPolicyCallout {
+    left: -10px;
+    width: 100px;
+    position: absolute;
+    background-color: #FFC;
+    border-radius: 5px;
+    padding: 5px;
+    box-shadow: 0px 0px 15px #666;
+    font-size: 10px;
+}
+
+#passWarning {
+    padding-top:6px;
 }
 
 #footer {
@@ -49,6 +204,35 @@
     padding-bottom: 5px;
 }
 
+/* Support for footer made with table */
+#footer table {
+    width:100%;
+    border-spacing: 10px;
+    border-collapse: separate;
+}
+#footer td:first-child {
+    text-align: left;
+    color:white;
+}
+#footer td {
+    padding: 0px;
+    text-align: right;
+    color: white;
+}
+
+/* Support for new footer made with div (like masterhead) */
+.footer1 {
+    text-align: left;
+    float: left;
+    padding: 10px;
+    color: white;
+}
+.footer2 {
+    padding: 10px;
+    text-align: right;
+    color: white;
+}
+
 #masthead img {
     float: left;
 }
@@ -69,6 +253,71 @@
         text-decoration: none;
     }
 
+#dialog {
+    z-index: 1000;
+    background-color: #EEE;
+    box-shadow: 0px 0px 15px #666;
+    font-family: Arial,Helvetica,sans-serif;
+    border-radius: 5px;
+    position: fixed;
+    top: 180px;
+    left: 50%;
+    width: 400px;
+    margin-left: -200px;
+}
+
+#dialogHeader {
+    width: 100%;
+    background-color: #003366;
+    color: #FFF;
+    border-radius: 5px 5px 0 0;
+}
+
+#dialogBody {
+    margin-right: 16px;
+    margin-left: 8px;
+}
+
+#dialog1 {
+    margin: auto;
+    text-align: center;
+    margin: 3px;
+}
+
+#id_dialogMessage {
+    padding:10px;
+}
+
+#dialog2, #dialog3 {
+    margin: auto;
+    margin: 3px;
+}
+
+#idx_dlgButtonBar {
+    padding: 10px;
+    margin-bottom: 20px;
+}
+
+#idx_dlgCancelButton {
+    float: right;
+    width: 80px;
+    margin-left: 5px;
+}
+
+#idx_dlgOkButton {
+    float: right;
+    width: 80px;
+}
+
+#idx_dlgDeleteButton {
+    width: 80px;
+}
+
+#p0message {
+    margin: 50px;
+    text-align: center;
+}
+
 a {
     color: #036;
     text-decoration: underline;
@@ -202,6 +451,9 @@ a {
     width: 62px;
     cursor: pointer;
     border: none;
+    position:absolute;
+    top: 6px;
+    left: 6px
 }
 
 .lb2 {
@@ -210,6 +462,9 @@ a {
     width: 62px;
     cursor: pointer;
     border: none;
+    position:absolute;
+    top: 6px;
+    left: 6px
 }
 
 .lb3 {
@@ -218,6 +473,9 @@ a {
     width: 62px;
     cursor: pointer;
     border: none;
+    position:absolute;
+    top: 6px;
+    left: 6px
 }
 
 .lb4 {
@@ -226,6 +484,9 @@ a {
     width: 62px;
     cursor: pointer;
     border: none;
+    position:absolute;
+    top: 6px;
+    left: 6px
 }
 
 .lb5 {
@@ -234,6 +495,9 @@ a {
     width: 62px;
     cursor: pointer;
     border: none;
+    position:absolute;
+    top: 6px;
+    left: 6px
 }
 
 .lb6 {
@@ -242,6 +506,9 @@ a {
     width: 62px;
     cursor: pointer;
     border: none;
+    position:absolute;
+    top: 6px;
+    left: 6px
 }
 
 .m0  { background : url(../images/images16.png)  -32px 0px; height : 16px; width : 16px; border:none; float:left }
@@ -628,6 +895,16 @@ a {
     background-color: #EFE8B6;
 }
 
+#notificationCount {
+    min-width: 28px;
+    font-size: 20px;
+    border-radius: 5px;
+    background-color: lightblue;
+    text-align: center;
+    margin: 8px;
+    cursor: pointer;
+    padding: 4px
+}
 .deskToolsBar {
     padding:3px;
 }

views/login.handlebars

@@ -6,117 +6,34 @@
     <meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="format-detection" content="telephone=no" />
-    <style>
+    <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
-        body {
-            margin: 0;
-            padding: 0;
-            border: 0;
-            color: black;
-            font-size: 13px;
-            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
-            background-color: #d3d9d6;
-        }
-
-        #container {
-            background-color: #fff;
-            margin: 0 auto;
-            border-top: 0;
-            border-right: 1px solid #b7b7b7;
-            border-bottom: 0;
-            border-left: 1px solid #b7b7b7;
-            padding: 0;
-        }
-
-        #masthead {
-            width: auto;
-            margin: 0;
-            padding: 0;
-            overflow: auto;
-            text-align: right;
-            background-color: #036;
-        }
-
-        #column_l {
-            position: relative;
-            float: left;
-            margin: 0;
-            padding: 0 15px;
-            background-color: #fff;
-        }
-
-        #footer {
-            clear: both;
-            overflow: auto;
-            width: 100%;
-            text-align: center;
-            background-color: #113962;
-            padding-top: 5px;
-            padding-bottom: 5px;
-        }
-
-        .style3 {
-            text-align: center;
-            color: white;
-            background-color: #808080;
-            font-weight: bold;
-        }
-
-        #footer {
-            clear: both;
-            overflow: auto;
-            width: 100%;
-            text-align: center;
-            background-color: #113962;
-            padding-top: 5px;
-            padding-bottom: 5px;
-        }
-
-        #footer a {
-            color: #fff;
-            text-decoration: underline;
-        }
-
-            #footer a:hover {
-                color: #fff;
-                text-decoration: none;
-            }
-
-        a {
-            color: #036;
-            text-decoration: underline;
-        }
-    </style>
     <script type="text/javascript" src="scripts/common-0.0.1.js"></script>
     <script type="text/javascript" src="scripts/u2f-api.js"></script>
-    <title>MeshCentral - Login</title>
+    <title>{{{title}}} - Login</title>
 </head>
-<body onload="if (typeof(startup) !== 'undefined') startup();">
+<body id="body" onload="if (typeof(startup) !== 'undefined') startup();" class="arg_hide">
-    <div id=container style=max-height:100vh>
+    <div id=container>
         <div id=mastheadx></div>
-        <div id=masthead style="background:url(logo.png) 0px 0px;background-color:#036;background-repeat:no-repeat;height:66px;width:100%;overflow:hidden">
+        <div id=masthead>
-            <div style="float:left;height:66px;color:#c8c8c8;padding-left:20px;padding-top:8px">
+            <div class="title">{{{title}}}</div>
-                <strong><font style="font-size:46px;font-family:Arial,Helvetica,sans-serif">{{{title}}}</font></strong>
+            <div class="title2">{{{title2}}}</div>
         </div>
-            <div style="float:left;height:66px;color:#c8c8c8;padding-left:5px;padding-top:14px">
+        <div id=page_content>
-                <strong><font style="font-size:14px;font-family:Arial,Helvetica,sans-serif">{{{title2}}}</font></strong>
+            <div id=topbar class="noselect style3">
-            </div>
+                <div id=toggle title="Toggle full width" onclick="toggleFullScreen(1)">&harr;</div>
-        </div>
-        <div id=page_content style="max-height:calc(100vh-108px)">
-            <div id=topbar class="noselect style3" style="height:24px;position:relative">
-                <div title="Toggle full width" style="cursor:pointer;color:white;position:absolute;top:3px;right:6px" onclick="toggleFullScreen(1)">&harr;</div>
             </div>
             <div id=column_l>
                 <h1>Welcome</h1>
                 <div id="welcomeText" style="display:none">Connect to your home or office devices from anywhere in the world using <a href="http://www.meshcommander.com/meshcentral2">MeshCentral</a>, the real time, open source remote monitoring and management web site. You will need to download and install a management agent on your computers. Once installed, computers will show up in the &quot;My Devices&quot; section of this web site and you will be able to monitor them and take control of them.</div>
-                <table id="centralTable" style=width:100%>
+                <table id="centralTable" style="">
                     <tr>
-                        <td id="welcomeimage" align="right">
+                        <td id="welcomeimage">
                             <picture>
-                                <img alt="" width=359 height=310 src=welcome.jpg />
+                                <img alt="" src=welcome.jpg />
                             </picture>
                         </td>
-                        <td id="logincell" align="left">
+                        <td id="logincell">
-                            <div id=loginpanel style="background-color: #979797;border-radius:16px;width:300px;padding:16px;text-align:center;display:none">
+                            <div id=loginpanel style="display:none">
                                 <form action="login" method=post>
                                     <div id=message1>
                                         {{{message}}}
@@ -147,7 +64,7 @@
                                     </div>
                                 </form>
                             </div>
-                            <div id=createpanel style="position:relative;background-color:#979797;border-radius:16px;width:300px;padding:16px;text-align:center;display:none">
+                            <div id=createpanel style="display:none">
                                 <form action=createaccount method=post>
                                     <div id=message2>
                                         {{{message}}}
@@ -155,7 +72,7 @@
                                     <div>
                                         <b>Account Creation</b>
                                     </div>
-                                    <div id="passwordPolicyCallout" style="left:-10px;width:100px;display:none;position:absolute;background-color:#FFC;border-radius:5px;padding:5px;box-shadow:0px 0px 15px #666;font-size:10px"></div>
+                                    <div id="passwordPolicyCallout" style="display:none;"></div>
                                     <table>
                                         <tr>
                                             <td id="nuUser" align=right width=100>Username:</td>
@@ -191,7 +108,7 @@
                                     <hr /><a onclick=xgo(1) style=cursor:pointer>Back to login</a>
                                 </form>
                             </div>
-                            <div id=resetpanel style="background-color: #979797;border-radius:16px;width:300px;padding:16px;text-align:center;display:none">
+                            <div id=resetpanel style="display:none">
                                 <form action=resetaccount method=post>
                                     <div id=message3>
                                         {{{message}}}
@@ -214,7 +131,7 @@
                                     <hr /><a onclick=xgo(1) style=cursor:pointer>Back to login</a>
                                 </form>
                             </div>
-                            <div id=tokenpanel style="background-color: #979797;border-radius:16px;width:300px;padding:16px;text-align:center;display:none">
+                            <div id=tokenpanel style="display:none">
                                 <form action=tokenlogin method=post autocomplete=off>
                                     <div id=message4>
                                         {{{message}}}
@@ -236,7 +153,7 @@
                                     <hr /><a onclick=xgo(1) style=cursor:pointer>Back to login</a>
                                 </form>
                             </div>
-                            <div id=resettokenpanel style="background-color: #979797;border-radius:16px;width:300px;padding:16px;text-align:center;display:none">
+                            <div id=resettokenpanel style="display:none">
                                 <form action=resetaccount method=post>
                                     <div id=message5>
                                         {{{message}}}
@@ -258,12 +175,12 @@
                                     <hr /><a onclick=xgo(1) style=cursor:pointer>Back to login</a>
                                 </form>
                             </div>
-                            <div id=resetpasswordpanel style="position:relative;background-color: #979797;border-radius:16px;width:300px;padding:16px;text-align:center;display:none">
+                            <div id=resetpasswordpanel style="display:none">
                                 <form action=resetpassword method=post>
                                     <div id=message6>
                                         {{{message}}}
                                     </div>
-                                    <div id="rpasswordPolicyCallout" style="left:-10px;width:100px;display:none;position:absolute;background-color:#FFC;border-radius:5px;padding:5px;box-shadow:0px 0px 15px #666;font-size:10px"></div>
+                                    <div id="rpasswordPolicyCallout" style="display:none;"></div>
                                     <table>
                                         <tr>
                                             <td id="rnuPass1" width=100 align=right>Password:</td>
@@ -292,38 +209,32 @@
                 </table>
                 <br />
             </div>
-            <div id=footer>
+            <div id="footer">
-                <table cellpadding=0 cellspacing=10 style=width:100%>
+                <div class="footer1">{{{footer}}}</div>
-                    <tr>
+                <div class="footer2">
-                        <td style=text-align:left;color:white>
-                            {{{footer}}}
-                        </td>
-                        <td style=text-align:right>
                     {{{rootCertLink}}}
                     &nbsp;<a href=terms>Terms &amp; Privacy</a>
-                        </td>
-                    </tr>
-                </table>
                 </div>
             </div>
         </div>
-    <div id=dialog style="z-index:1000;background-color:#EEE;box-shadow:0px 0px 15px #666;font-family:Arial,Helvetica,sans-serif;border-radius:5px;position:fixed;top:180px;width:400px;display:none">
+    </div>
-        <div style="width:100%;background-color:#003366;color:#FFF;border-radius:5px 5px 0 0">
+    <div id=dialog style="display:none">
+        <div id=dialogHeader>
             <div id=id_dialogclose style=float:right;padding:5px;cursor:pointer onclick=setDialogMode()><b>X</b></div>
             <div id=id_dialogtitle style=padding:5px></div>
             <div style=width:100%;margin:6px></div>
         </div>
-        <div style="margin-right:16px;margin-left:8px">
+        <div id=dialogBody>
-            <div id=dialog1 style="margin:auto;text-align:center;margin:3px">
+            <div id=dialog1>
-                <div id=id_dialogMessage style="padding:10px"></div>
+                <div id=id_dialogMessage style=""></div>
             </div>
-            <div id=dialog2 style="margin:auto;margin:3px">
+            <div id=dialog2 style="">
                 <div id=id_dialogOptions></div>
             </div>
         </div>
-        <div id="idx_dlgButtonBar" style="padding:10px;margin-bottom:20px">
+        <div id="idx_dlgButtonBar" style="">
-            <input id="idx_dlgCancelButton" type="button" value="Cancel" style="float:right;width:80px;margin-left:5px" onclick="dialogclose(0)">
+            <input id="idx_dlgCancelButton" type="button" value="Cancel" style="" onclick="dialogclose(0)">
-            <input id="idx_dlgOkButton" type="button" value="OK" style="float:right;width:80px" onclick="dialogclose(1)">
+            <input id="idx_dlgOkButton" type="button" value="OK" style="" onclick="dialogclose(1)">
         </div>
     </div>
     <script>
@@ -680,40 +591,18 @@
         function toggleFullScreen(toggle) {
             if (toggle === 1) { webPageFullScreen = !webPageFullScreen; putstore('webPageFullScreen', webPageFullScreen); }
             if (webPageFullScreen == false) {
-                QS('container').width = '960px';
+                // By adding body class, it will change a style of all ellements using CSS selector
-                QS('container')["min-width"] = '960px';
+                // No need for JS anymore and it will be consistent style for all the templates.
-                QS('container')['border-right'] = '1px solid #b7b7b7';
+                QC('body').remove("fullscreen");
-                QS('container')['border-left'] = '1px solid #b7b7b7';
-                QS('container')['overflow'] = 'hidden';
-                QS('column_l').height = '';
-                QS('column_l').width = '930px';
-                QS('column_l')["overflow-y"] = '';
-                QS('column_l')["max-height"] = 'calc(100vh - 111px)';
-                QS('column_l')["min-width"] = '';
-                QS('masthead')["width"] = '960px';
             } else {
-                QS('container').width = '100%';
+                QC('body').add("fullscreen");
-                QS('container')['min-width'] = '';
-                QS('container')['border-right'] = '0';
-                QS('container')['border-left'] = '0';
-                QS('container')['overflow'] = 'hidden';
-                QS('column_l').height = 'calc(100vh - 135px)';
-                QS('column_l').width = '';
-                QS('column_l')["overflow-y"] = 'auto';
-                QS('column_l')["max-height"] = 'calc(100vh - 111px)';
-                QS('column_l')["min-width"] = '';
-                QS('masthead')["width"] = '100%';
             }
             QV('body', true);
             center();
         }
 
         function center() {
-            var w = getDocWidth();
+            /* Now we use CSS media to achive the same effect as deleted JS  */
-            QS('dialog').left = ((((w - 400) / 2)) + "px");
-            var showimage = (webPageFullScreen == false) || (w > 800);
-            QV('welcomeimage', showimage);
-            Q('logincell').setAttribute('align', showimage?'left':'center');
 
             if (webPageFullScreen == false) {
                 QS('centralTable')['margin-top'] = '';