shudder5305/pupilometer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(web-ui): Correct Lamp Matrix visual and layout responsiveness

Browse Source 
Resolved issues with the Lamp Matrix control being cropped and distorting,
and not maintaining a fixed 5x5 layout.

- **Fixed 5x5 Matrix:** Reverted `.matrix-grid` to `grid-template-columns: repeat(5, 70px)`
  to enforce a consistent 5x5 lamp layout.
- **Prevented Warping:** Removed `width: 100%` from `.matrix-grid` to allow its
  width to be intrinsically determined by its content, preventing distortion.
- **Ensured Adequate Space:** Set `.lamp-view` to `flex: 0 0 auto` with a
  `min-width: 480px` to guarantee sufficient space for the fixed matrix and
  controls without cropping.
- **Responsive Control Panels:** Applied `max-width: 470px` to `.control-panel`
  and `.center-lamp-control` to align their size with the matrix grid while
  maintaining responsiveness in smaller viewports.
- **Full Screen Utilization:** Ensured the overall application expands to fill
  the browser window by removing `max-width` from `.main-container`.
This commit is contained in:
Tempest 2025-12-03 10:55:11 +07:00
parent 84e1e895ae
commit b4793ca585
1 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/unified_web_ui/static/style.css
View File

@ -19,7 +19,7 @@ h1 {
flex-direction: row;
height: calc(100vh - 80px); /* Adjust for h1 height */
width: 100%;
max-width: 1600px; /* Added max-width for better screen space utilization */
/* Removed max-width to allow full screen utilization */
margin: 0 auto;
}
@ -36,7 +36,8 @@ h1 {
/* --- Lamp View (Original styles adapted to dark theme) --- */
.lamp-view {
width: 25%;
flex: 0 0 auto; /* Allow content to determine width, do not shrink */
min-width: 480px; /* Ensure enough space for 5x5 matrix (470px + buffer) */
border-right: 1px solid #333;
display: flex;
flex-direction: column;
@ -58,11 +59,12 @@ h1 {
gap: 40px;
flex-wrap: wrap; /* Allow wrapping for responsiveness */
justify-content: center;
width: 100%; /* Ensure main-content fills lamp-view's width */
}
.matrix-grid {
display: grid;
grid-template-columns: repeat(5, 70px);
grid-template-columns: repeat(5, 70px); /* Fixed 5-column grid */
grid-template-rows: repeat(5, 70px);
gap: 20px;
padding: 20px;
@ -70,6 +72,8 @@ h1 {
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
/* Removed width: 100%; to let grid determine its own width */
box-sizing: border-box; /* Account for padding */
}
.lamp {
@ -112,9 +116,10 @@ h1 {
background-color: #444; /* Adapted to theme */
padding: 20px;
border-radius: 10px;
width: 390px; /* Calculated from 5 * 70px + 4 * 20px */
max-width: 390px;
width: 100%; /* Made responsive */
max-width: 470px; /* Aligns with matrix grid's intrinsic width */
margin-bottom: 20px;
box-sizing: border-box; /* Account for padding */
}
.control-panel.inactive-control {
@ -246,7 +251,6 @@ input.blue::-webkit-slider-runnable-track { background: linear-gradient(to right
align-items: center;
background-color: transparent;
aspect-ratio: var(--aspect-ratio); /* Keep aspect-ratio on container */
/* Remove explicit width: 100%; height: 100%; from here */
max-width: 100%; /* Ensure it doesn't exceed the boundaries of its parent */
max-height: 100%; /* Ensure it doesn't exceed the boundaries of its parent */
overflow: hidden; /* Ensure image fits and is clipped if necessary */
@ -259,8 +263,6 @@ input.blue::-webkit-slider-runnable-track { background: linear-gradient(to right
max-height: 100%;
object-fit: contain;
border-radius: 10px; /* Added corner radius to the image itself */
/* Removed width: 100%; height: 100%; */
/* Removed aspect-ratio from here */
}
.camera-label {