Restyle download links in table view

They're taking up too much space as individual columns.

Also change DownloadLink to be a real link, so that "Copy URL" works.
This commit is contained in:
Markus Unterwaditzer
2025-08-02 22:26:22 +02:00
committed by Cooper Quintin
parent c5a79e545d
commit ad4e971e77
3 changed files with 11 additions and 13 deletions

View File

@@ -8,20 +8,16 @@
text: string; text: string;
full_button?: boolean; full_button?: boolean;
} = $props(); } = $props();
function download() {
window.location.href = url;
}
</script> </script>
<button <a
href={url}
class="flex flex-row {full_button class="flex flex-row {full_button
? 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 sm:px-4 rounded-md' ? 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 sm:px-4 rounded-md'
: 'text-blue-600 underline'}" : 'text-blue-600 underline'}"
onclick={download}
> >
{text} {text}
<svg class="fill-current w-4 h-4 m-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <svg class="fill-current w-4 h-4 m-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" /> <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
</svg> </svg>
</button> </a>

View File

@@ -19,9 +19,7 @@
<th class="p-2" scope="col">Started</th> <th class="p-2" scope="col">Started</th>
<th class="p-2" scope="col">Last Message</th> <th class="p-2" scope="col">Last Message</th>
<th class="p-2" scope="col">Size</th> <th class="p-2" scope="col">Size</th>
<th class="p-2" scope="col">PCAP</th> <th class="p-2" scope="col">Download</th>
<th class="p-2" scope="col">QMDL</th>
<th class="p-2" scope="col">ZIP</th>
<th class="p-2" scope="col">Analysis</th> <th class="p-2" scope="col">Analysis</th>
<th class="p-2" scope="col"></th> <th class="p-2" scope="col"></th>
</tr> </tr>

View File

@@ -43,9 +43,13 @@
>{(entry.last_message_time && date_formatter.format(entry.last_message_time)) || 'N/A'}</td >{(entry.last_message_time && date_formatter.format(entry.last_message_time)) || 'N/A'}</td
> >
<td class="p-2">{entry.get_readable_qmdl_size()}</td> <td class="p-2">{entry.get_readable_qmdl_size()}</td>
<td class="p-2"><DownloadLink url={entry.get_pcap_url()} text="pcap" /></td> <td class="p-2">
<td class="p-2"><DownloadLink url={entry.get_qmdl_url()} text="qmdl" /></td> <div class="flex flex-row gap-2">
<td class="p-2"><DownloadLink url={entry.get_zip_url()} text="zip" /></td> <DownloadLink url={entry.get_pcap_url()} text="pcap" />
<DownloadLink url={entry.get_qmdl_url()} text="qmdl" />
<DownloadLink url={entry.get_zip_url()} text="zip" />
</div>
</td>
<td class="p-2" <td class="p-2"
><AnalysisStatus onclick={toggle_analysis_visibility} {entry} {analysis_visible} /></td ><AnalysisStatus onclick={toggle_analysis_visibility} {entry} {analysis_visible} /></td
> >