iot/spore-ledlab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: compact properties panel

Browse Source
This commit is contained in:
0x1d
2025-10-11 22:26:28 +02:00
parent 69dfe66f85
commit 91d8bd410c
3 changed files with 55 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/ledlab.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 213 KiB

After

Width:  |  Height:  |  Size: 211 KiB

18
public/index.html
View File

@@ -60,20 +60,16 @@
<!-- Preset Selection --> <!-- Preset Selection -->
<div class="control-group"> <div class="control-group">
<h4 class="control-group-subtitle">Animation Preset</h4> <h4 class="control-group-subtitle">Animation Preset</h4>
<div class="preset-selector-wrapper"> <select class="preset-select" id="preset-select">
<select class="preset-select" id="preset-select"> <option value="">Select a preset...</option>
<option value="">Select a preset...</option> </select>
</select>
</div>
<div class="preset-controls" id="preset-controls"> <div class="preset-controls" id="preset-controls">
<!-- Dynamic controls will be inserted here --> <!-- Dynamic controls will be inserted here -->
</div> </div>
<div class="btn-container"> <button class="btn btn-primary" id="toggle-stream-btn" data-streaming="false">
<button class="btn btn-primary" id="toggle-stream-btn" data-streaming="false"> <span class="btn-icon">▶</span>
<span class="btn-icon">▶</span> <span class="btn-text">Start Streaming</span>
<span class="btn-text">Start Streaming</span> </button>
</button>
</div>
</div> </div>
</div> </div>

88
public/styles/main.css
View File

@@ -455,11 +455,11 @@ body {
position: absolute; position: absolute;
top: 1rem; top: 1rem;
right: 1rem; right: 1rem;
width: 380px; width: 320px;
max-width: calc(100vw - 4rem); max-width: calc(100vw - 4rem);
max-height: calc(100vh - 12rem); max-height: calc(100vh - 12rem);
background: var(--bg-secondary); background: var(--bg-secondary);
border-radius: 16px; border-radius: 12px;
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
padding: 0; padding: 0;
display: flex; display: flex;
@@ -486,18 +486,18 @@ body {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1.25rem 1.5rem; padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
background: var(--bg-tertiary); background: var(--bg-tertiary);
} }
.control-title { .control-title {
font-size: 1rem; font-size: 0.9rem;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.5rem;
margin: 0; margin: 0;
} }
@@ -529,10 +529,10 @@ body {
.floating-controls-content { .floating-controls-content {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 1.5rem; padding: 0.75rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.5rem; gap: 0.75rem;
} }
/* Old Control panel section - kept for backwards compatibility */ /* Old Control panel section - kept for backwards compatibility */
@@ -553,16 +553,25 @@ body {
} }
.control-group { .control-group {
background: var(--control-bg); background: transparent;
border-radius: 12px; border-radius: 8px;
padding: 1.25rem; padding: 0.5rem 0;
border: 1px solid var(--border-secondary); border: none;
border-bottom: 1px solid var(--border-primary);
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.control-group:last-child {
border-bottom: none;
}
.control-group:hover { .control-group:hover {
border-color: var(--border-tertiary); background: rgba(255, 255, 255, 0.02);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.control-group > .btn {
width: 100%;
margin-top: 0.25rem;
} }
.control-group-title { .control-group-title {
@@ -584,21 +593,23 @@ body {
} }
.control-group-subtitle { .control-group-subtitle {
font-size: 0.875rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-secondary);
margin-bottom: 0.75rem; margin-bottom: 0.5rem;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.375rem;
text-transform: uppercase;
letter-spacing: 0.05em;
} }
.control-group-subtitle::before { .control-group-subtitle::before {
content: ''; content: '';
width: 3px; width: 2px;
height: 14px; height: 10px;
background: var(--accent-primary); background: var(--accent-primary);
border-radius: 2px; border-radius: 1px;
} }
/* Node list */ /* Node list */
@@ -672,21 +683,18 @@ body {
} }
/* Preset controls */ /* Preset controls */
.preset-selector-wrapper {
margin-bottom: 1.25rem;
}
.preset-select { .preset-select {
width: 100%; width: 100%;
background: var(--bg-tertiary); background: var(--bg-tertiary);
border: 1px solid var(--border-secondary); border: 1px solid var(--border-secondary);
border-radius: 8px; border-radius: 6px;
padding: 0.75rem; padding: 0.5rem;
color: var(--text-primary); color: var(--text-primary);
font-size: 0.875rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
transition: all 0.2s ease; transition: all 0.2s ease;
cursor: pointer; cursor: pointer;
margin-bottom: 0.5rem;
} }
.preset-select option { .preset-select option {
@@ -710,9 +718,9 @@ body {
.preset-controls { .preset-controls {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.5rem;
margin-bottom: 1.25rem; margin-bottom: 0.5rem;
min-height: 2rem; min-height: 1.5rem;
position: relative; position: relative;
} }
@@ -735,7 +743,7 @@ body {
.preset-control { .preset-control {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.4rem; gap: 0.3rem;
} }
.preset-label { .preset-label {
@@ -750,10 +758,10 @@ body {
width: 100%; width: 100%;
background: var(--bg-tertiary); background: var(--bg-tertiary);
border: 1px solid var(--border-secondary); border: 1px solid var(--border-secondary);
border-radius: 6px; border-radius: 4px;
padding: 0.625rem; padding: 0.4rem 0.5rem;
color: var(--text-primary); color: var(--text-primary);
font-size: 0.875rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
@@ -833,17 +841,17 @@ body {
background: transparent; background: transparent;
color: var(--text-primary); color: var(--text-primary);
border: 1px solid var(--border-secondary); border: 1px solid var(--border-secondary);
border-radius: 8px; border-radius: 6px;
padding: 0.625rem 1.25rem; padding: 0.5rem 1rem;
font-size: 0.875rem; font-size: 0.8rem;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.5rem; gap: 0.4rem;
min-height: 2.75rem; min-height: 2.25rem;
white-space: nowrap; white-space: nowrap;
backdrop-filter: var(--backdrop-blur); backdrop-filter: var(--backdrop-blur);
} }
@@ -941,7 +949,7 @@ body {
.btn-container { .btn-container {
display: flex; display: flex;
gap: 0.75rem; gap: 0.5rem;
flex-wrap: wrap; flex-wrap: wrap;
} }