danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

refactor: standardize pagination position

Browse source
This commit is contained in:
arabcoders 2026-04-21 22:55:52 +03:00
parent e7dfee66b1
commit 6eaa15b37a
6 changed files with 105 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
ui/app/pages/browser/[...slug].vue
View file

@ -148,22 +148,19 @@
</UDropdownMenu>
</div>
<p class="text-sm text-toned">
Page {{ pagination.page }} of {{ pagination.total_pages || 1 }}
</p>
<UPagination
v-if="pagination.total_pages > 1"
:page="pagination.page"
:total="pagination.total"
:items-per-page="pagination.per_page"
:disabled="isLoading"
show-edges
:sibling-count="0"
@update:page="handlePageChange"
size="sm"
/>
</div>
<UPagination
v-if="pagination.total_pages > 1"
:page="pagination.page"
:total="pagination.total"
:items-per-page="pagination.per_page"
:disabled="isLoading"
show-edges
:sibling-count="0"
@update:page="handlePageChange"
/>
<div
v-if="contentStyle === 'list' && hasItems"
class="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-default bg-default"
@ -187,15 +184,7 @@
/>
</button>
</th>
<th :class="controlEnabled ? 'w-20' : 'w-24'">
#
<UIcon
v-if="sort_by === 'type'"
:name="sortDirectionIcon"
class="ml-1 inline-flex size-3.5"
/>
</th>
<th class="text-left">
<th class="w-full text-left">
Name
<UIcon
v-if="sort_by === 'name'"
@ -240,16 +229,14 @@
</label>
</td>
<td class="px-3 py-3 text-center align-middle">
<UTooltip :text="item.name">
<span class="inline-flex items-center justify-center text-toned">
<UIcon :name="itemTypeIcon(item)" class="size-6" />
</span>
</UTooltip>
</td>
<td class="px-3 py-3 align-middle">
<div class="flex min-w-0 items-center justify-between gap-3">
<div class="flex min-w-0 items-center gap-3">
<UTooltip :text="itemTypeLabel(item)">
<span class="inline-flex shrink-0 items-center justify-center text-toned">
<UIcon :name="itemTypeIcon(item)" class="size-5" />
</span>
</UTooltip>
<div class="min-w-0 flex-1">
<UTooltip :text="item.name">
<a
@ -484,16 +471,18 @@
description="You can enable rename, delete, move, and create directory controls by setting YTP_BROWSER_CONTROL_ENABLED=true and restarting the application."
/>
<UPagination
v-if="pagination.total_pages > 1"
:page="pagination.page"
:total="pagination.total"
:items-per-page="pagination.per_page"
:disabled="isLoading"
show-edges
:sibling-count="0"
@update:page="handlePageChange"
/>
<div v-if="pagination.total_pages > 1" class="flex justify-end">
<UPagination
:page="pagination.page"
:total="pagination.total"
:items-per-page="pagination.per_page"
:disabled="isLoading"
show-edges
:sibling-count="0"
@update:page="handlePageChange"
size="sm"
/>
</div>
<UModal
v-if="model_item"

36
ui/app/pages/conditions.vue
View file

@ -82,17 +82,6 @@
</div>
</div>
<UPagination
v-if="paging?.total_pages > 1"
:page="paging.page"
:total="paging.total"
:items-per-page="paging.per_page"
:disabled="isLoading"
show-edges
:sibling-count="0"
@update:page="navigatePage"
/>
<div
v-if="!isLoading && filteredItems.length > 0"
class="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-default bg-default px-3 py-3"
@ -125,7 +114,17 @@
</UDropdownMenu>
</div>
<div class="text-xs text-toned">{{ filteredItems.length }} displayed</div>
<UPagination
v-if="paging?.total_pages > 1"
:page="paging.page"
:total="paging.total"
:items-per-page="paging.per_page"
:disabled="isLoading"
show-edges
:sibling-count="0"
@update:page="navigatePage"
size="sm"
/>
</div>
<div
@ -440,6 +439,19 @@
description="There are no custom defined conditions yet. Click the New Condition button to add your first condition."
/>
<div v-if="filteredItems.length > 0 && paging?.total_pages > 1" class="flex justify-end">
<UPagination
:page="paging.page"
:total="paging.total"
:items-per-page="paging.per_page"
:disabled="isLoading"
show-edges
:sibling-count="0"
@update:page="navigatePage"
size="sm"
/>
</div>
<div
v-if="filteredItems.length > 0 && !query"
class="rounded-lg border border-info/30 bg-info/10 p-4 text-sm text-default"

36
ui/app/pages/dl_fields.vue
View file

@ -82,17 +82,6 @@
</div>
</div>
<UPagination
v-if="paging?.total_pages > 1"
:page="paging.page"
:total="paging.total"
:items-per-page="paging.per_page"
:disabled="isLoading"
show-edges
:sibling-count="0"
@update:page="navigatePage"
/>
<div
v-if="!isLoading && filteredItems.length > 0"
class="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-default bg-default px-3 py-3"
@ -125,7 +114,17 @@
</UDropdownMenu>
</div>
<div class="text-xs text-toned">{{ filteredItems.length }} displayed</div>
<UPagination
v-if="paging?.total_pages > 1"
:page="paging.page"
:total="paging.total"
:items-per-page="paging.per_page"
:disabled="isLoading"
show-edges
:sibling-count="0"
@update:page="navigatePage"
size="sm"
/>
</div>
<div
@ -392,6 +391,19 @@
description="There are no custom defined fields yet. Click the New Field button to add your first field."
/>
<div v-if="filteredItems.length > 0 && paging?.total_pages > 1" class="flex justify-end">
<UPagination
:page="paging.page"
:total="paging.total"
:items-per-page="paging.per_page"
:disabled="isLoading"
show-edges
:sibling-count="0"
@update:page="navigatePage"
size="sm"
/>
</div>
<UModal
v-if="editorOpen"
:open="editorOpen"

4
ui/app/pages/index.vue
View file

@ -100,8 +100,8 @@
<UEmpty
v-if="!hasQueueContent"
icon="i-lucide-inbox"
title="No downloads yet"
icon="i-lucide-triangle-alert"
title="No active or queued downloads yet"
class="rounded-lg border border-dashed border-default bg-muted/10 py-10"
/>

36
ui/app/pages/notifications.vue
View file

@ -95,17 +95,6 @@
</div>
</div>
<UPagination
v-if="paging?.total_pages > 1"
:page="paging.page"
:total="paging.total"
:items-per-page="paging.per_page"
:disabled="isLoading"
show-edges
:sibling-count="0"
@update:page="navigatePage"
/>
<div
v-if="!isLoading && filteredTargets.length > 0"
class="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-default bg-default px-3 py-3"
@ -138,7 +127,17 @@
</UDropdownMenu>
</div>
<div class="text-xs text-toned">{{ filteredTargets.length }} displayed</div>
<UPagination
v-if="paging?.total_pages > 1"
:page="paging.page"
:total="paging.total"
:items-per-page="paging.per_page"
:disabled="isLoading"
show-edges
:sibling-count="0"
@update:page="navigatePage"
size="sm"
/>
</div>
<div
@ -490,6 +489,19 @@
description="No notification targets found. Click on the New Notification button to add your first notification target."
/>
<div v-if="filteredTargets.length > 0 && paging?.total_pages > 1" class="flex justify-end">
<UPagination
:page="paging.page"
:total="paging.total"
:items-per-page="paging.per_page"
:disabled="isLoading"
show-edges
:sibling-count="0"
@update:page="navigatePage"
size="sm"
/>
</div>
<div
v-if="!query && filteredTargets.length > 0"
class="rounded-lg border border-info/30 bg-info/10 p-4 text-sm text-default"

2
ui/app/pages/presets.vue
View file

@ -112,8 +112,6 @@
</UButton>
</UDropdownMenu>
</div>
<div class="text-xs text-toned">{{ filteredPresets.length }} displayed</div>
</div>
<div