Munelit/swerve-visualizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made UI feel more consistent

Browse Source
This commit is contained in:
Moonlit Productions
2025-10-28 14:57:31 -04:00
parent 94fd41e424
commit 18ebebdcb7
2 changed files with 41 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -16,7 +16,7 @@
<main> <main>
<section class="visualization-canvas"> <section class="visualization-canvas">
<h2>Robot Visualization</h2> <h2>Robot Visualization</h2>
<canvas id="swerve-canvas" width="600" height="600"></canvas> <canvas id="swerve-canvas" width="800" height="800"></canvas>
</section> </section>
<section class="control-panel"> <section class="control-panel">

40
styles.css
View File

@ -321,4 +321,44 @@ button:hover {
padding: var(--spacing-small); padding: var(--spacing-small);
margin-bottom: var(--spacing-small); margin-bottom: var(--spacing-small);
color: var(--text-secondary); color: var(--text-secondary);
}
.control-group {
margin-bottom: var(--spacing-small);
display: flex;
flex-direction: column;
}
.position-inputs {
max-height: 400px;
overflow-y: auto;
padding: var(--spacing-small);
background-color: var(--background-dark);
border-radius: var(--border-radius-sm);
margin-top: var(--spacing-small);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.preset-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.module-display {
background-color: var(--background-dark);
border: 2px solid var(--border-color);
border-radius: var(--border-radius-sm);
padding: var(--spacing-small);
}
.readout {
display: flex;
justify-content: space-between;
margin-bottom: calc(var(--spacing-small) / 2);
}
.readout .value {
color: var(--text-light);
font-weight: bold;
} }