Skip to content

Commit d23f163

Browse files
StevenU21StevenU21
committed
Enhance UI in AudioPlayer, DropdownMenu, and Transcriptions components with responsive design and improved button styles
1 parent 676c63f commit d23f163

File tree

4 files changed

+69
-63
lines changed

4 files changed

+69
-63
lines changed

‎resources/js/Components/AudioPlayer.vue

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<div>
33
<PrimaryButton @click="toggleAudio" :class="buttonClass">
4-
<i :class="iconClass" class="mr-2"></i>
5-
{{ isPlaying ? 'Pause' : 'Play' }} Audio
4+
<i :class="iconClass" class="mr-0 sm:mr-2"></i>
5+
<span class="hidden sm:inline">{{ isPlaying ? 'Pause' : 'Play' }} Audio</span>
66
</PrimaryButton>
77
</div>
88
</template>
@@ -28,7 +28,7 @@ const emit = defineEmits(['update:isPlaying']);
2828
const audio = ref(null);
2929
const isPlaying = ref(props.isPlaying);
3030
31-
const buttonClass = ref('bg-yellow-500 hover:bg-yellow-700 text-white');
31+
const buttonClass = ref(`${isPlaying.value ? 'bg-red-500' : 'bg-green-500'} `);
3232
const iconClass = ref(isPlaying.value ? 'fas fa-pause' : 'fas fa-play');
3333
3434
const toggleAudio = () => {
@@ -72,12 +72,14 @@ onUnmounted(() => {
7272
7373
watch(isPlaying, (newVal) => {
7474
iconClass.value = newVal ? 'fas fa-pause' : 'fas fa-play';
75+
buttonClass.value = `${newVal ? 'bg-red-500' : 'bg-green-500'} p-1 sm:px-2 sm:py-1`;
7576
});
7677
7778
watch(currentPlaying, (newVal) => {
7879
if (newVal !== audio.value) {
7980
isPlaying.value = false;
8081
iconClass.value = 'fas fa-play';
82+
buttonClass.value = 'bg-green-500 p-1 sm:px-2 sm:py-1';
8183
}
8284
});
8385
</script>

‎resources/js/Components/DropdownMenu.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<div class="relative">
3-
<button @click="toggleDropdown" class="bg-gray-500 hover:bg-gray-700 text-white px-2 py-1 rounded">
3+
<button @click="toggleDropdown" class="bg-gray-500 hover:bg-gray-700 text-white px-2 py-1 rounded text-xs sm:text-sm">
44
<i :class="isOpen ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i>
55
</button>
6-
<div v-if="isOpen" class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded shadow-lg z-50">
6+
<div v-if="isOpen" class="absolute right-0 mt-2 w-auto sm:w-48 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded shadow-lg z-50">
77
<slot></slot>
88
</div>
99
</div>

‎resources/js/Layouts/AuthenticatedLayout.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,9 @@ onMounted(() => {
160160
</div>
161161
</div>
162162
</div>
163-
163+
<div class="block sm:hidden">
164+
<RequestCount />
165+
</div>
164166
<!-- Responsive Navigation Menu -->
165167
<div
166168
:class="{
@@ -169,7 +171,9 @@ onMounted(() => {
169171
}"
170172
class="sm:hidden"
171173
>
174+
172175
<div class="space-y-1 pb-3 pt-2">
176+
173177
<ResponsiveNavLink
174178
:href="route('dashboard')"
175179
:active="route().current('dashboard')"

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

Lines changed: 57 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -21,71 +21,71 @@
2121
</div>
2222

2323
<div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
24-
<table class="w-full min-w-max">
25-
<thead>
26-
<tr>
24+
<table class="w-full min-w-max">
25+
<thead>
26+
<tr>
27+
<th class="text-white p-4 text-left">
28+
<i class="fas fa-font mr-2"></i>
29+
<span class="hidden sm:inline">Title</span>
30+
</th>
31+
<th class="text-white p-4 text-left hidden sm:table-cell">
32+
<i class="fas fa-align-left mr-2"></i>
33+
<span class="hidden sm:inline">Content</span>
34+
</th>
2735
<th class="text-white p-4 text-left">
28-
<i class="fas fa-font mr-2"></i>Title
29-
</th>
30-
<th class="text-white p-4 text-left">
31-
<i class="fas fa-align-left mr-2"></i
32-
>Content
33-
</th>
34-
<th class="text-white p-4 text-left">
35-
<i class="fas fa-calendar-alt mr-2"></i
36-
>Language
37-
</th>
38-
<th class="text-white p-4">
39-
<i class="fas fa-cogs mr-2"></i>Actions
40-
</th>
41-
</tr>
42-
</thead>
43-
<tbody>
44-
<tr v-if="!transcriptions || !transcriptions.data || transcriptions.data.length === 0">
45-
<td colspan="5" class="text-white px-4 py-8 text-center bg-gray-700 rounded-lg">
46-
No transcriptions found.
47-
</td>
48-
</tr>
49-
<tr v-else v-for="transcription in transcriptions.data" :key="transcription.id">
50-
<td class="text-white px-4 py-2">
51-
{{ transcription.title }}
52-
</td>
53-
<td class="text-white px-4 py-2">
54-
{{
55-
truncate(transcription.content, 30)
56-
}}
57-
</td>
58-
<td class="text-white px-4 py-2">
59-
<span v-if="transcription.language === 'en'">
60-
🇺🇸
61-
</span>
62-
<span v-else-if="transcription.language === 'es'">
63-
🇪🇸
64-
</span>
65-
{{ transcription.language }}
66-
</td>
67-
<td class="text-white px-4 py-2 space-x-2 text-center">
68-
<div class="flex space-x-2 justify-center">
36+
<i class="fas fa-globe mr-2"></i>
37+
<span class="hidden sm:inline">Language</span>
38+
</th>
39+
<th class="text-white p-4">
40+
<i class="fas fa-cogs mr-2"></i>
41+
<span class="hidden sm:inline">Actions</span>
42+
</th>
43+
</tr>
44+
</thead>
45+
<tbody>
46+
<tr v-if="!transcriptions || !transcriptions.data || transcriptions.data.length === 0">
47+
<td colspan="4" class="text-white px-4 py-8 text-center bg-gray-700 rounded-lg">
48+
No transcriptions found.
49+
</td>
50+
</tr>
51+
<tr v-else v-for="transcription in transcriptions.data" :key="transcription.id">
52+
<td class="text-white px-4 py-2">
53+
{{ truncate(transcription.title, 12) }}
54+
</td>
55+
<td class="text-white px-4 py-2 hidden sm:table-cell">
56+
{{ truncate(transcription.content, 30) }}
57+
</td>
58+
<td class="text-white px-4 py-2">
59+
<span v-if="transcription.language === 'en'">
60+
🇺🇸
61+
</span>
62+
<span v-else-if="transcription.language === 'es'">
63+
🇪🇸
64+
</span>
65+
{{ transcription.language }}
66+
</td>
67+
<td class="text-white px-2 py-2 space-x-2 text-center">
68+
<div class="flex space-x-1 justify-center">
6969
<AudioPlayer :audioUrl="transcription.audioUrl" v-model:isPlaying="transcription.isPlaying"/>
7070
<DropdownMenu>
71-
<PrimaryButton @click="viewTranscription(transcription.slug)" class="bg-blue-500 hover:bg-blue-700 text-white w-full text-left">
72-
<i class="fas fa-eye mr-2"></i>
73-
View PDF
71+
<PrimaryButton @click="viewTranscription(transcription.slug)" class="bg-blue-500 hover:bg-blue-700 text-white w-full text-left px-2 py-1 text-xs sm:text-sm">
72+
<i class="fas fa-eye mr-1 sm:mr-2"></i>
73+
<span class="hidden sm:inline">View PDF</span>
7474
</PrimaryButton>
75-
<PrimaryButton @click="downloadTranscription(transcription.slug)" class="bg-green-500 hover:bg-green-700 text-white w-full text-left">
76-
<i class="fas fa-download mr-2"></i>
77-
Download PDF
75+
<PrimaryButton @click="downloadTranscription(transcription.slug)" class="bg-green-500 hover:bg-green-700 text-white w-full text-left px-2 py-1 text-xs sm:text-sm">
76+
<i class="fas fa-download mr-1 sm:mr-2"></i>
77+
<span class="hidden sm:inline">Download PDF</span>
7878
</PrimaryButton>
79-
<PrimaryButton @click="deletetranscription(transcription.slug)" class="bg-red-500 hover:bg-red-700 text-white w-full text-left">
80-
<i class="fas fa-trash mr-2"></i>
81-
Delete
79+
<PrimaryButton @click="deletetranscription(transcription.slug)" class="bg-red-500 hover:bg-red-700 text-white w-full text-left px-2 py-1 text-xs sm:text-sm">
80+
<i class="fas fa-trash mr-1 sm:mr-2"></i>
81+
<span class="hidden sm:inline">Delete</span>
8282
</PrimaryButton>
8383
</DropdownMenu>
8484
</div>
8585
</td>
86-
</tr>
87-
</tbody>
88-
</table>
86+
</tr>
87+
</tbody>
88+
</table>
8989
</div>
9090

9191
<div class="flex justify-left mb-6 mt-6">
@@ -112,7 +112,7 @@ import Form from "@/Pages/Transcriptions/Form.vue";
112112
import { Head, router, usePage } from "@inertiajs/vue3";
113113
import Swal from "sweetalert2";
114114
import { ref, onMounted, watch } from "vue";
115-
import eventBus from "@/Components/eventBus.js";
115+
import eventBus from "@/Components/eventBus.js";
116116
117117
defineProps({
118118
transcriptions: {

0 commit comments

Comments
 (0)