Skip to content

Commit e9cb438

Browse files
ns3777kns3777k
authored
Merge pull request #6 from ns3777k/new-markup
rework to new kinda design
2 parents 53630cf + 6612294 commit e9cb438

File tree

3 files changed

+99
-29
lines changed

3 files changed

+99
-29
lines changed

Diff for: ‎bindata/index.css

+74-19
Original file line numberDiff line numberDiff line change
@@ -4,40 +4,95 @@ html, body, h2 {
44
}
55

66
body {
7-
color: #444444;
87
background-color: #eaeaea;
98
}
109

11-
#container {
10+
.title {
11+
color: #eaeaea;
12+
}
13+
14+
.container {
1215
padding: 10px;
1316
}
1417

18+
.header {
19+
background-color: #3d474e;
20+
color: #f3f3f3;
21+
}
22+
23+
.subheader {
24+
background-color: #31393e;
25+
height: 20px;
26+
}
27+
1528
#last_update {
16-
font-weight: bold;
1729
font-size: 14px;
1830
margin-bottom: 10px;
31+
color: #eaeaea;
1932
}
2033

21-
.entry {
22-
background: #f2f2f2;
23-
border: 1px solid #e4e4e4;
24-
padding: 8px;
25-
margin-bottom: 7px;
26-
border-radius: 7px;
34+
.controls {
35+
margin-bottom: 5px;
36+
margin-top: 10px
2737
}
2838

29-
.meta {
30-
font-size: 13px;
31-
font-weight: bold;
39+
.button {
40+
text-shadow: 1px 1px 10px #494949;
41+
outline: none;
42+
background-color: transparent;
43+
color: #eaeaea;
44+
border: 1px solid #eaeaea;
45+
width: 120px;
46+
text-transform: uppercase;
47+
height: 30px;
48+
cursor: pointer;
3249
}
3350

34-
.payload {
35-
font-size: 15px;
36-
margin-bottom: 2px;
37-
line-height: 24px;
51+
.button:hover {
52+
border: 0;
3853
}
3954

40-
.controls {
41-
margin-bottom: 10px;
42-
margin-top: 10px
55+
#toggle.start {
56+
background-color: #1db12b;
57+
border: 0;
58+
}
59+
60+
#toggle.stop {
61+
background-color: #d02828;
62+
border: 0;
63+
}
64+
65+
#clear:hover {
66+
background-color: #288fd0;
67+
}
68+
69+
.log_table {
70+
margin-top: 10px;
71+
width: 100%;
72+
border-spacing: 0;
73+
}
74+
75+
.log_table th {
76+
text-align: left;
77+
}
78+
79+
.log_table td {
80+
padding-bottom: 10px;
81+
padding-top: 10px;
82+
}
83+
84+
.log_table tbody tr:nth-child(even) {
85+
background-color: #dfdfdf;
86+
}
87+
88+
.log_col_left_pad {
89+
padding-left: 10px;
90+
}
91+
92+
.log_col_nowrap {
93+
white-space: nowrap;
94+
}
95+
96+
.log_col_pad {
97+
padding-right: 15px;
4398
}

Diff for: ‎bindata/index.html

+16-5
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,26 @@
1010
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
1111
</head>
1212
<body>
13-
<div id="container">
14-
<h2>UDP Web Logger</h2>
13+
<div class="container header">
14+
<h2 class="title">UDP Web Logger</h2>
1515
<div class="controls">
16-
<button data-start="Start" data-stop="Stop" id="toggle"></button>
17-
<button id="clear">Clear all</button>
16+
<button class="button" data-start="start" data-stop="stop" id="toggle"></button>
17+
<button class="button" id="clear">clear all</button>
1818
</div>
19+
</div>
20+
<div class="container subheader">
1921
<div id="last_update"></div>
20-
<div id="entries"></div>
2122
</div>
23+
<table class="log_table">
24+
<thead>
25+
<tr>
26+
<th class="log_col_left_pad log_col_pad log_col_nowrap">Date</th>
27+
<th class="log_col_pad log_col_nowrap">Source IP</th>
28+
<th>Payload</th>
29+
</tr>
30+
</thead>
31+
<tbody id="entries"></tbody>
32+
</table>
2233
<script src="/index.js" type="text/javascript"></script>
2334
</body>
2435
</html>

Diff for: ‎bindata/index.js

+9-5
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,14 @@
3535
timer = setInterval(fetchLogEntries, 2000);
3636

3737
toggleButton.innerText = toggleButton.dataset.stop;
38+
toggleButton.classList.remove(toggleButton.dataset.start);
39+
toggleButton.classList.add(toggleButton.dataset.stop);
3840
} else {
3941
clearInterval(timer);
42+
4043
toggleButton.innerText = toggleButton.dataset.start;
44+
toggleButton.classList.remove(toggleButton.dataset.stop);
45+
toggleButton.classList.add(toggleButton.dataset.start);
4146
}
4247

4348
isFetching = !isFetching;
@@ -56,10 +61,9 @@
5661
*/
5762
function getEntryContentMarkup(entry) {
5863
return `
59-
<div>
60-
<div class="payload">${entry.payload}</div>
61-
<div class="meta">${entry.time} ${entry.ip}</div>
62-
</div>
64+
<td class="log_col_left_pad log_col_pad log_col_nowrap">${entry.time}</td>
65+
<td class="log_col_pad log_col_nowrap">${entry.ip}</td>
66+
<td>${entry.payload}</td>
6367
`;
6468
}
6569

@@ -76,7 +80,7 @@
7680
lastUnix = entries[entries.length - 1].unix;
7781

7882
entries.forEach(entry => {
79-
const el = w.document.createElement('div');
83+
const el = w.document.createElement('tr');
8084
el.className = 'entry';
8185
el.innerHTML = getEntryContentMarkup(entry);
8286
entriesContainer.prepend(el);

0 commit comments

Comments
 (0)