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">
|
||||
|
||||
Reference in New Issue
Block a user