mirror of
https://github.com/xpltdco/media-rip.git
synced 2026-04-02 18:43:59 -06:00
Fix table overflow, clickable source URLs, duplicate preview
Table overflow fix:
- table-layout: fixed prevents columns expanding beyond max-width
- min-width: 0 on flex children ensures text-overflow works
- Long filenames now properly truncate with ellipsis
Clickable source URLs:
- Name column is now an <a> link to the original source URL
- Opens in new tab (target=_blank, rel=noopener)
- Styled to inherit text color, underline + accent on hover
- @click.stop prevents row selection interference
Duplicate preview box fix:
- When urlInfo.type === 'unknown', urlInfo is now set to null
- Previously both the preview box ('VIDEO' badge) and error message
showed simultaneously. Now only the error message appears.
This commit is contained in:
parent
1e9014f569
commit
8ac0e05b15
2 changed files with 21 additions and 3 deletions
|
|
@ -192,13 +192,20 @@ async function clearJob(jobId: string): Promise<void> {
|
|||
</thead>
|
||||
<TransitionGroup name="table-row" tag="tbody">
|
||||
<tr v-for="job in sortedJobs" :key="job.id" :class="'row-' + job.status">
|
||||
<td class="col-name" :title="job.url">
|
||||
<span class="name-with-icon">
|
||||
<td class="col-name">
|
||||
<a
|
||||
class="name-with-icon"
|
||||
:href="job.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
:title="job.url"
|
||||
@click.stop
|
||||
>
|
||||
<!-- Media type icon -->
|
||||
<svg v-if="isAudioJob(job)" class="media-icon audio-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
|
||||
<svg v-else class="media-icon video-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
|
||||
<span class="name-text">{{ displayName(job) }}</span>
|
||||
</span>
|
||||
</a>
|
||||
</td>
|
||||
<td class="col-status">
|
||||
<span class="status-badge" :class="'badge-' + job.status">
|
||||
|
|
@ -298,6 +305,7 @@ async function clearJob(jobId: string): Promise<void> {
|
|||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--font-size-sm);
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.download-table thead {
|
||||
|
|
@ -356,6 +364,14 @@ async function clearJob(jobId: string): Promise<void> {
|
|||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.name-with-icon:hover .name-text {
|
||||
text-decoration: underline;
|
||||
color: var(--color-accent-primary, #00a8ff);
|
||||
}
|
||||
|
||||
.media-icon {
|
||||
|
|
@ -368,6 +384,7 @@ async function clearJob(jobId: string): Promise<void> {
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.col-status { width: 100px; }
|
||||
|
|
|
|||
|
|
@ -195,6 +195,7 @@ function handlePaste(): void {
|
|||
// Check if URL yielded anything useful
|
||||
if (urlInfo.value?.type === 'unknown') {
|
||||
analyzeError.value = 'No downloadable media found at this URL.'
|
||||
urlInfo.value = null
|
||||
} else if (!urlInfo.value && !extractError.value) {
|
||||
analyzeError.value = 'Could not reach this URL. Check the address and try again.'
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue