Skip to content

Commit 93addcb

Browse files
sebromerosebromero
committed
Update spacing and styles of console template
1 parent c3b5435 commit 93addcb

File tree

1 file changed

+98
-49
lines changed

1 file changed

+98
-49
lines changed

‎home.html‎

Lines changed: 98 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<title>Arduino Create Agent Debug Console</title>
55
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
6-
<link href="https://fonts.googleapis.com/css?family=Roboto:400,600,700&display=swap" rel="stylesheet">
6+
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,600,700&display=swap" rel="stylesheet">
77
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
88
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
99
<script type="text/javascript">
@@ -14,11 +14,15 @@
1414
var autoscroll = document.getElementById('autoscroll');
1515
var listenabled = document.getElementById('list');
1616
var messages = [];
17+
var MESSAGES_MAX_COUNT = 2000;
1718

1819
function appendLog(msg) {
19-
if (listenabled.checked || (typeof msg === 'string' && msg.indexOf('{') !== 0 && msg.indexOf('list') !== 0)) {
20+
var startsWithBracked = msg.indexOf('{') == 0;
21+
var startsWithList = msg.indexOf('list') == 0;
22+
23+
if (listenabled.checked || (typeof msg === 'string' && !startsWithBracked && !startsWithList)) {
2024
messages.push(msg);
21-
if (messages.length > 2000) {
25+
if (messages.length > MESSAGES_MAX_COUNT) {
2226
messages.shift();
2327
}
2428
log.innerHTML = messages.join('<br>');
@@ -61,47 +65,47 @@
6165
});
6266
} else {
6367
appendLog($('<div><b>Your browser does not support WebSockets.</b></div>'))
64-
}
68+
}
69+
70+
$("#input").focus();
6571
});
6672
</script>
6773
<style type="text/css">
68-
html {
74+
html, body {
6975
overflow: hidden;
76+
height: 100%;
7077
}
7178

72-
body {
73-
overflow: hidden;
74-
padding: 0;
75-
margin: 0;
76-
width: 100%;
77-
height: 100%;
79+
body {
80+
margin: 0px;
81+
padding: 0px;
7882
background: #F8F9F9;
7983
font-size: 16px;
8084
font-family: "Open Sans", "Lucida Grande", Lucida, Verdana, sans-serif;
8185
}
8286

87+
#container {
88+
display: flex;
89+
flex-direction: column;
90+
height: 100%;
91+
width: 100%;
92+
}
93+
8394
#log {
84-
font-family: "Roboto", "Lucida Grande", Lucida, Verdana, sans-serif;
95+
flex-grow: 1;
96+
font-family: "Roboto Mono", "Courier", "Lucida Grande", Verdana, sans-serif;
8597
background: #DAE3E3;
86-
margin: 0;
87-
padding: .5em;
88-
position: absolute;
89-
top: .5em;
90-
left: .5em;
91-
right: .5em;
92-
bottom: 3em;
93-
overflow: auto;
98+
margin: 15px 15px 0px;
99+
padding: 8px 10px;
100+
overflow-y: auto;
94101
}
95102

96-
.buttons {
97-
align-items: center;
103+
#footer {
104+
flex-shrink: 0;
98105
display: flex;
99-
padding: 0 .5em;
100-
margin: 0;
101-
position: absolute;
102-
bottom: 1em;
103-
left: 0;
104-
width: calc(100% - 1em);
106+
align-items: center;
107+
justify-content: space-between;
108+
margin: 10px 15px 10px;
105109
overflow: hidden;
106110
}
107111

@@ -116,10 +120,54 @@
116120

117121
#autoscroll,
118122
#list {
119-
margin-left: 2em;
120-
vertical-align: middle;
123+
margin-left: 10px;
124+
vertical-align: middle;
125+
width: 20px;
126+
height: 20px;
121127
}
122128

129+
.button {
130+
background-color: #b5c8c9;
131+
border: 1px solid #b5c8c9;
132+
border-radius: 2px 2px 0 0;
133+
box-shadow: 0 4px #95a5a6;
134+
color: #000;
135+
cursor: pointer;
136+
font-size: 14px;
137+
letter-spacing: 1.28px;
138+
line-height: normal;
139+
outline: none;
140+
padding: 9px 18px;
141+
text-align: center;
142+
text-transform: uppercase;
143+
transition: box-shadow .1s ease-out, transform .1s ease-out;
144+
}
145+
146+
.button:hover {
147+
box-shadow: 0 2px #95a5a6;
148+
outline: none;
149+
transform: translateY(2px);
150+
}
151+
152+
.button:active {
153+
box-shadow: none;
154+
transform: translateY(4px);
155+
}
156+
157+
.textfield {
158+
background-color: #dae3e3;
159+
width: auto;
160+
height: auto;
161+
padding: 10px 8px;
162+
margin-left: 8px;
163+
vertical-align: top;
164+
border: none;
165+
font-family: "Open Sans", "Lucida Grande", Lucida, Verdana, sans-serif;
166+
font-size: 1em;
167+
outline: none;
168+
}
169+
170+
/*
123171
@media screen and (max-width: 950px) {
124172
#form {
125173
max-width: 60%;
@@ -137,25 +185,26 @@
137185
#log {
138186
bottom: 7em;
139187
}
140-
141-
#autoscroll,
142-
#list {
143-
margin-left: 0;
144-
margin-top: .5em;
145-
}
146-
}
188+
189+
} */
147190
</style>
148191
</head>
149-
<body>
150-
<div id="log"></div>
151-
<div class="buttons">
152-
<form id="form">
153-
<input type="submit" value="Send" />
154-
<input type="text" id="input" size="64"/>
155-
</form>
156-
<div><input name="pause" type="checkbox" checked id="autoscroll"/> Autoscroll</div>
157-
<div><input name="list" type="checkbox" checked id="list"/> Toggle List</div>
158-
<button id="export">Export Log</button>
159-
</div>
160-
</body>
192+
<body>
193+
<div id="container">
194+
<div id="log">This is some random text This is some random textThis is some random textThis is some random textThis is some random textThis is some random textThis is some random text<br />This is some random text<br />This is some random text<br /></div>
195+
<div id="footer">
196+
<form id="form">
197+
<input type="submit" class="button" value="Send" />
198+
<input type="text" id="input" class="textfield" size="64" />
199+
</form>
200+
<div id="options">
201+
<input name="pause" type="checkbox" checked id="autoscroll" />
202+
<label for="autoscroll">Autoscroll</label>
203+
<input name="list" type="checkbox" checked id="list" />
204+
<label for="list">List&nbsp;Command&nbsp;Enabled</label>
205+
</div>
206+
<button id="export" class="button">Export&nbsp;Log</button>
207+
</div>
208+
</div>
209+
</body>
161210
</html>

0 commit comments

Comments
 (0)