Skip to content

Commit f7095ab

Browse files
codejutsu1codejutsu1
committed
made some sections responsive
1 parent 8e2e373 commit f7095ab

File tree

3 files changed

+23
-23
lines changed

3 files changed

+23
-23
lines changed

‎resources/js/pages/chats/Details.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -110,17 +110,17 @@ onMounted(async () => {
110110
class="flex h-full border flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4"
111111
>
112112
<div class="flex gap-4 h-full">
113-
<div class="w-[70%] h-full">
113+
<div class="w-full md:w-[70%] h-full">
114114
<div class="h-full">
115115
<div class="relative h-full flex flex-col items-center justify-between">
116-
<ScrollArea v-show="isReady" ref="scrollAreaRef" class="w-full rounded-md h-[350px] p-2 mb-2">
116+
<ScrollArea v-show="isReady" ref="scrollAreaRef" class="w-full rounded-md h-[600px] md:h-[350px] p-2 mb-2">
117117
<div class="space-y-2">
118118
<div
119119
v-for="message in messages.data"
120120
:key="message.id" class="flex"
121121
:class="message.participant === 'user' ? 'justify-end' : 'justify-start'"
122122
>
123-
<div class="text-white rounded-4xl p-4 max-w-[70%]" :class="message.participant === 'user' ? 'bg-zinc-800' : 'bg-gray-900'">
123+
<div class="text-white rounded-4xl p-4 max-w-[80%] md:max-w-[70%] text-sm md:text-base" :class="message.participant === 'user' ? 'bg-zinc-800' : 'bg-gray-900'">
124124
<p>
125125
{{ message.message }}
126126
</p>
@@ -196,7 +196,7 @@ onMounted(async () => {
196196
</div>
197197
</div>
198198
</div>
199-
<div class="w-1/3 h-full border rounded-lg py-4 px-2">
199+
<div class="hidden md:block w-1/3 h-full border rounded-lg py-4 px-2">
200200
<div class="flex justify-between items-center">
201201
<h1 class="text-lg font-bold text-center">Chat History</h1>
202202

‎resources/js/pages/chats/Index.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@ const handleSuccess = () => {
7373
<div
7474
class="flex h-full border flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4"
7575
>
76-
<div class="flex gap-4 h-[500px]">
77-
<div class="w-[70%] h-[90%]">
76+
<div class="flex gap-4 h-[700px] md:h-[500px]">
77+
<div class="md:w-[70%] w-full h-[90%]">
7878
<Form
7979
:action="store.url({ file: file.data.uuid })"
8080
method="post"
@@ -139,7 +139,7 @@ const handleSuccess = () => {
139139
</div>
140140
</Form>
141141
</div>
142-
<div class="w-1/3 h-[90%] border rounded-lg py-4 px-2">
142+
<div class="hidden md:block w-1/3 h-[90%] border rounded-lg py-4 px-2">
143143
<h1 class="text-lg font-bold text-center">Chat History</h1>
144144
<ScrollArea class="h-[90%] w-full rounded-md">
145145
<div class="mt-2 space-y-2">

‎resources/js/pages/files/Show.vue‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -98,37 +98,37 @@ const steps = [
9898
<Card class="border-none">
9999
<CardContent class="border py-4 rounded-md">
100100
<div class="flex gap-x-1 gap-y-2">
101-
<div class="flex w-1/5">
101+
<div class="flex w-1/3 md:w-1/5">
102102
<img src="/pdf-image.png" alt="Image of Pdf" class="w-20 h-20">
103103
</div>
104-
<div class="flex flex-col w-4/5">
104+
<div class="flex flex-col w-3/5 md:w-4/5">
105105
<div class="flex flex-col gap-2 space-y-1 text-sm">
106-
<div class="flex items-start">
107-
<span class="text-gray-400 text-sm w-1/5">Name: </span>
106+
<div class="flex items-start text-xs md:text-sm">
107+
<span class="text-gray-400 w-1/3 md:w-1/5">Name: </span>
108108
<span class="font-medium w-4/5">{{ file?.data?.name }}</span>
109109
</div>
110-
<div class="flex items-start">
111-
<span class="text-gray-400 text-sm w-1/5">Size: </span>
110+
<div class="flex items-start text-xs md:text-sm">
111+
<span class="text-gray-400 w-1/3 md:w-1/5">Size: </span>
112112
<span class="font-medium w-4/5">{{ file?.data?.size }}</span>
113113
</div>
114-
<div class="flex items-start">
115-
<span class="text-gray-400 text-sm w-1/5">Author: </span>
114+
<div class="flex items-start text-xs md:text-sm">
115+
<span class="text-gray-400 w-1/3 md:w-1/5">Author: </span>
116116
<span class="font-medium w-4/5">{{ file?.data?.author ?? "No Author in this PDF" }}</span>
117117
</div>
118-
<div class="flex items-start">
119-
<span class="text-gray-400 text-sm w-1/5">Pages: </span>
118+
<div class="flex items-start text-xs md:text-sm">
119+
<span class="text-gray-400 w-1/3 md:w-1/5">Pages: </span>
120120
<span class="font-medium w-4/5">{{ file?.data?.pages }}</span>
121121
</div>
122-
<div class="flex items-start">
123-
<span class="text-gray-400 text-sm w-1/5">Uploaded: </span>
122+
<div class="flex items-start text-xs md:text-sm">
123+
<span class="text-gray-400 w-1/3 md:w-1/5">Upload: </span>
124124
<span class="font-medium w-4/5">{{ file?.data?.created_at }}</span>
125125
</div>
126-
<div class="flex items-start">
127-
<span class="text-gray-400 text-sm w-1/5">Type: </span>
126+
<div class="flex items-start text-xs md:text-sm">
127+
<span class="text-gray-400 w-1/3 md:w-1/5">Type: </span>
128128
<span class="font-medium w-4/5">{{ file?.data?.type }}</span>
129129
</div>
130-
<div class="flex items-start">
131-
<span class="text-gray-400 text-sm w-1/5">Status: </span>
130+
<div class="flex items-start text-xs md:text-sm">
131+
<span class="text-gray-400 w-1/3 md:w-1/5">Status: </span>
132132
<div class="flex items-center">
133133
<span v-if="fileStatus === 'completed'" class="font-medium w-4/5"><Badge variant="outline" class="bg-green-500">Completed</Badge></span>
134134
<span v-if="fileStatus === 'failed'" class="font-medium w-4/5"><Badge variant="outline" class="bg-red-500">Failed</Badge></span>

0 commit comments

Comments
 (0)