Moving style definition from login.handlebars to styles.css
Jovan Strika committed
Mar 30, 2019 at 18:48 UTC
45e3dbdbed03ba341b4c7900dd94633dbd825463
3 files changed
+321
-154
public/scripts/common-0.0.1.js
+1
@@ -16,6 +16,7 @@ function QE(x, y) { try { Q(x).disabled = !y; } catch (x) { } }
16
function QV(x, y) { try { QS(x).display = (y ? '' : 'none'); } catch (x) { } } // "Q" visible
17
function QA(x, y) { Q(x).innerHTML += y; } // "Q" append
18
function QH(x, y) { Q(x).innerHTML = y; } // "Q" html
19
+function QC(x) { try { return Q(x).classList; } catch (x) { } } // "Q" class
20
21
// Move cursor to end of input box
22
function inputBoxFocus(x) { Q(x).focus(); var v = Q(x).value; Q(x).value = ''; Q(x).value = v; }
public/styles/style.css
+278
-1
@@ -12,6 +12,7 @@
12
background-color: #fff;
13
width: 960px;
14
min-width: 960px;
15
+ max-height: 100vh;
16
margin: 0 auto;
17
border-top: 0;
18
border-right: 1px solid #b7b7b7;
@@ -20,14 +21,112 @@
21
padding: 0;
22
}
23
24
+ .fullscreen #container {
25
+ width: 100%;
26
+ min-width: 700px;
27
+ min-height: 0px;
28
+ border-right: 0px none #b7b7b7;
29
+ border-left: 0px none #b7b7b7;
30
+ }
31
+
32
#masthead {
33
width: auto;
34
margin: 0;
35
padding: 0;
27
- overflow: auto;
36
+ overflow: hidden;
37
text-align: right;
38
background-color: #036;
39
+ background-image: url(../logo.png);
40
+ background-position-x: 0px;
41
+ background-position-y: 0px;
42
+ background-attachment: initial;
43
+ background-repeat: no-repeat;
44
width: 960px;
45
+ height: 66px;
46
+}
47
+
48
+ .fullscreen #masthead {
49
+ width: 100%;
50
+ }
51
+
52
+#masthead .title {
53
+ float: left;
54
+ height: 66px;
55
+ color: #c8c8c8;
56
+ padding-left: 20px;
57
+ padding-top: 8px;
58
+ font-size: 46px;
59
+ font-family: Arial,Helvetica,sans-serif;
60
+ font-weight: bold;
61
+}
62
+
63
+#masthead .title2 {
64
+ float: left;
65
+ height: 66px;
66
+ color: #c8c8c8;
67
+ padding-left: 5px;
68
+ padding-top: 14px;
69
+ font-size: 14px;
70
+ font-family: Arial,Helvetica,sans-serif;
71
+ font-weight: bold;
72
+}
73
+
74
+#page_content {
75
+ max-height: calc(100vh - 108px);
76
+}
77
+ .fullscreen #page_content {
78
+ position: absolute;
79
+ top: 66px;
80
+ left: 90px;
81
+ right: 0px;
82
+ bottom: 0px;
83
+ }
84
+ .arg_hide #page_content {
85
+ left: 0px;
86
+ }
87
+
88
+#page_leftbar {
89
+ height: calc(100vh - 66px);
90
+ width: 90px;
91
+ position: absolute;
92
+ z-index: 1000;
93
+ background: #113962;
94
+ background: linear-gradient(to bottom, #104893 0%,#113962 100%);
95
+ color: white;
96
+ display: none;
97
+}
98
+ .fullscreen #page_leftbar {
99
+ display: block;
100
+ }
101
+ .arg_hide #page_leftbar {
102
+ display: none;
103
+ }
104
+
105
+#topbar {
106
+ /* height: 24px; */
107
+ position: relative;
108
+}
109
+.topbar_td {
110
+ width: 100px;
111
+ height: 24px;
112
+ cursor: pointer;
113
+}
114
+.topbar_td_end {
115
+ text-align: right;
116
+ height: 24px;
117
+}
118
+
119
+#toggle {
120
+ cursor: pointer;
121
+ color: white;
122
+ position: absolute;
123
+ top: 3px;
124
+ right: 6px
125
+}
126
+
127
+#MainMenuSpan, #MainSubMenu, #MeshSubMenu, #UserSubMenu, #ServerSubMenu, #UserDummyMenu {
128
+ width: 100%;
129
+ height: 22px
130
}
131
132
#column_l {
@@ -37,6 +136,62 @@
136
margin: 0;
137
padding: 0 15px;
138
background-color: #fff;
139
+ max-height: calc(100vh - 111px);
140
+ min-width: unset;
141
+}
142
+
143
+ .fullscreen #column_l {
144
+ height: calc(100vh - 135px);
145
+ width: calc(100% - 30px);
146
+ overflow-y: auto;
147
+ }
148
+
149
+#centralTable {
150
+ width: 100%;
151
+}
152
+
153
+#welcomeimage {
154
+ text-align: right;
155
+}
156
+
157
+@media (max-width: 800px) {
158
+ .fullscreen #welcomeimage {
159
+ display: none;
160
+ }
161
+}
162
+
163
+#welcomeimage img {
164
+ height: 310px;
165
+ width: 359px;
166
+}
167
+
168
+#logincell {
169
+ text-align: center;
170
+}
171
+
172
+#loginpanel, #createpanel, #resetpanel, #tokenpanel, #resettokenpanel, #resetpasswordpanel, #resetpasswordpanel {
173
+ display: inline-block;
174
+ margin: 0;
175
+ background-color: #979797;
176
+ border-radius: 16px;
177
+ width: 300px;
178
+ padding: 16px;
179
+ text-align: center;
180
+}
181
+
182
+#passwordPolicyCallout, #rpasswordPolicyCallout {
183
+ left: -10px;
184
+ width: 100px;
185
+ position: absolute;
186
+ background-color: #FFC;
187
+ border-radius: 5px;
188
+ padding: 5px;
189
+ box-shadow: 0px 0px 15px #666;
190
+ font-size: 10px;
191
+}
192
+
193
+#passWarning {
194
+ padding-top:6px;
195
}
196
197
#footer {
@@ -49,6 +204,35 @@
204
padding-bottom: 5px;
205
}
206
207
+/* Support for footer made with table */
208
+#footer table {
209
+ width:100%;
210
+ border-spacing: 10px;
211
+ border-collapse: separate;
212
+}
213
+#footer td:first-child {
214
+ text-align: left;
215
+ color:white;
216
+}
217
+#footer td {
218
+ padding: 0px;
219
+ text-align: right;
220
+ color: white;
221
+}
222
+
223
+/* Support for new footer made with div (like masterhead) */
224
+.footer1 {
225
+ text-align: left;
226
+ float: left;
227
+ padding: 10px;
228
+ color: white;
229
+}
230
+.footer2 {
231
+ padding: 10px;
232
+ text-align: right;
233
+ color: white;
234
+}
235
+
236
#masthead img {
237
float: left;
238
}
@@ -69,6 +253,71 @@
253
text-decoration: none;
254
}
255
256
+#dialog {
257
+ z-index: 1000;
258
+ background-color: #EEE;
259
+ box-shadow: 0px 0px 15px #666;
260
+ font-family: Arial,Helvetica,sans-serif;
261
+ border-radius: 5px;
262
+ position: fixed;
263
+ top: 180px;
264
+ left: 50%;
265
+ width: 400px;
266
+ margin-left: -200px;
267
+}
268
+
269
+#dialogHeader {
270
+ width: 100%;
271
+ background-color: #003366;
272
+ color: #FFF;
273
+ border-radius: 5px 5px 0 0;
274
+}
275
+
276
+#dialogBody {
277
+ margin-right: 16px;
278
+ margin-left: 8px;
279
+}
280
+
281
+#dialog1 {
282
+ margin: auto;
283
+ text-align: center;
284
+ margin: 3px;
285
+}
286
+
287
+#id_dialogMessage {
288
+ padding:10px;
289
+}
290
+
291
+#dialog2, #dialog3 {
292
+ margin: auto;
293
+ margin: 3px;
294
+}
295
+
296
+#idx_dlgButtonBar {
297
+ padding: 10px;
298
+ margin-bottom: 20px;
299
+}
300
+
301
+#idx_dlgCancelButton {
302
+ float: right;
303
+ width: 80px;
304
+ margin-left: 5px;
305
+}
306
+
307
+#idx_dlgOkButton {
308
+ float: right;
309
+ width: 80px;
310
+}
311
+
312
+#idx_dlgDeleteButton {
313
+ width: 80px;
314
+}
315
+
316
+#p0message {
317
+ margin: 50px;
318
+ text-align: center;
319
+}
320
+
321
a {
322
color: #036;
323
text-decoration: underline;
@@ -202,6 +451,9 @@ a {
451
width: 62px;
452
cursor: pointer;
453
border: none;
454
+ position:absolute;
455
+ top: 6px;
456
+ left: 6px
457
}
458
459
.lb2 {
@@ -210,6 +462,9 @@ a {
462
width: 62px;
463
cursor: pointer;
464
border: none;
465
+ position:absolute;
466
+ top: 6px;
467
+ left: 6px
468
}
469
470
.lb3 {
@@ -218,6 +473,9 @@ a {
473
width: 62px;
474
cursor: pointer;
475
border: none;
476
+ position:absolute;
477
+ top: 6px;
478
+ left: 6px
479
}
480
481
.lb4 {
@@ -226,6 +484,9 @@ a {
484
width: 62px;
485
cursor: pointer;
486
border: none;
487
+ position:absolute;
488
+ top: 6px;
489
+ left: 6px
490
}
491
492
.lb5 {
@@ -234,6 +495,9 @@ a {
495
width: 62px;
496
cursor: pointer;
497
border: none;
498
+ position:absolute;
499
+ top: 6px;
500
+ left: 6px
501
}
502
503
.lb6 {
@@ -242,6 +506,9 @@ a {
506
width: 62px;
507
cursor: pointer;
508
border: none;
509
+ position:absolute;
510
+ top: 6px;
511
+ left: 6px
512
}
513
514
.m0 { background : url(../images/images16.png) -32px 0px; height : 16px; width : 16px; border:none; float:left }
@@ -628,6 +895,16 @@ a {
895
background-color: #EFE8B6;
896
}
897
898
+#notificationCount {
899
+ min-width: 28px;
900
+ font-size: 20px;
901
+ border-radius: 5px;
902
+ background-color: lightblue;
903
+ text-align: center;
904
+ margin: 8px;
905
+ cursor: pointer;
906
+ padding: 4px
907
+}
908
.deskToolsBar {
909
padding:3px;
910
}
views/login.handlebars
+42
-153
@@ -6,117 +6,34 @@
6
<meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
7
<meta name="apple-mobile-web-app-capable" content="yes" />
8
<meta name="format-detection" content="telephone=no" />
9
- <style>
10
- body {
11
- margin: 0;
12
- padding: 0;
13
- border: 0;
14
- color: black;
15
- font-size: 13px;
16
- font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
17
- background-color: #d3d9d6;
18
- }
19
-
20
- #container {
21
- background-color: #fff;
22
- margin: 0 auto;
23
- border-top: 0;
24
- border-right: 1px solid #b7b7b7;
25
- border-bottom: 0;
26
- border-left: 1px solid #b7b7b7;
27
- padding: 0;
28
- }
29
-
30
- #masthead {
31
- width: auto;
32
- margin: 0;
33
- padding: 0;
34
- overflow: auto;
35
- text-align: right;
36
- background-color: #036;
37
- }
38
-
39
- #column_l {
40
- position: relative;
41
- float: left;
42
- margin: 0;
43
- padding: 0 15px;
44
- background-color: #fff;
45
- }
46
-
47
- #footer {
48
- clear: both;
49
- overflow: auto;
50
- width: 100%;
51
- text-align: center;
52
- background-color: #113962;
53
- padding-top: 5px;
54
- padding-bottom: 5px;
55
- }
56
-
57
- .style3 {
58
- text-align: center;
59
- color: white;
60
- background-color: #808080;
61
- font-weight: bold;
62
- }
63
-
64
- #footer {
65
- clear: both;
66
- overflow: auto;
67
- width: 100%;
68
- text-align: center;
69
- background-color: #113962;
70
- padding-top: 5px;
71
- padding-bottom: 5px;
72
- }
73
-
74
- #footer a {
75
- color: #fff;
76
- text-decoration: underline;
77
- }
78
-
79
- #footer a:hover {
80
- color: #fff;
81
- text-decoration: none;
82
- }
83
-
84
- a {
85
- color: #036;
86
- text-decoration: underline;
87
- }
88
- </style>
9
+ <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
10
<script type="text/javascript" src="scripts/common-0.0.1.js"></script>
11
<script type="text/javascript" src="scripts/u2f-api.js"></script>
91
- <title>MeshCentral - Login</title>
12
+ <title>{{{title}}} - Login</title>
13
</head>
93
-<body onload="if (typeof(startup) !== 'undefined') startup();">
94
- <div id=container style=max-height:100vh>
14
+<body id="body" onload="if (typeof(startup) !== 'undefined') startup();" class="arg_hide">
15
+ <div id=container>
16
<div id=mastheadx></div>
96
- <div id=masthead style="background:url(logo.png) 0px 0px;background-color:#036;background-repeat:no-repeat;height:66px;width:100%;overflow:hidden">
97
- <div style="float:left;height:66px;color:#c8c8c8;padding-left:20px;padding-top:8px">
98
- <strong><font style="font-size:46px;font-family:Arial,Helvetica,sans-serif">{{{title}}}</font></strong>
99
- </div>
100
- <div style="float:left;height:66px;color:#c8c8c8;padding-left:5px;padding-top:14px">
101
- <strong><font style="font-size:14px;font-family:Arial,Helvetica,sans-serif">{{{title2}}}</font></strong>
102
- </div>
17
+ <div id=masthead>
18
+ <div class="title">{{{title}}}</div>
19
+ <div class="title2">{{{title2}}}</div>
20
</div>
104
- <div id=page_content style="max-height:calc(100vh-108px)">
105
- <div id=topbar class="noselect style3" style="height:24px;position:relative">
106
- <div title="Toggle full width" style="cursor:pointer;color:white;position:absolute;top:3px;right:6px" onclick="toggleFullScreen(1)">↔</div>
21
+ <div id=page_content>
22
+ <div id=topbar class="noselect style3">
23
+ <div id=toggle title="Toggle full width" onclick="toggleFullScreen(1)">↔</div>
24
</div>
25
<div id=column_l>
26
<h1>Welcome</h1>
27
<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 "My Devices" section of this web site and you will be able to monitor them and take control of them.</div>
111
- <table id="centralTable" style=width:100%>
28
+ <table id="centralTable" style="">
29
<tr>
113
- <td id="welcomeimage" align="right">
30
+ <td id="welcomeimage">
31
<picture>
115
- <img alt="" width=359 height=310 src=welcome.jpg />
32
+ <img alt="" src=welcome.jpg />
33
</picture>
34
</td>
118
- <td id="logincell" align="left">
119
- <div id=loginpanel style="background-color: #979797;border-radius:16px;width:300px;padding:16px;text-align:center;display:none">
35
+ <td id="logincell">
36
+ <div id=loginpanel style="display:none">
37
<form action="login" method=post>
38
<div id=message1>
39
{{{message}}}
@@ -147,7 +64,7 @@
64
</div>
65
</form>
66
</div>
150
- <div id=createpanel style="position:relative;background-color:#979797;border-radius:16px;width:300px;padding:16px;text-align:center;display:none">
67
+ <div id=createpanel style="display:none">
68
<form action=createaccount method=post>
69
<div id=message2>
70
{{{message}}}
@@ -155,7 +72,7 @@
72
<div>
73
<b>Account Creation</b>
74
</div>
158
- <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>
75
+ <div id="passwordPolicyCallout" style="display:none;"></div>
76
<table>
77
<tr>
78
<td id="nuUser" align=right width=100>Username:</td>
@@ -191,7 +108,7 @@
108
<hr /><a onclick=xgo(1) style=cursor:pointer>Back to login</a>
109
</form>
110
</div>
194
- <div id=resetpanel style="background-color: #979797;border-radius:16px;width:300px;padding:16px;text-align:center;display:none">
111
+ <div id=resetpanel style="display:none">
112
<form action=resetaccount method=post>
113
<div id=message3>
114
{{{message}}}
@@ -214,7 +131,7 @@
131
<hr /><a onclick=xgo(1) style=cursor:pointer>Back to login</a>
132
</form>
133
</div>
217
- <div id=tokenpanel style="background-color: #979797;border-radius:16px;width:300px;padding:16px;text-align:center;display:none">
134
+ <div id=tokenpanel style="display:none">
135
<form action=tokenlogin method=post autocomplete=off>
136
<div id=message4>
137
{{{message}}}
@@ -236,7 +153,7 @@
153
<hr /><a onclick=xgo(1) style=cursor:pointer>Back to login</a>
154
</form>
155
</div>
239
- <div id=resettokenpanel style="background-color: #979797;border-radius:16px;width:300px;padding:16px;text-align:center;display:none">
156
+ <div id=resettokenpanel style="display:none">
157
<form action=resetaccount method=post>
158
<div id=message5>
159
{{{message}}}
@@ -258,12 +175,12 @@
175
<hr /><a onclick=xgo(1) style=cursor:pointer>Back to login</a>
176
</form>
177
</div>
261
- <div id=resetpasswordpanel style="position:relative;background-color: #979797;border-radius:16px;width:300px;padding:16px;text-align:center;display:none">
178
+ <div id=resetpasswordpanel style="display:none">
179
<form action=resetpassword method=post>
180
<div id=message6>
181
{{{message}}}
182
</div>
266
- <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>
183
+ <div id="rpasswordPolicyCallout" style="display:none;"></div>
184
<table>
185
<tr>
186
<td id="rnuPass1" width=100 align=right>Password:</td>
@@ -292,38 +209,32 @@
209
</table>
210
<br />
211
</div>
295
- <div id=footer>
296
- <table cellpadding=0 cellspacing=10 style=width:100%>
297
- <tr>
298
- <td style=text-align:left;color:white>
299
- {{{footer}}}
300
- </td>
301
- <td style=text-align:right>
302
- {{{rootCertLink}}}
303
- <a href=terms>Terms & Privacy</a>
304
- </td>
305
- </tr>
306
- </table>
212
+ <div id="footer">
213
+ <div class="footer1">{{{footer}}}</div>
214
+ <div class="footer2">
215
+ {{{rootCertLink}}}
216
+ <a href=terms>Terms & Privacy</a>
217
+ </div>
218
</div>
219
</div>
220
</div>
310
- <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">
311
- <div style="width:100%;background-color:#003366;color:#FFF;border-radius:5px 5px 0 0">
221
+ <div id=dialog style="display:none">
222
+ <div id=dialogHeader>
223
<div id=id_dialogclose style=float:right;padding:5px;cursor:pointer onclick=setDialogMode()><b>X</b></div>
224
<div id=id_dialogtitle style=padding:5px></div>
225
<div style=width:100%;margin:6px></div>
226
</div>
316
- <div style="margin-right:16px;margin-left:8px">
317
- <div id=dialog1 style="margin:auto;text-align:center;margin:3px">
318
- <div id=id_dialogMessage style="padding:10px"></div>
227
+ <div id=dialogBody>
228
+ <div id=dialog1>
229
+ <div id=id_dialogMessage style=""></div>
230
</div>
320
- <div id=dialog2 style="margin:auto;margin:3px">
231
+ <div id=dialog2 style="">
232
<div id=id_dialogOptions></div>
233
</div>
234
</div>
324
- <div id="idx_dlgButtonBar" style="padding:10px;margin-bottom:20px">
325
- <input id="idx_dlgCancelButton" type="button" value="Cancel" style="float:right;width:80px;margin-left:5px" onclick="dialogclose(0)">
326
- <input id="idx_dlgOkButton" type="button" value="OK" style="float:right;width:80px" onclick="dialogclose(1)">
235
+ <div id="idx_dlgButtonBar" style="">
236
+ <input id="idx_dlgCancelButton" type="button" value="Cancel" style="" onclick="dialogclose(0)">
237
+ <input id="idx_dlgOkButton" type="button" value="OK" style="" onclick="dialogclose(1)">
238
</div>
239
</div>
240
<script>
@@ -680,40 +591,18 @@
591
function toggleFullScreen(toggle) {
592
if (toggle === 1) { webPageFullScreen = !webPageFullScreen; putstore('webPageFullScreen', webPageFullScreen); }
593
if (webPageFullScreen == false) {
683
- QS('container').width = '960px';
684
- QS('container')["min-width"] = '960px';
685
- QS('container')['border-right'] = '1px solid #b7b7b7';
686
- QS('container')['border-left'] = '1px solid #b7b7b7';
687
- QS('container')['overflow'] = 'hidden';
688
- QS('column_l').height = '';
689
- QS('column_l').width = '930px';
690
- QS('column_l')["overflow-y"] = '';
691
- QS('column_l')["max-height"] = 'calc(100vh - 111px)';
692
- QS('column_l')["min-width"] = '';
693
- QS('masthead')["width"] = '960px';
594
+ // By adding body class, it will change a style of all ellements using CSS selector
595
+ // No need for JS anymore and it will be consistent style for all the templates.
596
+ QC('body').remove("fullscreen");
597
} else {
695
- QS('container').width = '100%';
696
- QS('container')['min-width'] = '';
697
- QS('container')['border-right'] = '0';
698
- QS('container')['border-left'] = '0';
699
- QS('container')['overflow'] = 'hidden';
700
- QS('column_l').height = 'calc(100vh - 135px)';
701
- QS('column_l').width = '';
702
- QS('column_l')["overflow-y"] = 'auto';
703
- QS('column_l')["max-height"] = 'calc(100vh - 111px)';
704
- QS('column_l')["min-width"] = '';
705
- QS('masthead')["width"] = '100%';
598
+ QC('body').add("fullscreen");
599
}
600
QV('body', true);
601
center();
602
}
603
604
function center() {
712
- var w = getDocWidth();
713
- QS('dialog').left = ((((w - 400) / 2)) + "px");
714
- var showimage = (webPageFullScreen == false) || (w > 800);
715
- QV('welcomeimage', showimage);
716
- Q('logincell').setAttribute('align', showimage?'left':'center');
605
+ /* Now we use CSS media to achive the same effect as deleted JS */
606
607
if (webPageFullScreen == false) {
608
QS('centralTable')['margin-top'] = '';