Skip to content

Commit 44cc407

Browse files
StevenU21StevenU21
committed
Refactor SpeechAudio table layout for improved responsiveness and accessibility
1 parent 768df98 commit 44cc407

File tree

1 file changed

+52
-61
lines changed

1 file changed

+52
-61
lines changed

‎resources/js/Pages/SpeechAudio/Index.vue

Lines changed: 52 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -19,66 +19,58 @@
1919
</div>
2020

2121
<div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
22-
<table class="w-full min-w-max">
23-
<thead>
24-
<tr>
25-
<th class="text-white p-4 text-left">
26-
<i class="fas fa-font mr-2"></i>ID
27-
</th>
28-
<th class="text-white p-4 text-left">
29-
<i class="fas fa-align-left mr-2"></i
30-
>Text
31-
</th>
32-
<th class="text-white p-4 text-left">
33-
<i class="fas fa-calendar-alt mr-2"></i
34-
>Recorded At
35-
</th>
36-
<th class="text-white p-4">
37-
<i class="fas fa-cogs mr-2"></i>Actions
38-
</th>
39-
</tr>
40-
</thead>
41-
<tbody>
42-
<tr v-if="!speechAudios || !speechAudios.data || speechAudios.data.length === 0">
43-
<td colspan="5" class="text-white px-4 py-8 text-center bg-gray-700 rounded-lg">
44-
No speech audios found.
45-
</td>
46-
</tr>
47-
<tr v-else v-for="speechAudio in speechAudios.data" :key="speechAudio.id">
48-
<td class="text-white px-4 py-2">
49-
{{ speechAudio.id }}
50-
</td>
51-
52-
<td class="text-white px-4 py-2">
53-
{{ truncate(speechAudio.text, 60) }}
54-
</td>
55-
56-
<td class="text-white px-4 py-2">
57-
{{ format(new Date(speechAudio.created_at),"dd/MM/yyyy HH:mm:ss") }}
58-
</td>
59-
60-
<td class="text-white px-4 py-2 space-x-2 text-center">
61-
<div class="flex space-x-2 justify-center">
62-
<AudioPlayer :audioUrl="speechAudio.audioUrl" v-model:isPlaying=" speechAudio.isPlaying"/>
63-
<DropdownMenu>
64-
<PrimaryButton @click="downloadText(speechAudio.id)" class="bg-green-500 hover:bg-green-700 text-white w-full text-left">
65-
<i class="fas fa-download mr-2"></i>
66-
Download Text
67-
</PrimaryButton>
68-
<PrimaryButton @click="downloadSpeechAudio(speechAudio.id)" class="bg-green-500 hover:bg-green-700 text-white w-full text-left">
69-
<i class="fas fa-download mr-2"></i>
70-
Download Audio
71-
</PrimaryButton>
72-
<PrimaryButton @click="deleteSpeechAudio(speechAudio.id)" class="bg-red-500 hover:bg-red-700 text-white w-full text-left">
73-
<i class="fas fa-trash mr-2"></i>
74-
Delete
75-
</PrimaryButton>
76-
</DropdownMenu>
77-
</div>
78-
</td>
79-
</tr>
80-
</tbody>
81-
</table>
22+
<table class="w-full min-w-max">
23+
<thead>
24+
<tr>
25+
<th class="text-white p-4 text-left">
26+
<i class="fas fa-align-left mr-2"></i>
27+
<span class="hidden sm:inline">Text</span>
28+
</th>
29+
<th class="text-white p-4 text-left hidden sm:table-cell">
30+
<i class="fas fa-calendar-alt mr-2"></i>
31+
<span class="hidden sm:inline">Recorded At</span>
32+
</th>
33+
<th class="text-white p-4">
34+
<i class="fas fa-cogs mr-2"></i>
35+
<span class="hidden sm:inline">Actions</span>
36+
</th>
37+
</tr>
38+
</thead>
39+
<tbody>
40+
<tr v-if="!speechAudios || !speechAudios.data || speechAudios.data.length === 0">
41+
<td colspan="4" class="text-white px-4 py-8 text-center bg-gray-700 rounded-lg">
42+
No speech audios found.
43+
</td>
44+
</tr>
45+
<tr v-else v-for="speechAudio in speechAudios.data" :key="speechAudio.id">
46+
<td class="text-white px-4 py-2">
47+
{{ truncate(speechAudio.text, 34) }}
48+
</td>
49+
<td class="text-white px-4 py-2 hidden sm:table-cell">
50+
{{ format(new Date(speechAudio.created_at),"dd/MM/yyyy HH:mm:ss") }}
51+
</td>
52+
<td class="text-white px-2 py-2 space-x-2 text-center">
53+
<div class="flex space-x-1 justify-center">
54+
<AudioPlayer :audioUrl="speechAudio.audioUrl" v-model:isPlaying="speechAudio.isPlaying"/>
55+
<DropdownMenu>
56+
<PrimaryButton @click="downloadText(speechAudio.id)" class="bg-green-500 hover:bg-green-700 text-white w-full text-left px-2 py-1 text-xs sm:text-sm">
57+
<i class="fas fa-download mr-1 sm:mr-2"></i>
58+
<span class="hidden sm:inline">Download TXT</span>
59+
</PrimaryButton>
60+
<PrimaryButton @click="downloadSpeechAudio(speechAudio.id)" class="bg-green-500 hover:bg-green-700 text-white w-full text-left px-2 py-1 text-xs sm:text-sm">
61+
<i class="fas fa-download mr-1 sm:mr-2"></i>
62+
<span class="hidden sm:inline">Download Audio</span>
63+
</PrimaryButton>
64+
<PrimaryButton @click="deleteSpeechAudio(speechAudio.id)" class="bg-red-500 hover:bg-red-700 text-white w-full text-left px-2 py-1 text-xs sm:text-sm">
65+
<i class="fas fa-trash mr-1 sm:mr-2"></i>
66+
<span class="hidden sm:inline">Delete</span>
67+
</PrimaryButton>
68+
</DropdownMenu>
69+
</div>
70+
</td>
71+
</tr>
72+
</tbody>
73+
</table>
8274
</div>
8375

8476
<div class="flex justify-left mb-6 mt-6">
@@ -91,7 +83,6 @@
9183
<Modal :show="showModal" @close="showModal = false">
9284
<Form :submitAction="submitForm" buttonText="Generate Speech Audio" :errors="errors"/>
9385
</Modal>
94-
9586
</AuthenticatedLayout>
9687
</template>
9788

0 commit comments

Comments
 (0)