Merge pull request #159 from elastalink/moving-styles

Moving style definition from login.handlebars to styles.css
This commit is contained in:
Ylian Saint-Hilaire 2019-04-04 11:09:22 -07:00 committed by GitHub
commit 273823ff85
3 changed files with 321 additions and 154 deletions

View File

@ -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 QV(x, y) { try { QS(x).display = (y ? '' : 'none'); } catch (x) { } } // "Q" visible
function QA(x, y) { Q(x).innerHTML += y; } // "Q" append function QA(x, y) { Q(x).innerHTML += y; } // "Q" append
function QH(x, y) { Q(x).innerHTML = y; } // "Q" html 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 // 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; } function inputBoxFocus(x) { Q(x).focus(); var v = Q(x).value; Q(x).value = ''; Q(x).value = v; }

View File

@ -12,6 +12,7 @@
background-color: #fff; background-color: #fff;
width: 960px; width: 960px;
min-width: 960px; min-width: 960px;
max-height: 100vh;
margin: 0 auto; margin: 0 auto;
border-top: 0; border-top: 0;
border-right: 1px solid #b7b7b7; border-right: 1px solid #b7b7b7;
@ -20,14 +21,112 @@
padding: 0; padding: 0;
} }
.fullscreen #container {
width: 100%;
min-width: 700px;
min-height: 0px;
border-right: 0px none #b7b7b7;
border-left: 0px none #b7b7b7;
}
#masthead { #masthead {
width: auto; width: auto;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: auto; overflow: hidden;
text-align: right; text-align: right;
background-color: #036; 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; 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 { #column_l {
@ -37,6 +136,62 @@
margin: 0; margin: 0;
padding: 0 15px; padding: 0 15px;
background-color: #fff; 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 { #footer {
@ -49,6 +204,35 @@
padding-bottom: 5px; 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 { #masthead img {
float: left; float: left;
} }
@ -69,6 +253,71 @@
text-decoration: none; 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 { a {
color: #036; color: #036;
text-decoration: underline; text-decoration: underline;
@ -202,6 +451,9 @@ a {
width: 62px; width: 62px;
cursor: pointer; cursor: pointer;
border: none; border: none;
position:absolute;
top: 6px;
left: 6px
} }
.lb2 { .lb2 {
@ -210,6 +462,9 @@ a {
width: 62px; width: 62px;
cursor: pointer; cursor: pointer;
border: none; border: none;
position:absolute;
top: 6px;
left: 6px
} }
.lb3 { .lb3 {
@ -218,6 +473,9 @@ a {
width: 62px; width: 62px;
cursor: pointer; cursor: pointer;
border: none; border: none;
position:absolute;
top: 6px;
left: 6px
} }
.lb4 { .lb4 {
@ -226,6 +484,9 @@ a {
width: 62px; width: 62px;
cursor: pointer; cursor: pointer;
border: none; border: none;
position:absolute;
top: 6px;
left: 6px
} }
.lb5 { .lb5 {
@ -234,6 +495,9 @@ a {
width: 62px; width: 62px;
cursor: pointer; cursor: pointer;
border: none; border: none;
position:absolute;
top: 6px;
left: 6px
} }
.lb6 { .lb6 {
@ -242,6 +506,9 @@ a {
width: 62px; width: 62px;
cursor: pointer; cursor: pointer;
border: none; border: none;
position:absolute;
top: 6px;
left: 6px
} }
.m0 { background : url(../images/images16.png) -32px 0px; height : 16px; width : 16px; border:none; float:left } .m0 { background : url(../images/images16.png) -32px 0px; height : 16px; width : 16px; border:none; float:left }
@ -628,6 +895,16 @@ a {
background-color: #EFE8B6; 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 { .deskToolsBar {
padding:3px; padding:3px;
} }

View File

@ -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="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="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" /> <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/common-0.0.1.js"></script>
<script keeplink=1 type="text/javascript" src="scripts/u2f-api.js"></script> <script keeplink=1 type="text/javascript" src="scripts/u2f-api.js"></script>
<title>MeshCentral - Login</title> <title>{{{title}}} - Login</title>
</head> </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=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">
<strong><font style="font-size:14px;font-family:Arial,Helvetica,sans-serif">{{{title2}}}</font></strong>
</div>
</div> </div>
<div id=page_content style="max-height:calc(100vh-108px)"> <div id=page_content>
<div id=topbar class="noselect style3" style="height:24px;position:relative"> <div id=topbar class="noselect style3">
<div title="Toggle full width" style="cursor:pointer;color:white;position:absolute;top:3px;right:6px" onclick="toggleFullScreen(1)">&harr;</div> <div id=toggle title="Toggle full width" onclick="toggleFullScreen(1)">&harr;</div>
</div> </div>
<div id=column_l> <div id=column_l>
<h1>Welcome</h1> <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> <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> <tr>
<td id="welcomeimage" align="right" style="display:none"> <td id="welcomeimage" style="display:none">
<picture> <picture>
<img alt="" width=359 height=310 src=welcome.jpg /> <img alt="" src=welcome.jpg />
</picture> </picture>
</td> </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> <form action="login" method=post>
<div id=message1> <div id=message1>
{{{message}}} {{{message}}}
@ -147,7 +64,7 @@
</div> </div>
</form> </form>
</div> </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> <form action=createaccount method=post>
<div id=message2> <div id=message2>
{{{message}}} {{{message}}}
@ -155,7 +72,7 @@
<div> <div>
<b>Account Creation</b> <b>Account Creation</b>
</div> </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> <table>
<tr> <tr>
<td id="nuUser" align=right width=100>Username:</td> <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> <hr /><a onclick=xgo(1) style=cursor:pointer>Back to login</a>
</form> </form>
</div> </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> <form action=resetaccount method=post>
<div id=message3> <div id=message3>
{{{message}}} {{{message}}}
@ -214,7 +131,7 @@
<hr /><a onclick=xgo(1) style=cursor:pointer>Back to login</a> <hr /><a onclick=xgo(1) style=cursor:pointer>Back to login</a>
</form> </form>
</div> </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> <form action=tokenlogin method=post autocomplete=off>
<div id=message4> <div id=message4>
{{{message}}} {{{message}}}
@ -236,7 +153,7 @@
<hr /><a onclick=xgo(1) style=cursor:pointer>Back to login</a> <hr /><a onclick=xgo(1) style=cursor:pointer>Back to login</a>
</form> </form>
</div> </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> <form action=resetaccount method=post>
<div id=message5> <div id=message5>
{{{message}}} {{{message}}}
@ -258,12 +175,12 @@
<hr /><a onclick=xgo(1) style=cursor:pointer>Back to login</a> <hr /><a onclick=xgo(1) style=cursor:pointer>Back to login</a>
</form> </form>
</div> </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> <form action=resetpassword method=post>
<div id=message6> <div id=message6>
{{{message}}} {{{message}}}
</div> </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> <table>
<tr> <tr>
<td id="rnuPass1" width=100 align=right>Password:</td> <td id="rnuPass1" width=100 align=right>Password:</td>
@ -292,38 +209,32 @@
</table> </table>
<br /> <br />
</div> </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> {{{rootCertLink}}}
{{{footer}}} &nbsp;<a href=terms>Terms &amp; Privacy</a>
</td> </div>
<td style=text-align:right>
{{{rootCertLink}}}
&nbsp;<a href=terms>Terms &amp; Privacy</a>
</td>
</tr>
</table>
</div> </div>
</div> </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 id=dialog style="display:none">
<div style="width:100%;background-color:#003366;color:#FFF;border-radius:5px 5px 0 0"> <div id=dialogHeader>
<div id=id_dialogclose style=float:right;padding:5px;cursor:pointer onclick=setDialogMode()><b>X</b></div> <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 id=id_dialogtitle style=padding:5px></div>
<div style=width:100%;margin:6px></div> <div style=width:100%;margin:6px></div>
</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>
<div id=dialog2 style="margin:auto;margin:3px"> <div id=dialog2 style="">
<div id=id_dialogOptions></div> <div id=id_dialogOptions></div>
</div> </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>
</div> </div>
<script> <script>
@ -707,40 +618,18 @@
function toggleFullScreen(toggle) { function toggleFullScreen(toggle) {
if (toggle === 1) { webPageFullScreen = !webPageFullScreen; putstore('webPageFullScreen', webPageFullScreen); } if (toggle === 1) { webPageFullScreen = !webPageFullScreen; putstore('webPageFullScreen', webPageFullScreen); }
if (webPageFullScreen == false) { 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 { } 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); QV('body', true);
center(); center();
} }
function 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) { if (webPageFullScreen == false) {
QS('centralTable')['margin-top'] = ''; QS('centralTable')['margin-top'] = '';