feat: improve UX across all listing pages and homepage
- Make model/video cards fully clickable on homepage, models, videos, magazine, and tags pages - Replace inline blob divs with SexyBackground component on magazine and play pages - Replace magazine hero section with PageHero component for consistency - Remove redundant action buttons from cards (cards are now the link targets) - Fix nested anchor/button invalid HTML in magazine featured article - Convert inner overlay anchors to aria-hidden divs to avoid nested <a> elements - Add bg-muted skeleton placeholder to all card images - Update magazine pagination to smart numbered style with ellipsis (matching videos/models) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -5,6 +5,7 @@
|
||||
import { getAssetUrl } from "$lib/api";
|
||||
import Meta from "$lib/components/meta/meta.svelte";
|
||||
import { formatVideoDuration } from "$lib/utils.js";
|
||||
import SexyBackground from "$lib/components/background/background.svelte";
|
||||
|
||||
const { data } = $props();
|
||||
</script>
|
||||
@@ -12,11 +13,10 @@
|
||||
<Meta title={$_("home.hero.title")} description={$_("home.hero.description")} />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative min-h-[70vh] flex items-center justify-center overflow-hidden">
|
||||
<!-- Background Gradient -->
|
||||
<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-primary/20 via-accent/10 to-background"></div>
|
||||
<SexyBackground />
|
||||
|
||||
<!-- Content -->
|
||||
<div class="relative z-10 container mx-auto px-4 text-center">
|
||||
<div class="max-w-5xl mx-auto space-y-12">
|
||||
<h1
|
||||
@@ -47,14 +47,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Elements -->
|
||||
<div
|
||||
class="absolute top-20 left-10 w-20 h-20 bg-primary/20 rounded-full blur-xl animate-pulse"
|
||||
></div>
|
||||
<div
|
||||
class="absolute bottom-20 right-10 w-32 h-32 bg-accent/20 rounded-full blur-xl animate-pulse delay-1000"
|
||||
></div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Models -->
|
||||
@@ -71,40 +63,22 @@
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-3xl mx-auto">
|
||||
{#each data.models as model (model.slug)}
|
||||
<a href="/models/{model.slug}" class="block group">
|
||||
<Card
|
||||
class="p-0 group hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-primary/20"
|
||||
class="p-0 h-full hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-primary/20"
|
||||
>
|
||||
<CardContent class="p-6 text-center">
|
||||
<div class="relative mb-4">
|
||||
<img
|
||||
src={getAssetUrl(model.avatar, "thumbnail")}
|
||||
alt={model.artist_name}
|
||||
class="w-24 h-24 rounded-full mx-auto object-cover ring-4 ring-primary/20 group-hover:ring-primary/40 transition-all"
|
||||
class="w-24 h-24 rounded-full mx-auto object-cover ring-4 ring-primary/20 group-hover:ring-primary/40 transition-all bg-muted"
|
||||
/>
|
||||
<!-- <div
|
||||
class="absolute -bottom-2 -right-2 bg-primary text-primary-foreground rounded-full w-8 h-8 flex items-center justify-center text-sm font-bold"
|
||||
>
|
||||
<HeartIcon class="w-4 h-4 fill-current" />
|
||||
</div> -->
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">{model.artist_name}</h3>
|
||||
<!-- <div
|
||||
class="flex items-center justify-center gap-4 text-sm text-muted-foreground"
|
||||
>
|
||||
<div class="flex items-center gap-1">
|
||||
<StarIcon class="w-4 h-4 text-yellow-500 fill-current" />
|
||||
{model.rating}
|
||||
</div>
|
||||
<div>{model.videos} {$_("home.featured_models.videos")}</div>
|
||||
</div> -->
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="mt-4 w-full group-hover:bg-primary/10"
|
||||
href="/models/{model.slug}">{$_("home.featured_models.view_profile")}</Button
|
||||
>
|
||||
<h3 class="font-semibold text-lg group-hover:text-primary transition-colors">{model.artist_name}</h3>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
@@ -122,14 +96,15 @@
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
|
||||
{#each data.videos as video (video.slug)}
|
||||
<a href="/videos/{video.slug}" class="block group">
|
||||
<Card
|
||||
class="p-0 group hover:shadow-2xl hover:shadow-accent/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-accent/20 overflow-hidden"
|
||||
class="p-0 h-full hover:shadow-2xl hover:shadow-accent/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-accent/20 overflow-hidden"
|
||||
>
|
||||
<div class="relative">
|
||||
<img
|
||||
src={getAssetUrl(video.image, "preview")}
|
||||
alt={video.title}
|
||||
class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300 bg-muted"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent group-hover:scale-105 transition-transform duration-300"
|
||||
@@ -137,35 +112,26 @@
|
||||
<div class="absolute bottom-2 left-2 text-white text-sm font-medium">
|
||||
{#if video.movie_file?.duration}{formatVideoDuration(video.movie_file.duration)}{/if}
|
||||
</div>
|
||||
<!-- <div
|
||||
class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded-full"
|
||||
>
|
||||
{video.views}
|
||||
{$_("home.trending.views")}
|
||||
</div> -->
|
||||
<div
|
||||
class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<a
|
||||
class="w-16 h-16 bg-primary/90 rounded-full flex items-center justify-center"
|
||||
href="/videos/{video.slug}"
|
||||
aria-label={video.title}
|
||||
>
|
||||
<div class="w-16 h-16 bg-primary/90 rounded-full flex items-center justify-center">
|
||||
<span class="icon-[ri--play-large-fill] w-8 h-8 text-white"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CardContent class="px-4 pb-4 pt-0">
|
||||
<h3 class="font-semibold mb-2 group-hover:text-primary transition-colors">
|
||||
{video.title}
|
||||
</h3>
|
||||
|
||||
<div class="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<span class="icon-[ri--fire-line] w-4 h-4"></span>
|
||||
{$_("home.trending.trending")}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -11,6 +11,8 @@
|
||||
import { getAssetUrl } from "$lib/api";
|
||||
import { calcReadingTime } from "$lib/utils.js";
|
||||
import Meta from "$lib/components/meta/meta.svelte";
|
||||
import SexyBackground from "$lib/components/background/background.svelte";
|
||||
import PageHero from "$lib/components/page-hero/page-hero.svelte";
|
||||
|
||||
const timeAgo = new TimeAgo("en");
|
||||
const { data } = $props();
|
||||
@@ -48,6 +50,21 @@
|
||||
}
|
||||
|
||||
const totalPages = $derived(Math.ceil(data.total / data.limit));
|
||||
|
||||
const pageNumbers = $derived(() => {
|
||||
const pages: (number | -1)[] = [];
|
||||
if (totalPages <= 7) {
|
||||
for (let i = 1; i <= totalPages; i++) pages.push(i);
|
||||
} else {
|
||||
pages.push(1);
|
||||
if (data.page > 3) pages.push(-1);
|
||||
for (let i = Math.max(2, data.page - 1); i <= Math.min(totalPages - 1, data.page + 1); i++)
|
||||
pages.push(i);
|
||||
if (data.page < totalPages - 2) pages.push(-1);
|
||||
pages.push(totalPages);
|
||||
}
|
||||
return pages;
|
||||
});
|
||||
</script>
|
||||
|
||||
<Meta title={$_("magazine.title")} description={$_("magazine.description")} />
|
||||
@@ -55,36 +72,9 @@
|
||||
<div
|
||||
class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
|
||||
>
|
||||
<!-- Global Plasma Background -->
|
||||
<div class="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
class="absolute top-40 left-1/4 w-80 h-80 bg-gradient-to-r from-primary/16 via-accent/20 to-primary/12 rounded-full blur-3xl animate-blob-slow"
|
||||
></div>
|
||||
<div
|
||||
class="absolute bottom-40 right-1/4 w-96 h-96 bg-gradient-to-r from-accent/16 via-primary/20 to-accent/12 rounded-full blur-3xl animate-blob-slow animation-delay-5000"
|
||||
></div>
|
||||
<div
|
||||
class="absolute top-1/3 right-1/3 w-64 h-64 bg-gradient-to-r from-primary/14 via-accent/18 to-primary/10 rounded-full blur-2xl animate-blob-reverse animation-delay-2500"
|
||||
></div>
|
||||
</div>
|
||||
<SexyBackground />
|
||||
|
||||
<section class="relative py-20 overflow-hidden">
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-primary/10 via-accent/5 to-background"
|
||||
></div>
|
||||
<div class="relative container mx-auto px-4 text-center">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<h1
|
||||
class="text-5xl md:text-7xl font-bold mb-8 bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
|
||||
>
|
||||
{$_("magazine.title")}
|
||||
</h1>
|
||||
<p
|
||||
class="text-xl md:text-2xl text-muted-foreground mb-10 leading-relaxed max-w-4xl mx-auto"
|
||||
>
|
||||
{$_("magazine.description")}
|
||||
</p>
|
||||
<!-- Filters -->
|
||||
<PageHero title={$_("magazine.title")} description={$_("magazine.description")}>
|
||||
<div class="flex flex-col md:flex-row gap-4 max-w-4xl mx-auto">
|
||||
<!-- Search -->
|
||||
<div class="relative flex-1">
|
||||
@@ -155,9 +145,7 @@
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</PageHero>
|
||||
|
||||
<div class="container mx-auto px-4 py-12">
|
||||
<!-- Featured Article -->
|
||||
@@ -187,9 +175,7 @@
|
||||
</span>
|
||||
</div>
|
||||
<h2 class="text-2xl md:text-3xl font-bold mb-4 hover:text-primary transition-colors">
|
||||
<button class="text-left">
|
||||
<a href="/article/{featuredArticle.slug}">{featuredArticle.title}</a>
|
||||
</button>
|
||||
<a href="/magazine/{featuredArticle.slug}">{featuredArticle.title}</a>
|
||||
</h2>
|
||||
<p class="text-muted-foreground mb-6 text-lg leading-relaxed">
|
||||
{featuredArticle.excerpt}
|
||||
@@ -229,14 +215,15 @@
|
||||
<!-- Articles Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{#each data.items as article (article.slug)}
|
||||
<a href="/magazine/{article.slug}" class="block group">
|
||||
<Card
|
||||
class="p-0 group hover:shadow-2xl hover:shadow-primary/25 transition-all duration-300 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
|
||||
class="p-0 h-full hover:shadow-2xl hover:shadow-primary/25 transition-all duration-300 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
|
||||
>
|
||||
<div class="relative">
|
||||
<img
|
||||
src={getAssetUrl(article.image, "preview")}
|
||||
alt={article.title}
|
||||
class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300 bg-muted"
|
||||
/>
|
||||
<div
|
||||
class="absolute group-hover:scale-105 transition-transform inset-0 bg-gradient-to-t from-black/40 to-transparent duration-300"
|
||||
@@ -257,14 +244,6 @@
|
||||
{$_("magazine.featured")}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Views -->
|
||||
<!-- <div
|
||||
class="absolute bottom-3 right-3 text-white text-sm flex items-center gap-1"
|
||||
>
|
||||
<TrendingUpIcon class="w-4 h-4" />
|
||||
{article.views}
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<CardContent class="p-6">
|
||||
@@ -272,7 +251,7 @@
|
||||
<h3
|
||||
class="font-semibold text-lg mb-2 group-hover:text-primary transition-colors line-clamp-2"
|
||||
>
|
||||
<a href="/magazine/{article.slug}">{article.title}</a>
|
||||
{article.title}
|
||||
</h3>
|
||||
<p class="text-muted-foreground text-sm line-clamp-3 leading-relaxed">
|
||||
{article.excerpt}
|
||||
@@ -282,12 +261,9 @@
|
||||
<!-- Tags -->
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
{#each (article.tags ?? []).slice(0, 3) as tag (tag)}
|
||||
<a
|
||||
class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full"
|
||||
href="/tags/{tag}"
|
||||
>
|
||||
<span class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full">
|
||||
#{tag}
|
||||
</a>
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@@ -297,7 +273,7 @@
|
||||
<img
|
||||
src={getAssetUrl(article.author?.avatar, "mini")}
|
||||
alt={article.author?.artist_name}
|
||||
class="w-8 h-8 rounded-full object-cover"
|
||||
class="w-8 h-8 rounded-full object-cover bg-muted"
|
||||
/>
|
||||
<div>
|
||||
<p class="text-sm font-medium">{article.author?.artist_name}</p>
|
||||
@@ -313,16 +289,9 @@
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Read More Button -->
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="w-full mt-4 border-primary/20 hover:bg-primary/10"
|
||||
href="/magazine/{article.slug}">{$_("magazine.read_article")}</Button
|
||||
>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@@ -339,32 +308,40 @@
|
||||
|
||||
<!-- Pagination -->
|
||||
{#if totalPages > 1}
|
||||
<div class="flex items-center justify-between mt-10">
|
||||
<span class="text-sm text-muted-foreground">
|
||||
{$_("common.page_of", { values: { page: data.page, total: totalPages } })}
|
||||
·
|
||||
{$_("common.total_results", { values: { total: data.total } })}
|
||||
</span>
|
||||
<div class="flex gap-2">
|
||||
<div class="flex flex-col items-center gap-3 mt-10">
|
||||
<div class="flex items-center gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={data.page <= 1}
|
||||
onclick={() => goToPage(data.page - 1)}
|
||||
class="border-primary/20 hover:bg-primary/10"
|
||||
>
|
||||
{$_("common.previous")}
|
||||
</Button>
|
||||
>{$_("common.previous")}</Button>
|
||||
{#each pageNumbers() as p}
|
||||
{#if p === -1}
|
||||
<span class="px-2 text-muted-foreground select-none">…</span>
|
||||
{:else}
|
||||
<Button
|
||||
variant={p === data.page ? "default" : "outline"}
|
||||
size="sm"
|
||||
onclick={() => goToPage(p)}
|
||||
class={p === data.page
|
||||
? "bg-gradient-to-r from-primary to-accent min-w-9"
|
||||
: "border-primary/20 hover:bg-primary/10 min-w-9"}
|
||||
>{p}</Button>
|
||||
{/if}
|
||||
{/each}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={data.page >= totalPages}
|
||||
onclick={() => goToPage(data.page + 1)}
|
||||
class="border-primary/20 hover:bg-primary/10"
|
||||
>
|
||||
{$_("common.next")}
|
||||
</Button>
|
||||
>{$_("common.next")}</Button>
|
||||
</div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{$_("common.total_results", { values: { total: data.total } })}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -44,6 +44,21 @@
|
||||
}
|
||||
|
||||
const totalPages = $derived(Math.ceil(data.total / data.limit));
|
||||
|
||||
const pageNumbers = $derived(() => {
|
||||
const pages: (number | -1)[] = [];
|
||||
if (totalPages <= 7) {
|
||||
for (let i = 1; i <= totalPages; i++) pages.push(i);
|
||||
} else {
|
||||
pages.push(1);
|
||||
if (data.page > 3) pages.push(-1);
|
||||
for (let i = Math.max(2, data.page - 1); i <= Math.min(totalPages - 1, data.page + 1); i++)
|
||||
pages.push(i);
|
||||
if (data.page < totalPages - 2) pages.push(-1);
|
||||
pages.push(totalPages);
|
||||
}
|
||||
return pages;
|
||||
});
|
||||
</script>
|
||||
|
||||
<Meta title={$_("models.title")} description={$_("models.description")} />
|
||||
@@ -97,7 +112,7 @@
|
||||
<img
|
||||
src={getAssetUrl(model.avatar, "preview")}
|
||||
alt={model.artist_name}
|
||||
class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300 bg-muted"
|
||||
/>
|
||||
|
||||
<!-- Online Status -->
|
||||
@@ -183,31 +198,40 @@
|
||||
|
||||
<!-- Pagination -->
|
||||
{#if totalPages > 1}
|
||||
<div class="flex items-center justify-between mt-10">
|
||||
<span class="text-sm text-muted-foreground">
|
||||
{$_("common.page_of", { values: { page: data.page, total: totalPages } })}
|
||||
·
|
||||
{$_("common.total_results", { values: { total: data.total } })}
|
||||
</span>
|
||||
<div class="flex gap-2">
|
||||
<div class="flex flex-col items-center gap-3 mt-10">
|
||||
<div class="flex items-center gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={data.page <= 1}
|
||||
onclick={() => goToPage(data.page - 1)}
|
||||
class="border-primary/20 hover:bg-primary/10"
|
||||
>
|
||||
{$_("common.previous")}
|
||||
</Button>
|
||||
>{$_("common.previous")}</Button>
|
||||
{#each pageNumbers() as p}
|
||||
{#if p === -1}
|
||||
<span class="px-2 text-muted-foreground select-none">…</span>
|
||||
{:else}
|
||||
<Button
|
||||
variant={p === data.page ? "default" : "outline"}
|
||||
size="sm"
|
||||
onclick={() => goToPage(p)}
|
||||
class={p === data.page
|
||||
? "bg-gradient-to-r from-primary to-accent min-w-9"
|
||||
: "border-primary/20 hover:bg-primary/10 min-w-9"}
|
||||
>{p}</Button>
|
||||
{/if}
|
||||
{/each}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={data.page >= totalPages}
|
||||
onclick={() => goToPage(data.page + 1)}
|
||||
class="border-primary/20 hover:bg-primary/10"
|
||||
>
|
||||
{$_("common.next")}
|
||||
</Button>
|
||||
>{$_("common.next")}</Button>
|
||||
</div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{$_("common.total_results", { values: { total: data.total } })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
import DeviceMappingDialog from "./components/device-mapping-dialog.svelte";
|
||||
import type { BluetoothDevice, RecordedEvent, DeviceInfo } from "$lib/types";
|
||||
import { toast } from "svelte-sonner";
|
||||
import SexyBackground from "$lib/components/background/background.svelte";
|
||||
|
||||
const client = new ButtplugClient("Sexy.Art");
|
||||
let connected = $state(client.connected);
|
||||
@@ -378,18 +379,7 @@
|
||||
<div
|
||||
class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
|
||||
>
|
||||
<!-- Global Plasma Background -->
|
||||
<div class="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
class="absolute top-40 left-1/4 w-80 h-80 bg-gradient-to-r from-primary/16 via-accent/20 to-primary/12 rounded-full blur-3xl animate-blob-slow"
|
||||
></div>
|
||||
<div
|
||||
class="absolute bottom-40 right-1/4 w-96 h-96 bg-gradient-to-r from-accent/16 via-primary/20 to-accent/12 rounded-full blur-3xl animate-blob-slow animation-delay-5000"
|
||||
></div>
|
||||
<div
|
||||
class="absolute top-1/3 right-1/3 w-64 h-64 bg-gradient-to-r from-primary/14 via-accent/18 to-primary/10 rounded-full blur-2xl animate-blob-reverse animation-delay-2500"
|
||||
></div>
|
||||
</div>
|
||||
<SexyBackground />
|
||||
|
||||
<div class="container mx-auto py-20 relative px-4">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
|
||||
@@ -47,6 +47,21 @@
|
||||
}
|
||||
|
||||
const totalPages = $derived(Math.ceil(data.total / data.limit));
|
||||
|
||||
const pageNumbers = $derived(() => {
|
||||
const pages: (number | -1)[] = [];
|
||||
if (totalPages <= 7) {
|
||||
for (let i = 1; i <= totalPages; i++) pages.push(i);
|
||||
} else {
|
||||
pages.push(1);
|
||||
if (data.page > 3) pages.push(-1);
|
||||
for (let i = Math.max(2, data.page - 1); i <= Math.min(totalPages - 1, data.page + 1); i++)
|
||||
pages.push(i);
|
||||
if (data.page < totalPages - 2) pages.push(-1);
|
||||
pages.push(totalPages);
|
||||
}
|
||||
return pages;
|
||||
});
|
||||
</script>
|
||||
|
||||
<Meta title={$_("videos.title")} description={$_("videos.description")} />
|
||||
@@ -134,7 +149,7 @@
|
||||
<img
|
||||
src={getAssetUrl(video.image, "preview")}
|
||||
alt={video.title}
|
||||
class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300 bg-muted"
|
||||
/>
|
||||
|
||||
<!-- Overlay Gradient -->
|
||||
@@ -241,32 +256,40 @@
|
||||
|
||||
<!-- Pagination -->
|
||||
{#if totalPages > 1}
|
||||
<div class="flex items-center justify-between mt-10">
|
||||
<span class="text-sm text-muted-foreground">
|
||||
{$_("common.page_of", { values: { page: data.page, total: totalPages } })}
|
||||
·
|
||||
{$_("common.total_results", { values: { total: data.total } })}
|
||||
</span>
|
||||
<div class="flex gap-2">
|
||||
<div class="flex flex-col items-center gap-3 mt-10">
|
||||
<div class="flex items-center gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={data.page <= 1}
|
||||
onclick={() => goToPage(data.page - 1)}
|
||||
class="border-primary/20 hover:bg-primary/10"
|
||||
>
|
||||
{$_("common.previous")}
|
||||
</Button>
|
||||
>{$_("common.previous")}</Button>
|
||||
{#each pageNumbers() as p}
|
||||
{#if p === -1}
|
||||
<span class="px-2 text-muted-foreground select-none">…</span>
|
||||
{:else}
|
||||
<Button
|
||||
variant={p === data.page ? "default" : "outline"}
|
||||
size="sm"
|
||||
onclick={() => goToPage(p)}
|
||||
class={p === data.page
|
||||
? "bg-gradient-to-r from-primary to-accent min-w-9"
|
||||
: "border-primary/20 hover:bg-primary/10 min-w-9"}
|
||||
>{p}</Button>
|
||||
{/if}
|
||||
{/each}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={data.page >= totalPages}
|
||||
onclick={() => goToPage(data.page + 1)}
|
||||
class="border-primary/20 hover:bg-primary/10"
|
||||
>
|
||||
{$_("common.next")}
|
||||
</Button>
|
||||
>{$_("common.next")}</Button>
|
||||
</div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{$_("common.total_results", { values: { total: data.total } })}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user