Skip to content

Commit 3a92e81

Browse files
StevenU21StevenU21
committed
Refactor Images and SpeechAudio tables for improved responsiveness and text truncation
1 parent b038ca8 commit 3a92e81

File tree

2 files changed

+59
-51
lines changed

2 files changed

+59
-51
lines changed

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

Lines changed: 58 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -19,57 +19,65 @@
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-image mr-2"></i>Prompt
27-
</th>
28-
<th class="text-white p-4 text-left">
29-
<i class="fas fa-calendar-alt mr-2"></i>Generated At
30-
</th>
31-
<th class="text-white p-4 text-left">
32-
<i class="fas fa-expand mr-2"></i>Image
33-
</th>
34-
<th class="text-white p-4">
35-
<i class="fas fa-cogs mr-2"></i>Actions
36-
</th>
37-
</tr>
38-
</thead>
39-
<tbody>
40-
<tr v-if="!images || !images.data || images.data.length === 0">
41-
<td colspan="5" class="text-white px-4 py-8 text-center bg-gray-700 rounded-lg">
42-
No images found.
43-
</td>
44-
</tr>
45-
<tr v-else v-for="image in images.data" :key="image.id">
46-
<td class="text-white px-4 py-2">
47-
{{ truncate(image.prompt, 40) }}
48-
</td>
49-
<td class="text-white px-4 py-2">
50-
{{ format(new Date(image.created_at), 'dd/MM/yyyy HH:mm:ss') }}
51-
</td>
52-
<td class="text-white px-4 py-2">
53-
<img :src="image.imageUrl" alt="Generated Image" class="w-32 h-32 object-cover rounded-md" />
54-
</td>
55-
<td class="text-white px-4 py-2 space-x-2 text-center">
56-
<div class="flex space-x-2 justify-center">
57-
<PrimaryButton @click="openImageModal(image)" class="bg-blue-500 hover:bg-blue-700 text-white text-left">
58-
<i class="fas fa-eye mr-2"></i> View
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-image mr-2"></i>
27+
<span class="hidden sm:inline">Prompt</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">Generated At</span>
32+
</th>
33+
<th class="text-white p-4 text-left">
34+
<i class="fas fa-expand mr-2"></i>
35+
<span class="hidden sm:inline">Image</span>
36+
</th>
37+
<th class="text-white p-4">
38+
<i class="fas fa-cogs mr-2"></i>
39+
<span class="hidden sm:inline">Actions</span>
40+
</th>
41+
</tr>
42+
</thead>
43+
<tbody>
44+
<tr v-if="!images || !images.data || images.data.length === 0">
45+
<td colspan="5" class="text-white px-4 py-8 text-center bg-gray-700 rounded-lg">
46+
No images found.
47+
</td>
48+
</tr>
49+
<tr v-else v-for="image in images.data" :key="image.id">
50+
<td class="text-white px-4 py-2">
51+
<span class="sm:hidden">{{ truncate(image.prompt, 8) }}</span>
52+
<span class="hidden sm:inline">{{ truncate(image.prompt, 40) }}</span>
53+
</td>
54+
<td class="text-white px-4 py-2 hidden sm:table-cell">
55+
{{ format(new Date(image.created_at), 'dd/MM/yyyy HH:mm:ss') }}
56+
</td>
57+
<td class="text-white px-4 py-2">
58+
<img :src="image.imageUrl" alt="Generated Image" class="w-16 h-16 sm:w-32 sm:h-32 object-cover rounded-md" />
59+
</td>
60+
<td class="text-white px-4 py-2 space-x-2 text-center">
61+
<div class="flex space-x-1 justify-center">
62+
<PrimaryButton @click="openImageModal(image)" class="bg-blue-500 hover:bg-blue-700 text-white text-left px-2 py-1 text-xs sm:text-sm">
63+
<i class="fas fa-eye mr-1"></i>
64+
<span class="hidden sm:inline">View</span>
65+
</PrimaryButton>
66+
<DropdownMenu>
67+
<PrimaryButton @click="downloadImage(image.id)" class="bg-green-500 hover:bg-green-700 text-white w-full text-left px-2 py-1 text-xs sm:text-sm">
68+
<i class="fas fa-download mr-1"></i>
69+
<span class="hidden sm:inline">Download</span>
5970
</PrimaryButton>
60-
<DropdownMenu>
61-
<PrimaryButton @click="downloadImage(image.id)" class="bg-green-500 hover:bg-green-700 text-white w-full text-left">
62-
<i class="fas fa-download mr-2"></i> Download
63-
</PrimaryButton>
64-
<PrimaryButton @click="deleteImage(image.id)" class="bg-red-500 hover:bg-red-700 text-white w-full text-left">
65-
<i class="fas fa-trash mr-2"></i> Delete
66-
</PrimaryButton>
67-
</DropdownMenu>
68-
</div>
69-
</td>
70-
</tr>
71-
</tbody>
72-
</table>
71+
<PrimaryButton @click="deleteImage(image.id)" class="bg-red-500 hover:bg-red-700 text-white w-full text-left px-2 py-1 text-xs sm:text-sm">
72+
<i class="fas fa-trash mr-1"></i>
73+
<span class="hidden sm:inline">Delete</span>
74+
</PrimaryButton>
75+
</DropdownMenu>
76+
</div>
77+
</td>
78+
</tr>
79+
</tbody>
80+
</table>
7381
</div>
7482

7583
<div class="flex justify-left mb-6 mt-6">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
</tr>
4545
<tr v-else v-for="speechAudio in speechAudios.data" :key="speechAudio.id">
4646
<td class="text-white px-4 py-2">
47-
<span class="sm:hidden">{{ truncate(speechAudio.text, 34) }}</span>
47+
<span class="sm:hidden">{{ truncate(speechAudio.text, 24) }}</span>
4848
<span class="hidden sm:inline">{{ truncate(speechAudio.text, 60) }}</span>
4949
</td>
5050
<td class="text-white px-4 py-2 hidden sm:table-cell">

0 commit comments

Comments
 (0)