Skip to content

Commit a8958dd

Browse files
andre-dietrichandre-dietrich
committed
optimized for fullscreen
1 parent 53f3571 commit a8958dd

File tree

3 files changed

+94
-34
lines changed

3 files changed

+94
-34
lines changed

‎webrepl.css‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1 @@
1-
html {
2-
background: #555;
3-
}
41

5-
h1 {
6-
margin-bottom: 20px;
7-
font: 20px/1.5 sans-serif;
8-
}
9-
.file-box {
10-
margin: 4px;
11-
padding: 4px;
12-
background: #888;
13-
}

‎webrepl.html‎

Lines changed: 74 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,74 @@
22
<html>
33
<head>
44
<title>MicroPython WebREPL</title>
5-
<link rel="stylesheet" href="webrepl.css" />
5+
<script src="https://edrys-labs.github.io/module/edrys.js"></script>
6+
7+
<script
8+
defer
9+
src="https://edrys-labs.github.io/module/vendor/alpine.min.js"
10+
></script>
11+
12+
<link
13+
rel="stylesheet"
14+
href="https://edrys-labs.github.io/module/vendor/water.min.css"
15+
/>
16+
17+
<style>
18+
body {
19+
min-width: calc(100% - 20px);
20+
overflow: hidden;
21+
}
22+
23+
strong {
24+
position: absolute;
25+
margin-top: -25px;
26+
padding: 0px 7px;
27+
background: rgb(1, 59, 78);
28+
}
29+
30+
input {
31+
display: inline;
32+
}
33+
34+
input[type='text'] {
35+
width: calc(100% - 20px);
36+
}
37+
38+
#file-boxes {
39+
display: flex;
40+
flex-direction: row;
41+
flex-wrap: wrap;
42+
gap: 10px;
43+
justify-content: space-between;
44+
width: 100%;
45+
align-items: stretch;
46+
}
47+
48+
.file-box {
49+
margin-bottom: 15px;
50+
51+
flex: 1 1 calc(25% - 20px);
52+
box-sizing: border-box;
53+
border: 2px black solid;
54+
padding: 5px;
55+
padding-top: 10px;
56+
}
57+
58+
#term {
59+
display: block;
60+
min-width: 100%;
61+
background-color: black;
62+
}
63+
</style>
64+
665
<script src="term.js"></script>
766
<script src="FileSaver.js"></script>
867
</head>
968
<body>
10-
<div style="display: inline-block; vertical-align: top">
11-
<form>
69+
<div id="file-boxes">
70+
<form class="file-box">
71+
<strong>WebSocket Connection</strong>
72+
1273
<input type="text" name="webrepl_url" id="url" value="" />
1374
<input
1475
type="submit"
@@ -17,17 +78,10 @@
1778
onclick="button_click(); return false;"
1879
/>
1980
</form>
20-
<div id="term"></div>
21-
</div>
22-
23-
<div
24-
id="file-boxes"
25-
style="display: inline-block; vertical-align: top; width: 230px"
26-
>
27-
<div class="file-box">
81+
<div class="file-box" id="put-file-list">
2882
<strong>Send a file</strong>
2983
<input type="file" id="put-file-select" />
30-
<div id="put-file-list"></div>
84+
3185
<input
3286
type="button"
3387
value="Send to device"
@@ -51,18 +105,18 @@
51105
onclick="get_file(); return false;"
52106
/>
53107
</div>
54-
55108
<div class="file-box" id="file-status">
109+
<strong>File status</strong>
56110
<span style="color: #707070">(file operation status)</span>
57111
</div>
58112
</div>
59-
60-
<br clear="both" />
61-
<i
62-
>Terminal widget should be focused (text cursor visible) to accept input.
63-
Click on it if not.</i
64-
><br />
65-
<i>To paste, press Ctrl+A, then Ctrl+V</i>
113+
<div id="term"></div>
114+
<div>
115+
<i
116+
>Terminal widget should be focused (text cursor visible) to accept
117+
input. Click on it if not. To paste, press Ctrl+A, then Ctrl+V</i
118+
>
119+
</div>
66120
</body>
67121

68122
<script src="webrepl.js"></script>

‎webrepl.js‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,26 @@ var get_file_name = null
88
var get_file_data = null
99

1010
function calculate_size(win) {
11-
var cols = Math.max(80, Math.min(150, (win.innerWidth - 280) / 7)) | 0
12-
var rows = Math.max(24, Math.min(80, (win.innerHeight - 180) / 12)) | 0
11+
const header = document.getElementById('file-boxes')
12+
13+
const background = document.getElementById('term')
14+
15+
var cols = (window.innerWidth / 7) | 0
16+
var rows = ((win.innerHeight - header.offsetHeight - 60) / 52) | 0
17+
18+
background.style.width = '100%'
19+
background.style.height = win.innerHeight - header.offsetHeight - 60 + 'px'
20+
21+
console.log(
22+
'cols',
23+
cols,
24+
'rows',
25+
rows,
26+
'header',
27+
header.offsetHeight,
28+
'win.innerHeight',
29+
win.innerHeight
30+
)
1331
return [cols, rows]
1432
}
1533

0 commit comments

Comments
 (0)