Impaczus/motif
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove redundant preview controls bar.

Browse Source 
Moves preview volume into the results header and relies on per-row Play/Stop controls.
This commit is contained in:
b1rdmania
2025-12-26 18:53:55 +00:00
parent d501f3565d
commit 0e0b64d6a2
2 changed files with 19 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+19 -41
View File
@@ -399,41 +399,24 @@
}
}
.results-controls {
.results-header {
display: flex;
gap: calc(var(--spacing-unit) * 1.5);
align-items: center;
justify-content: space-between;
gap: calc(var(--spacing-unit) * 2);
flex-wrap: wrap;
padding: calc(var(--spacing-unit) * 2);
background: var(--color-surface);
border-radius: var(--radius);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
margin-top: calc(var(--spacing-unit) * 2);
margin: 0 0 calc(var(--spacing-unit) * 2) 0;
}
.results-controls .volume-control {
flex: 1;
min-width: 220px;
.results-header h3 {
margin: 0;
}
.results-header .volume-control {
margin-top: 0;
min-width: 260px;
flex: 0 1 360px;
}
.results-controls .actions {
margin-left: auto;
display: inline-flex;
gap: calc(var(--spacing-unit) * 1.25);
align-items: center;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.results-controls {
flex-direction: column;
align-items: stretch;
}
.results-controls .actions {
margin-left: 0;
width: 100%;
display: flex;
flex-direction: column;
}
.results-header .volume-control label {
font-size: 12px;
}
.confidence-bar {
@@ -887,7 +870,13 @@
<div id="status">Ready. Enter a song name to search for MIDI files.</div>
<div id="resultsSection" class="results-section">
<h3>Search Results</h3>
<div class="results-header">
<h3>Search Results</h3>
<div class="volume-control">
<label for="soundfontVolume">Preview volume</label>
<input type="range" id="soundfontVolume" min="0" max="1" step="0.01" value="0.7" />
</div>
</div>
<table id="resultsTable" class="results-table">
<thead>
<tr>
@@ -900,17 +889,6 @@
<tbody id="resultsBody">
</tbody>
</table>
<div class="results-controls" aria-label="Preview controls">
<div class="volume-control">
<label for="soundfontVolume">Preview volume</label>
<input type="range" id="soundfontVolume" min="0" max="1" step="0.01" value="0.7" />
</div>
<div class="actions">
<button id="soundfontStopBtn" disabled>Stop preview</button>
<button id="nextResultBtn" class="next-result" disabled>Try Next Result</button>
</div>
</div>
</div>
<div id="playerSection" class="player-section">