Fix iOS/mobile UX: simplified table + better touch targets
Mobile UX improvements: - Simplify results table: Title | Duration | Tracks only - Remove Source (always bitmidi) and Match columns - Make entire row clickable - no button needed - Hide Tracks column on mobile (<640px) - Larger touch targets throughout Progress bar fixes: - Larger thumb (20px) for easier iOS touch - Both 'input' and 'change' events for iOS compatibility - Larger wrapper height (44px) for comfortable touch - Scale animation on active thumb - Better track styling Table improvements: - Mobile-responsive padding - Better cursor states - Cleaner selected state with accent border 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
b1rdmania
+100
-28
@@ -142,23 +142,75 @@
|
||||
.results-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 20px 0;
|
||||
margin: calc(var(--spacing-unit) * 2) 0;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.results-table th,
|
||||
.results-table td {
|
||||
padding: 8px 12px;
|
||||
padding: calc(var(--spacing-unit) * 2);
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #333;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.results-table th {
|
||||
background: #222;
|
||||
color: #00ff88;
|
||||
background: var(--color-surface-elevated);
|
||||
color: var(--color-accent-primary);
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.results-table tr:hover {
|
||||
background: #1a1a1a;
|
||||
|
||||
.results-table .duration-col,
|
||||
.results-table .tracks-col {
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.results-table tbody tr {
|
||||
cursor: pointer;
|
||||
transition: background 150ms ease;
|
||||
}
|
||||
|
||||
.results-table tbody tr:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.results-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.results-table tr.selected {
|
||||
background: #2a2a2a;
|
||||
background: rgba(0, 255, 136, 0.12);
|
||||
}
|
||||
|
||||
.results-table tr.selected td:first-child {
|
||||
border-left: 4px solid var(--color-accent-primary);
|
||||
padding-left: calc(var(--spacing-unit) * 2 - 4px);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.results-table th,
|
||||
.results-table td {
|
||||
padding: calc(var(--spacing-unit) * 1.5);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.results-table th {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.results-table .tracks-col {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.results-table .duration-col {
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.confidence-bar {
|
||||
@@ -399,49 +451,72 @@
|
||||
}
|
||||
.progress-bar-wrapper {
|
||||
position: relative;
|
||||
height: 32px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: calc(var(--spacing-unit) * 2) 0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
height: 6px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.progress-bar::-webkit-slider-runnable-track {
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.progress-bar::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #ffaa44;
|
||||
background: var(--color-accent-secondary);
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 10px rgba(255, 170, 68, 0.5);
|
||||
box-shadow: 0 0 8px rgba(255, 170, 68, 0.6), var(--shadow-sm);
|
||||
margin-top: -7px;
|
||||
transition: transform 100ms ease;
|
||||
}
|
||||
|
||||
.progress-bar:active::-webkit-slider-thumb {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.progress-bar::-moz-range-track {
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.progress-bar::-moz-range-thumb {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #ffaa44;
|
||||
background: var(--color-accent-secondary);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
box-shadow: 0 0 10px rgba(255, 170, 68, 0.5);
|
||||
box-shadow: 0 0 8px rgba(255, 170, 68, 0.6), var(--shadow-sm);
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 8px;
|
||||
background: linear-gradient(90deg, #ffaa44, rgba(255, 170, 68, 0.6));
|
||||
border-radius: 4px;
|
||||
height: 6px;
|
||||
background: linear-gradient(90deg, var(--color-accent-secondary), rgba(255, 170, 68, 0.5));
|
||||
border-radius: 3px;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
width: 0%;
|
||||
@@ -485,11 +560,8 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Source</th>
|
||||
<th>Match</th>
|
||||
<th>Duration</th>
|
||||
<th>Tracks</th>
|
||||
<th></th>
|
||||
<th class="duration-col">Duration</th>
|
||||
<th class="tracks-col">Tracks</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="resultsBody">
|
||||
|
||||
+15
-16
@@ -112,10 +112,13 @@ class MotifApp {
|
||||
const volume = parseFloat((e.target as HTMLInputElement).value);
|
||||
this.motifEngine.setVolume(volume);
|
||||
});
|
||||
this.motifProgressBar.addEventListener('input', (e) => {
|
||||
// Use both input and change for iOS compatibility
|
||||
const seekHandler = (e: Event) => {
|
||||
const progress = parseFloat((e.target as HTMLInputElement).value) / 100;
|
||||
this.handleMotifSeek(progress);
|
||||
});
|
||||
};
|
||||
this.motifProgressBar.addEventListener('input', seekHandler);
|
||||
this.motifProgressBar.addEventListener('change', seekHandler);
|
||||
|
||||
this.nextResultBtn.addEventListener('click', () => this.handleNextResult());
|
||||
}
|
||||
@@ -160,31 +163,27 @@ class MotifApp {
|
||||
|
||||
private displayResults(): void {
|
||||
this.resultsBody.innerHTML = '';
|
||||
|
||||
|
||||
this.searchResults.forEach((result, index) => {
|
||||
const row = document.createElement('tr');
|
||||
if (index === this.selectedResultIndex) {
|
||||
row.classList.add('selected');
|
||||
}
|
||||
|
||||
|
||||
row.innerHTML = `
|
||||
<td>${result.title}</td>
|
||||
<td>${result.source}</td>
|
||||
<td>
|
||||
<div class="confidence-bar">
|
||||
<div class="confidence-fill" style="width: ${result.confidence * 100}%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>${result.parsed ? Math.round(result.parsed.durationSec) + 's' : '?'}</td>
|
||||
<td>${result.parsed ? result.parsed.tracks.length : '?'}</td>
|
||||
<td><button onclick="window.app.selectResult(${index})">Select</button></td>
|
||||
<td class="duration-col">${result.parsed ? Math.round(result.parsed.durationSec) + 's' : '?'}</td>
|
||||
<td class="tracks-col">${result.parsed ? result.parsed.tracks.length : '?'}</td>
|
||||
`;
|
||||
|
||||
|
||||
// Make entire row clickable
|
||||
row.addEventListener('click', () => this.selectResult(index));
|
||||
|
||||
this.resultsBody.appendChild(row);
|
||||
});
|
||||
|
||||
|
||||
this.resultsSection.classList.add('visible');
|
||||
|
||||
|
||||
// Auto-select first result
|
||||
if (this.searchResults.length > 0) {
|
||||
this.selectResult(0);
|
||||
|
||||
Reference in New Issue
Block a user