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 print_verbose: false
min_height: 30 min_height: 30
width_height_ratio: 40 width_height_ratio: 40
use_space_char: true
Det: Det:
use_cuda: false 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="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal">
<div <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 --> <!-- Button container -->
<div class="group"> <div class="group">
<button <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} on:click={onPrevious}
> >
<ChevronLeft size={40} /> <ChevronLeft size={32} />
</button> </button>
<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} on:click={onNext}
> >
<ChevronRight size={40} /> <ChevronRight size={32} />
</button> </button>
<!-- Your modal content goes here --> <!-- Your modal content goes here -->
</div> </div>
@ -187,11 +187,11 @@
</div> </div>
</ScrollArea> </ScrollArea>
</div> </div>
<div class="absolute top-0 right-0 pt-4 pr-4"> <div class="absolute top-0 right-0 pt-2 pr-2">
<button class="text-gray-400 hover:text-gray-600" on:click={onClose}> <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-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<X size={40} /> <X size={32} />
</button> </button>
</div> </div>
</div> </div>

View File

@ -4,19 +4,22 @@
*/ */
export let ocrData = []; export let ocrData = [];
</script> </script>
<table class="min-w-full bg-white">
<thead> <div class="overflow-x-auto">
<tr> <table class="w-full max-w-3xl bg-white table-fixed">
<th class="py-2">Text</th> <thead>
<th class="py-2" style="width: 50px;">Score</th> <tr>
</tr> <th class="py-2 w-4/5">Text</th>
</thead> <th class="py-2 w-1/5">Score</th>
<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>
</tr> </tr>
{/each} </thead>
</tbody> <tbody>
</table> {#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>