paulmataruso/ConvertX
1
0
Fork 0
mirror of https://github.com/C4illin/ConvertX.git synced 2025-10-24 08:33:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve job details interaction and accessibility

Browse Source 
- Enhanced job details toggle functionality by adding event listeners to job detail elements.
- Updated job detail rows to use data attributes for better accessibility and maintainability.
- Improved the rendering of file information with unique keys for each file entry.
This commit is contained in:
xeisenberg
2025-05-27 16:10:35 +05:30
committed by Emrik Östling
parent 50725edd02
commit 29ba229bc2
1 changed files with 62 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/index.tsx
View File

@@ -1169,7 +1169,9 @@ const app = new Elysia({
px-2 py-2 px-2 py-2
sm:px-4 sm:px-4
`} `}
/> >
<span class="sr-only">Expand details</span>
</th>
<th <th
class={` class={`
px-2 py-2 px-2 py-2
@@ -1216,10 +1218,10 @@ const app = new Elysia({
<tbody> <tbody>
{userJobs.map((job) => ( {userJobs.map((job) => (
<> <>
<tr id={`job-row-${job.id}`}> <tr key={`job-${job.id}` as any} id={`job-row-${job.id}`}>
<td <td
class="cursor-pointer" class="job-details-toggle cursor-pointer"
onclick={`toggleJobDetails(${job.id})`} data-job-id={job.id}
> >
<svg <svg
id={`arrow-${job.id}`} id={`arrow-${job.id}`}
@@ -1261,36 +1263,41 @@ const app = new Elysia({
<div class="mb-1 font-semibold"> <div class="mb-1 font-semibold">
Detailed File Information: Detailed File Information:
</div> </div>
{job.files_detailed.map((file: Filename) => ( {job.files_detailed.map(
<div class="flex items-center"> (file: Filename, index: number) => (
<span <div
class="w-5/12 truncate" key={String(file.id) as any}
title={file.file_name} class="flex items-center"
safe
> >
{file.file_name} <span
</span> class="w-5/12 truncate"
<svg title={file.file_name}
xmlns="http://www.w3.org/2000/svg" safe
viewBox="0 0 20 20" >
fill="currentColor" {file.file_name}
class="w-4 h-4 inline-block mx-2 text-neutral-500" </span>
> <svg
<path xmlns="http://www.w3.org/2000/svg"
fill-rule="evenodd" viewBox="0 0 20 20"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" fill="currentColor"
clip-rule="evenodd" class="w-4 h-4 inline-block mx-2 text-neutral-500"
/> >
</svg> <path
<span fill-rule="evenodd"
class="w-5/12 truncate" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
title={file.output_file_name} clip-rule="evenodd"
safe />
> </svg>
{file.output_file_name} <span
</span> class="w-5/12 truncate"
</div> title={file.output_file_name}
))} safe
>
{file.output_file_name}
</span>
</div>
),
)}
</div> </div>
</td> </td>
</tr> </tr>
@@ -1302,18 +1309,28 @@ const app = new Elysia({
</main> </main>
<script> <script>
{` {`
function toggleJobDetails(jobId) { document.addEventListener('DOMContentLoaded', () => {
const detailsRow = document.getElementById(\`details-\${jobId}\`); const toggles = document.querySelectorAll('.job-details-toggle');
const arrow = document.getElementById(\`arrow-\${jobId}\`); toggles.forEach(toggle => {
if (detailsRow && arrow) { toggle.addEventListener('click', function() {
detailsRow.classList.toggle("hidden"); const jobId = this.dataset.jobId;
if (detailsRow.classList.contains("hidden")) { const detailsRow = document.getElementById(\`details-\${jobId}\`);
arrow.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />'; // The arrow SVG itself has the ID arrow-\${jobId}
} else { const arrow = document.getElementById(\`arrow-\${jobId}\`);
arrow.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />';
} if (detailsRow && arrow) {
} detailsRow.classList.toggle("hidden");
} if (detailsRow.classList.contains("hidden")) {
// Right-facing arrow (collapsed)
arrow.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />';
} else {
// Down-facing arrow (expanded)
arrow.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />';
}
}
});
});
});
`} `}
</script> </script>
</> </>