Skip to content

Commit 29a4975

Browse files
amit-webkulamit-webkul
committed
update mail index layout for improved responsiveness and readability.
1 parent 9b31821 commit 29a4975

File tree

1 file changed

+61
-65
lines changed

1 file changed

+61
-65
lines changed

‎packages/Webkul/Admin/src/Resources/views/mail/index.blade.php

+61-65
Original file line numberDiff line numberDiff line change
@@ -151,88 +151,84 @@ class="align-text-bottom text-base text-gray-800 dark:text-white ltr:ml-1.5 rtl:
151151
<template v-else>
152152
<div
153153
v-for="record in available.records"
154-
class="flex cursor-pointer items-center justify-between border-b px-8 py-4 text-gray-600 hover:bg-gray-50 dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-950"
154+
class="row grid cursor-pointer grid-cols-[2fr_7fr_.0.3fr] grid-rows-1 items-center justify-between border-b px-8 py-4 text-gray-600 hover:bg-gray-50 dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-950"
155155
:class="{
156156
'font-medium': record.is_read,
157157
'font-semibold': ! record.is_read
158158
}"
159159
@click.stop="selectedMail=true; editModal(record.actions.find(action => action.index === 'edit'))"
160160
>
161161
<!-- Select Box -->
162-
<div class="flex w-full items-center justify-start gap-[124px]">
163-
<div class="flex items-center gap-6">
164-
<div class="relative flex items-center">
165-
<!-- Dot Indicator -->
166-
<span
167-
class="absolute right-8 h-1.5 w-1.5 rounded-full bg-sky-600 dark:bg-white"
168-
v-if="! record.is_read"
169-
></span>
170-
171-
<!-- Checkbox Container -->
172-
<div class="flex items-center gap-2">
173-
<input
174-
type="checkbox"
175-
:name="`mass_action_select_record_${record.id}`"
176-
:id="`mass_action_select_record_${record.id}`"
177-
:value="record.id"
178-
class="peer hidden"
179-
v-model="applied.massActions.indices"
180-
@click.stop
181-
>
162+
<div class="flex items-center gap-6">
163+
<div class="relative flex items-center">
164+
<!-- Dot Indicator -->
165+
<span
166+
class="absolute right-8 h-1.5 w-1.5 rounded-full bg-sky-600 dark:bg-white"
167+
v-if="! record.is_read"
168+
></span>
169+
170+
<!-- Checkbox Container -->
171+
<div class="flex items-center gap-2">
172+
<input
173+
type="checkbox"
174+
:name="`mass_action_select_record_${record.id}`"
175+
:id="`mass_action_select_record_${record.id}`"
176+
:value="record.id"
177+
class="peer hidden"
178+
v-model="applied.massActions.indices"
179+
@click.stop
180+
>
182181
183-
<label
184-
class="icon-checkbox-outline peer-checked:icon-checkbox-select cursor-pointer rounded-md text-2xl !text-gray-500 peer-checked:!text-brandColor dark:!text-gray-300"
185-
:for="`mass_action_select_record_${record.id}`"
186-
@click.stop
187-
></label>
188-
</div>
182+
<label
183+
class="icon-checkbox-outline peer-checked:icon-checkbox-select cursor-pointer rounded-md text-2xl !text-gray-500 peer-checked:!text-brandColor dark:!text-gray-300"
184+
:for="`mass_action_select_record_${record.id}`"
185+
@click.stop
186+
></label>
189187
</div>
190-
191-
<p class="flex items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap leading-none">
192-
<x-admin::avatar ::name="record.name" />
193-
194-
@{{ record.name }}
195-
</p>
196188
</div>
197189
198-
<div class="flex w-full items-center justify-between gap-4">
199-
<!-- Content -->
200-
<div class="flex-frow flex items-center gap-2">
201-
<!-- Attachments -->
202-
<p v-html="record.attachments"></p>
190+
<p class="flex items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap leading-none">
191+
<x-admin::avatar ::name="record.name" />
203192
204-
<!-- Tags -->
205-
<span
206-
class="flex items-center gap-1 rounded-2xl bg-rose-100 px-2 py-1"
207-
:style="{
208-
'background-color': tag.color,
209-
'color': backgroundColors.find(color => color.background === tag.color)?.text
210-
}"
211-
v-for="(tag, index) in record.tags"
212-
v-html="tag.name"
213-
>
214-
</span>
193+
@{{ record.name }}
194+
</p>
195+
</div>
215196
216-
<!-- Subject, and Reply -->
217-
<div class="min-w-0 flex-1">
218-
<!-- Subject -->
219-
<p class="line-clamp-1 text-sm text-gray-900 dark:text-gray-100" v-text="record.subject"></p>
197+
<!-- Content -->
198+
<div class="flex-frow flex items-center gap-2">
199+
<!-- Attachments -->
200+
<p v-html="record.attachments"></p>
201+
202+
<!-- Tags -->
203+
<span
204+
class="flex items-center gap-1 rounded-2xl bg-rose-100 px-2 py-1"
205+
:style="{
206+
'background-color': tag.color,
207+
'color': backgroundColors.find(color => color.background === tag.color)?.text
208+
}"
209+
v-for="(tag, index) in record.tags"
210+
v-html="tag.name"
211+
>
212+
</span>
220213
221-
<!-- Reply (Content) -->
222-
<p
223-
class="!font-normal"
224-
v-html="truncatedReply(record.reply)"
225-
>
226-
</p>
227-
</div>
228-
</div>
214+
<!-- Subject, and Reply -->
215+
<div class="min-w-0 flex-1">
216+
<!-- Subject -->
217+
<p class="line-clamp-1 text-sm text-gray-900 dark:text-gray-100" v-text="record.subject"></p>
229218
230-
<!-- Time -->
231-
<div class="min-w-[80px] flex-shrink-0 text-right">
232-
<p class="leading-none">@{{ record.created_at }}</p>
233-
</div>
219+
<!-- Reply (Content) -->
220+
<p
221+
class="!font-normal"
222+
v-html="truncatedReply(record.reply)"
223+
>
224+
</p>
234225
</div>
235226
</div>
227+
228+
<!-- Time -->
229+
<div class="min-w-[80px] flex-shrink-0 text-right">
230+
<p class="leading-none">@{{ record.created_at }}</p>
231+
</div>
236232
</div>
237233
</template>
238234
</template>

0 commit comments

Comments
 (0)