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 -->
<div class="control-group">
<h4 class="control-group-subtitle">Animation Preset</h4>
<div class="preset-selector-wrapper">
<select class="preset-select" id="preset-select">
<option value="">Select a preset...</option>
</select>
</div>
<select class="preset-select" id="preset-select">
<option value="">Select a preset...</option>
</select>
<div class="preset-controls" id="preset-controls">
<!-- Dynamic controls will be inserted here -->
</div>
<div class="btn-container">
<button class="btn btn-primary" id="toggle-stream-btn" data-streaming="false">
<span class="btn-icon">▶</span>
<span class="btn-text">Start Streaming</span>
</button>
</div>
<button class="btn btn-primary" id="toggle-stream-btn" data-streaming="false">
<span class="btn-icon">▶</span>
<span class="btn-text">Start Streaming</span>
</button>
</div>
</div>

88
public/styles/main.css
View File

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