adafruit-mirror/Adafruit_OPT4048
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make web interface responsive to height changes as well as width

Browse source 
- Add flexbox layout to adapt to available vertical space
- Make the entire interface fill the screen height
- Add media queries for very small screens
- Scale elements to fit on constrained displays
- Make diagram and serial monitor scale with available space
- Fix layout with proper overflow handling

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
ladyada 2025-05-14 10:50:20 -04:00
parent 44a1090d5f
commit 1e2c8f1b82
1 changed files with 47 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
webserial/index.html
View file

@ -5,37 +5,60 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OPT4048 CIE Color Plotter</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
font-family: Arial, sans-serif;
max-width: 100%;
margin: 0 auto;
padding: 10px;
padding: 8px;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 15px;
gap: 10px;
justify-content: center;
flex: 1;
overflow: hidden;
}
.controls {
flex: 1;
min-width: 250px;
min-width: 230px;
max-width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.visualization {
flex: 2;
min-width: 300px;
min-width: 280px;
max-width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
#cie-diagram {
position: relative;
width: 100%;
max-width: 500px;
margin: 0 auto 15px auto;
max-width: 450px;
margin: 0 auto 10px auto;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
#cie-diagram img {
width: 100%;
height: auto;
max-height: 100%;
object-fit: contain;
display: block;
}
#data-point {
@ -58,13 +81,16 @@
border-radius: 50%;
}
#serial-log {
height: 150px;
flex: 1;
min-height: 80px;
max-height: 150px;
overflow-y: auto;
background-color: #f5f5f5;
padding: 8px;
border: 1px solid #ddd;
font-family: monospace;
font-size: 12px;
margin-bottom: 5px;
}
button {
padding: 8px 12px;
@ -108,6 +134,18 @@
font-size: 18px;
font-weight: bold;
}
/* Responsive adjustments for very small screens */
@media (max-height: 600px) {
h1 { font-size: 20px !important; margin: 5px 0 !important; }
h2 { font-size: 16px; margin: 8px 0 5px 0; }
p { font-size: 12px !important; margin: 5px 0 !important; }
.data-box { padding: 5px; }
.data-box h3 { font-size: 12px; margin: 0 0 3px 0; }
.data-value { font-size: 14px; }
#serial-log { min-height: 60px; max-height: 100px; }
button { padding: 6px 10px; font-size: 12px; }
}
</style>
</head>
<body>
@ -124,7 +162,7 @@
<h2>Connection Status</h2>
<p id="status">Not connected</p>
<h2>Serial Monitor</h2>
<h2 style="margin-bottom: 5px;">Serial Monitor</h2>
<div id="serial-log"></div>
</div>