feat: Update design for report pages (#10506)
<img width="1440" alt="Screenshot 2024-11-26 at 8 38 57 PM" src="https://github.com/user-attachments/assets/f752157c-6134-42cb-8211-ce636ea9e4d6"> <img width="1439" alt="Screenshot 2024-11-26 at 8 40 47 PM" src="https://github.com/user-attachments/assets/580b1f61-68bc-489b-9081-b0aeb402f31d"> --------- Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
This commit is contained in:
@@ -54,7 +54,7 @@ const end = computed(() => {
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex flex-1 items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-700">
|
||||
<p class="text-sm text-n-slate-11 mb-0">
|
||||
{{ $t('REPORT.PAGINATION.RESULTS', { start, end, total }) }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -62,7 +62,7 @@ const end = computed(() => {
|
||||
<woot-button
|
||||
:disabled="!table.getCanPreviousPage()"
|
||||
variant="clear"
|
||||
class="size-8 flex items-center border border-slate-50"
|
||||
class="h-8 border-0 flex items-center"
|
||||
color-scheme="secondary"
|
||||
@click="table.setPageIndex(0)"
|
||||
>
|
||||
@@ -70,7 +70,7 @@ const end = computed(() => {
|
||||
</woot-button>
|
||||
<woot-button
|
||||
variant="clear"
|
||||
class="size-8 flex items-center border border-slate-50"
|
||||
class="h-8 border-0 flex items-center"
|
||||
color-scheme="secondary"
|
||||
:disabled="!table.getCanPreviousPage()"
|
||||
@click="table.previousPage()"
|
||||
@@ -81,22 +81,22 @@ const end = computed(() => {
|
||||
v-for="page in visiblePages"
|
||||
:key="page"
|
||||
variant="clear"
|
||||
class="size-8 flex items-center justify-center border text-xs leading-none text-center"
|
||||
:class="page == currentPage ? 'border-woot-500' : 'border-slate-50'"
|
||||
class="h-8 flex items-center justify-center text-xs leading-none text-center"
|
||||
:class="page == currentPage ? 'border-n-brand' : 'border-slate-50'"
|
||||
color-scheme="secondary"
|
||||
@click="table.setPageIndex(page - 1)"
|
||||
>
|
||||
<div
|
||||
<span
|
||||
class="text-center"
|
||||
:class="{ 'text-woot-500': page == currentPage }"
|
||||
:class="{ 'text-n-brand': page == currentPage }"
|
||||
>
|
||||
{{ page }}
|
||||
</div>
|
||||
</span>
|
||||
</woot-button>
|
||||
<woot-button
|
||||
:disabled="!table.getCanNextPage()"
|
||||
variant="clear"
|
||||
class="size-8 flex items-center border border-slate-50"
|
||||
class="h-8 border-0 flex items-center"
|
||||
color-scheme="secondary"
|
||||
@click="table.nextPage()"
|
||||
>
|
||||
@@ -105,7 +105,7 @@ const end = computed(() => {
|
||||
<woot-button
|
||||
:disabled="!table.getCanNextPage()"
|
||||
variant="clear"
|
||||
class="size-8 flex items-center border border-slate-50"
|
||||
class="h-8 border-0 flex items-center"
|
||||
color-scheme="secondary"
|
||||
@click="table.setPageIndex(table.getPageCount() - 1)"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user