fix(web): style update

This commit is contained in:
arkohut 2024-10-11 00:04:17 +08:00
parent c9021375a3
commit 045beb6b70
3 changed files with 27 additions and 23 deletions

View File

@ -6,6 +6,7 @@ Global:
print_verbose: false
min_height: 30
width_height_ratio: 40
use_space_char: true
Det:
use_cuda: false

View File

@ -91,21 +91,21 @@
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal">
<div
class="relative top-10 mx-auto p-10 border w-11/12 max-w-10xl shadow-lg rounded-md bg-white group h-5/6"
class="relative top-10 mx-auto px-16 py-10 border w-11/12 max-w-10xl shadow-lg rounded-md bg-white group h-5/6"
>
<!-- Button container -->
<div class="group">
<button
class="absolute left-4 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-xl w-12 h-12 opacity-0 group-hover:opacity-100 flex items-center justify-center z-50"
class="absolute left-2 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-xl w-12 h-12 opacity-0 group-hover:opacity-85 flex items-center justify-center z-50"
on:click={onPrevious}
>
<ChevronLeft size={40} />
<ChevronLeft size={32} />
</button>
<button
class="absolute right-4 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-xl w-12 h-12 opacity-0 group-hover:opacity-100 flex items-center justify-center z-50"
class="absolute right-2 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-xl w-12 h-12 opacity-0 group-hover:opacity-85 flex items-center justify-center z-50"
on:click={onNext}
>
<ChevronRight size={40} />
<ChevronRight size={32} />
</button>
<!-- Your modal content goes here -->
</div>
@ -187,11 +187,11 @@
</div>
</ScrollArea>
</div>
<div class="absolute top-0 right-0 pt-4 pr-4">
<button class="text-gray-400 hover:text-gray-600" on:click={onClose}>
<div class="absolute top-0 right-0 pt-2 pr-2">
<button class="text-gray-400 hover:text-gray-600 opacity-0 group-hover:opacity-100" on:click={onClose}>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<X size={40} />
<X size={32} />
</button>
</div>
</div>

View File

@ -4,19 +4,22 @@
*/
export let ocrData = [];
</script>
<table class="min-w-full bg-white">
<thead>
<tr>
<th class="py-2">Text</th>
<th class="py-2" style="width: 50px;">Score</th>
</tr>
</thead>
<tbody>
{#each ocrData as { dt_boxes, rec_txt, score }}
<tr class="hover:bg-gray-100">
<td class="border px-4 py-2">{rec_txt}</td>
<td class="border px-4 py-2" style="width: 50px;">{score.toFixed(3)}</td>
<div class="overflow-x-auto">
<table class="w-full max-w-3xl bg-white table-fixed">
<thead>
<tr>
<th class="py-2 w-4/5">Text</th>
<th class="py-2 w-1/5">Score</th>
</tr>
{/each}
</tbody>
</table>
</thead>
<tbody>
{#each ocrData as { dt_boxes, rec_txt, score }}
<tr class="hover:bg-gray-100">
<td class="border px-4 py-2 truncate">{rec_txt}</td>
<td class="border px-4 py-2 text-center">{score.toFixed(3)}</td>
</tr>
{/each}
</tbody>
</table>
</div>