yusur/coinstorge
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: mobile support + more skeletons

Browse source
This commit is contained in:
Face 2025-05-27 16:19:57 +03:00
parent ab6b6901db
commit 87d3b41e05
14 changed files with 589 additions and 367 deletions
Download patch file Download diff file Expand all files Collapse all files

2
website/src/lib/components/self/AppSidebar.svelte
View file

@ -364,7 +364,7 @@
<Settings />
Settings
</DropdownMenu.Item>
<DropdownMenu.Item onclick={() => (showPromoCode = true)}>
<DropdownMenu.Item onclick={() => { showPromoCode = true; setOpenMobile(false); }}>
<Gift />
Promo code
</DropdownMenu.Item>

10
website/src/lib/components/self/CommentSection.svelte
View file

@ -226,7 +226,7 @@
<div class="flex items-center gap-2">
<HoverCard.Root>
<HoverCard.Trigger
class="cursor-pointer font-medium underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8"
class="cursor-pointer font-medium underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 truncate max-w-[120px] sm:max-w-none text-sm sm:text-base"
onclick={() => goto(`/user/${comment.userUsername}`)}
>
{comment.userName}
@ -237,13 +237,13 @@
</HoverCard.Root>
<button
onclick={() => goto(`/user/${comment.userUsername}`)}
class="cursor-pointer"
class="cursor-pointer flex-shrink-0 max-w-[80px] sm:max-w-none"
>
<Badge variant="outline" class="text-xs">
@{comment.userUsername}
<Badge variant="outline" class="text-xs w-full justify-start">
<span class="truncate">@{comment.userUsername}</span>
</Badge>
</button>
<span class="text-muted-foreground text-xs">
<span class="text-muted-foreground whitespace-nowrap text-xs flex-shrink-0">
{formatTimeAgo(comment.createdAt)}
</span>
</div>

12
website/src/lib/components/self/DataTable.svelte
View file

@ -51,7 +51,7 @@
<Table.Header>
<Table.Row>
{#each columns as column}
<Table.Head class={column.class}>{column.label}</Table.Head>
<Table.Head class={column.class || 'min-w-[80px]'}>{column.label}</Table.Head>
{/each}
</Table.Row>
</Table.Header>
@ -114,20 +114,20 @@
<span class="font-mono text-sm">#{rendered.number}</span>
</div>
{:else if rendered.component === 'coin'}
<div class="flex items-center gap-3">
<div class="flex min-w-0 items-center gap-2">
<CoinIcon
icon={rendered.icon}
symbol={rendered.symbol}
name={rendered.name}
size={rendered.size || 8}
size={rendered.size || 6}
/>
<div>
<div class="font-medium">{rendered.name}</div>
<div class="truncate">
<div class="truncate font-medium">{rendered.name}</div>
<div class="text-muted-foreground text-sm">*{rendered.symbol}</div>
</div>
</div>
{:else if rendered.component === 'link'}
<a href={rendered.href} class="flex items-center gap-2 hover:underline">
<a href={rendered.href} class="flex items-center gap-1 hover:underline">
<CoinIcon
icon={rendered.content.icon}
symbol={rendered.content.symbol}

33
website/src/lib/components/self/skeletons/CoinSkeleton.svelte
View file

@ -4,28 +4,29 @@
</script>
<header class="mb-8">
<div class="mb-6 flex items-start justify-between">
<div class="flex items-center gap-4">
<Skeleton class="h-16 w-16 rounded-lg" />
<div>
<Skeleton class="mb-2 h-10 w-48" />
<div class="mt-1 flex items-center gap-2">
<Skeleton class="h-6 w-16" />
<Skeleton class="h-6 w-20" />
<div class="mb-4 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div class="flex items-center gap-3 sm:gap-4">
<Skeleton class="h-12 w-12 rounded-lg sm:h-16 sm:w-16" />
<div class="min-w-0 flex-1">
<Skeleton class="mb-2 h-6 w-40 sm:h-10 sm:w-48" />
<div class="mt-1 flex flex-wrap items-center gap-2">
<Skeleton class="h-5 w-12 sm:h-6 sm:w-16" />
<Skeleton class="h-5 w-16 sm:h-6 sm:w-20" />
<Skeleton class="h-5 w-14" />
</div>
</div>
</div>
<div class="text-right">
<Skeleton class="mb-2 h-8 w-32" />
<div class="mt-2 flex items-center gap-2">
<div class="flex flex-col items-start gap-2 sm:items-end sm:text-right">
<Skeleton class="h-6 w-28 sm:h-8 sm:w-32" />
<div class="flex items-center gap-2">
<Skeleton class="h-4 w-4" />
<Skeleton class="h-6 w-16" />
<Skeleton class="h-5 w-12 sm:h-6 sm:w-16" />
</div>
</div>
</div>
<!-- Creator Info Skeleton -->
<div class="text-muted-foreground flex items-center gap-2 text-sm">
<div class="text-muted-foreground flex flex-wrap items-center gap-2 text-sm">
<Skeleton class="h-4 w-20" />
<Skeleton class="h-4 w-4 rounded-full" />
<Skeleton class="h-4 w-40" />
@ -44,10 +45,8 @@
<Skeleton class="h-5 w-5" />
<Skeleton class="h-6 w-32" />
</Card.Title>
<div class="flex gap-1">
{#each Array(6) as _}
<Skeleton class="h-8 w-12" />
{/each}
<div class="w-24">
<Skeleton class="h-10 w-full" />
</div>
</div>
</Card.Header>

10
website/src/lib/components/self/skeletons/HomeSkeleton.svelte
View file

@ -3,13 +3,7 @@
import { Skeleton } from '$lib/components/ui/skeleton';
</script>
<div class="container mx-auto p-6">
<!-- Header Skeleton -->
<header class="mb-8">
<Skeleton class="mb-2 h-9 w-64" />
<Skeleton class="h-5 w-96" />
</header>
<div class="container mx-auto">
<!-- Top Coins Grid Skeleton -->
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
{#each Array(6) as _}
@ -18,7 +12,7 @@
<Card.Title class="flex items-center justify-between">
<div class="flex items-center gap-2">
<Skeleton class="h-6 w-6 rounded-full" />
<Skeleton class="h-6 w-32" />
<Skeleton class="h-6 max-w-2xl" />
</div>
<Skeleton class="h-6 w-16" />
</Card.Title>

32
website/src/lib/components/self/skeletons/LeaderboardSkeleton.svelte
View file

@ -3,30 +3,30 @@
import { Skeleton } from '$lib/components/ui/skeleton';
</script>
<div class="grid gap-6 lg:grid-cols-2">
<div class="grid gap-4 md:gap-6 xl:grid-cols-2">
{#each Array(4) as _}
<Card.Root>
<Card.Header>
<Card.Root class="overflow-hidden">
<Card.Header class="pb-3 md:pb-4">
<Card.Title class="flex items-center gap-2">
<Skeleton class="h-6 w-6" />
<Skeleton class="h-6 w-40" />
<Skeleton class="h-5 w-5 md:h-6 md:w-6" />
<Skeleton class="h-5 w-32 md:h-6 md:w-40" />
</Card.Title>
<Card.Description>
<Skeleton class="h-4 w-64" />
<Skeleton class="h-3 w-48 md:h-4 md:w-64" />
</Card.Description>
</Card.Header>
<Card.Content>
<div class="space-y-4">
<Card.Content class="p-3 pt-0 md:p-6 md:pt-0">
<div class="space-y-3 md:space-y-4">
{#each Array(5) as _}
<div class="flex items-center gap-4 border-b pb-4 last:border-b-0">
<Skeleton class="h-6 w-8" />
<Skeleton class="h-8 w-8 rounded-full" />
<div class="flex-1">
<Skeleton class="h-4 w-24" />
<Skeleton class="mt-1 h-3 w-16" />
<div class="flex items-center gap-2 border-b pb-3 last:border-b-0 md:gap-4 md:pb-4">
<Skeleton class="h-5 w-6 md:h-6 md:w-8" />
<Skeleton class="h-6 w-6 rounded-full md:h-8 md:w-8" />
<div class="flex-1 min-w-0">
<Skeleton class="h-3 w-16 md:h-4 md:w-24" />
<Skeleton class="mt-1 h-2 w-12 md:h-3 md:w-16" />
</div>
<Skeleton class="h-4 w-20" />
<Skeleton class="h-5 w-16" />
<Skeleton class="h-3 w-12 md:h-4 md:w-20" />
<Skeleton class="h-4 w-12 md:h-5 md:w-16" />
</div>
{/each}
</div>

47
website/src/lib/components/self/skeletons/LiveTradeSkeleton.svelte Normal file
View file

@ -0,0 +1,47 @@
<script lang="ts">
import { Skeleton } from '$lib/components/ui/skeleton';
</script>
<Skeleton class="h-6 w-20 rounded-full sm:ml-auto" />
<!-- Trade items skeleton -->
{#each Array(8) as _}
<div
class="flex flex-col gap-3 rounded-lg border p-3 sm:flex-row sm:items-center sm:justify-between sm:p-4"
>
<div class="flex items-center gap-3 sm:gap-4">
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-1 sm:gap-2">
<!-- Coin icon and symbol -->
<div class="flex items-center gap-1.5">
<Skeleton class="h-5 w-5 rounded-full sm:h-6 sm:w-6" />
<Skeleton class="h-4 w-20 sm:h-5 sm:w-24" />
</div>
<!-- "bought by" / "sold by" text -->
<Skeleton class="h-3 w-12 sm:h-4 sm:w-16" />
<!-- User avatar and username -->
<div class="flex items-center gap-1">
<Skeleton class="h-4 w-4 rounded-full sm:h-5 sm:w-5" />
<Skeleton class="h-3 w-16 sm:h-4 sm:w-20" />
</div>
</div>
</div>
</div>
<div class="flex items-center justify-between gap-2">
<!-- Trade type and value -->
<div class="flex items-center gap-2">
<Skeleton class="h-3.5 w-3.5 sm:h-4 sm:w-4" />
<Skeleton class="h-4 w-8 sm:h-4 sm:w-10" />
<Skeleton class="h-4 w-1" />
<Skeleton class="h-4 w-12 sm:h-4 sm:w-16" />
</div>
<!-- Timestamp -->
<div class="flex items-center gap-1">
<Skeleton class="h-3 w-3 sm:h-4 sm:w-4" />
<Skeleton class="h-3 w-12 sm:h-4 sm:w-16" />
</div>
</div>
</div>
{/each}

167
website/src/lib/components/self/skeletons/PortfolioSkeleton.svelte Normal file
View file

@ -0,0 +1,167 @@
<script lang="ts">
import * as Card from '$lib/components/ui/card';
import * as Table from '$lib/components/ui/table';
import { Skeleton } from '$lib/components/ui/skeleton';
</script>
<div class="container mx-auto max-w-7xl">
<!-- Portfolio Summary Cards -->
<div class="mb-6 grid grid-cols-1 gap-4 md:mb-8 lg:grid-cols-3">
{#each Array(3) as _}
<Card.Root class="gap-1 overflow-hidden">
<Card.Header>
<Card.Title class="flex items-center gap-2">
<Skeleton class="h-4 w-4" />
<Skeleton class="h-4 w-16" />
</Card.Title>
</Card.Header>
<Card.Content>
<Skeleton class="h-8 w-24 md:h-9 md:w-32" />
<Skeleton class="mt-2 h-3 w-20 md:w-24" />
</Card.Content>
</Card.Root>
{/each}
</div>
<!-- Holdings Table -->
<Card.Root class="overflow-hidden">
<Card.Header class="pb-3 md:pb-4">
<Card.Title>
<Skeleton class="h-5 w-32 md:h-6 md:w-40" />
</Card.Title>
<Card.Description>
<Skeleton class="h-3 w-48 md:h-4 md:w-64" />
</Card.Description>
</Card.Header>
<Card.Content class="p-3 pt-0 md:p-6 md:pt-0">
<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head class="w-[30%] min-w-[120px] md:w-[12%]">
<Skeleton class="h-4 w-16" />
</Table.Head>
<Table.Head class="w-[20%] min-w-[80px] md:w-[12%]">
<Skeleton class="h-4 w-16" />
</Table.Head>
<Table.Head class="w-[15%] min-w-[70px] md:w-[12%]">
<Skeleton class="h-4 w-16" />
</Table.Head>
<Table.Head class="w-[20%] min-w-[80px] md:w-[12%]">
<Skeleton class="h-4 w-16" />
</Table.Head>
<Table.Head class="w-[15%] min-w-[70px] md:w-[12%]">
<Skeleton class="h-4 w-16" />
</Table.Head>
<Table.Head class="hidden md:table-cell md:w-[12%]">
<Skeleton class="h-4 w-16" />
</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{#each Array(4) as _}
<Table.Row>
<Table.Cell>
<div class="flex items-center gap-2">
<Skeleton class="h-6 w-6 rounded-full" />
<div>
<Skeleton class="h-4 w-16" />
<Skeleton class="mt-1 h-3 w-12" />
</div>
</div>
</Table.Cell>
<Table.Cell>
<Skeleton class="h-4 w-16" />
</Table.Cell>
<Table.Cell>
<Skeleton class="h-4 w-12" />
</Table.Cell>
<Table.Cell>
<Skeleton class="h-5 w-14 rounded-md" />
</Table.Cell>
<Table.Cell>
<Skeleton class="h-4 w-16" />
</Table.Cell>
<Table.Cell class="hidden md:table-cell">
<Skeleton class="h-5 w-12 rounded-md" />
</Table.Cell>
</Table.Row>
{/each}
</Table.Body>
</Table.Root>
</Card.Content>
</Card.Root>
<!-- Recent Transactions -->
<Card.Root class="mt-6 overflow-hidden md:mt-8">
<Card.Header class="pb-3 md:pb-4">
<div class="flex items-center justify-between">
<div>
<Card.Title class="flex items-center gap-2">
<Skeleton class="h-5 w-5" />
<Skeleton class="h-5 w-32 md:h-6 md:w-40" />
</Card.Title>
<Card.Description class="mt-1">
<Skeleton class="h-3 w-40 md:h-4 md:w-48" />
</Card.Description>
</div>
<Skeleton class="h-8 w-16 rounded-md md:w-20" />
</div>
</Card.Header>
<Card.Content class="p-3 pt-0 md:p-6 md:pt-0">
<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head class="w-[15%] min-w-[60px] md:w-[10%]">
<Skeleton class="h-4 w-12" />
</Table.Head>
<Table.Head class="w-[30%] min-w-[100px] md:w-[20%]">
<Skeleton class="h-4 w-12" />
</Table.Head>
<Table.Head class="w-[20%] min-w-[80px] md:w-[15%]">
<Skeleton class="h-4 w-16" />
</Table.Head>
<Table.Head class="w-[15%] min-w-[70px] md:w-[15%]">
<Skeleton class="h-4 w-12" />
</Table.Head>
<Table.Head class="w-[20%] min-w-[70px] md:w-[15%]">
<Skeleton class="h-4 w-12" />
</Table.Head>
<Table.Head class="hidden md:table-cell md:w-[25%]">
<Skeleton class="h-4 w-12" />
</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{#each Array(5) as _}
<Table.Row>
<Table.Cell>
<Skeleton class="h-5 w-10 rounded-md" />
</Table.Cell>
<Table.Cell>
<div class="flex items-center gap-2">
<Skeleton class="h-4 w-4 rounded-full" />
<div>
<Skeleton class="h-4 w-12" />
<Skeleton class="mt-1 h-3 w-10" />
</div>
</div>
</Table.Cell>
<Table.Cell>
<Skeleton class="h-4 w-16 font-mono" />
</Table.Cell>
<Table.Cell>
<Skeleton class="h-4 w-16" />
</Table.Cell>
<Table.Cell>
<Skeleton class="h-4 w-16" />
</Table.Cell>
<Table.Cell class="hidden md:table-cell">
<Skeleton class="h-4 w-24" />
</Table.Cell>
</Table.Row>
{/each}
</Table.Body>
</Table.Root>
</Card.Content>
</Card.Root>
</div>

84
website/src/lib/components/self/skeletons/ProfileSkeleton.svelte
View file

@ -9,25 +9,25 @@
<div class="flex flex-col gap-4 sm:flex-row sm:items-start">
<!-- Avatar Skeleton -->
<div class="flex-shrink-0">
<Skeleton class="size-20 rounded-full sm:size-24" />
<Skeleton class="size-16 rounded-full sm:size-20 md:size-24" />
</div>
<!-- Profile Info Skeleton -->
<div class="min-w-0 flex-1">
<div class="mb-3">
<div class="mb-1 flex flex-wrap items-center gap-2">
<Skeleton class="h-8 w-48 sm:h-9" />
<Skeleton class="h-6 w-16" />
<Skeleton class="h-6 w-32 sm:h-8 sm:w-48" />
<Skeleton class="h-5 w-12 sm:h-6 sm:w-16" />
</div>
<Skeleton class="h-6 w-32" />
<Skeleton class="h-5 w-24 sm:h-6 sm:w-32" />
</div>
<Skeleton class="mb-3 h-4 w-full max-w-2xl" />
<Skeleton class="mb-6 h-4 w-96" />
<Skeleton class="mb-6 h-4 max-w-2xl" />
<div class="flex items-center gap-2">
<Skeleton class="h-4 w-4" />
<Skeleton class="h-4 w-24" />
<Skeleton class="h-4 w-20 sm:w-24" />
</div>
</div>
</div>
@ -40,32 +40,32 @@
<Card.Root class="py-0">
<Card.Content class="p-4">
<div class="flex items-center justify-between">
<Skeleton class="h-4 w-24" />
<Skeleton class="h-4 w-20 sm:w-24" />
<Skeleton class="h-4 w-4" />
</div>
<Skeleton class="mt-1 h-8 w-32" />
<Skeleton class="mt-1 h-3 w-20" />
<Skeleton class="mt-1 h-6 w-24 sm:h-8 sm:w-32" />
<Skeleton class="mt-1 h-3 w-16 sm:w-20" />
</Card.Content>
</Card.Root>
{/each}
</div>
<!-- Buy & Sell Activity Skeleton -->
<div class="mb-6 grid grid-cols-1 gap-4 lg:grid-cols-4">
<div class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
{#each Array(4) as _}
<Card.Root class="py-0">
<Card.Content class="p-4">
<div class="flex items-center justify-between">
<Skeleton class="h-4 w-24" />
<Skeleton class="h-4 w-20 sm:w-24" />
<Skeleton class="h-4 w-4" />
</div>
<div class="mt-1">
<Skeleton class="h-8 w-28" />
<Skeleton class="mt-1 h-3 w-24" />
<Skeleton class="h-6 w-20 sm:h-8 sm:w-28" />
<Skeleton class="mt-1 h-3 w-20 sm:w-24" />
</div>
<div class="border-muted mt-3 border-t pt-3">
<Skeleton class="h-6 w-24" />
<Skeleton class="mt-1 h-3 w-20" />
<Skeleton class="h-5 w-16 sm:h-6 sm:w-24" />
<Skeleton class="mt-1 h-3 w-16 sm:w-20" />
</div>
</Card.Content>
</Card.Root>
@ -77,22 +77,26 @@
<Card.Header class="pb-3">
<Card.Title class="flex items-center gap-2">
<Skeleton class="h-5 w-5" />
<Skeleton class="h-6 w-32" />
<Skeleton class="h-5 w-24 sm:h-6 sm:w-32" />
</Card.Title>
<Skeleton class="h-4 w-48" />
<Skeleton class="h-4 w-32 sm:w-48" />
</Card.Header>
<Card.Content class="p-0">
<div class="p-6">
<div class="p-4 sm:p-6">
{#each Array(3) as _}
<div class="flex items-center gap-4 border-b py-4 last:border-b-0">
<Skeleton class="h-8 w-8 rounded-full" />
<div class="flex-1">
<Skeleton class="h-4 w-24" />
<Skeleton class="mt-1 h-3 w-16" />
<div class="flex items-center gap-3 border-b py-3 last:border-b-0 sm:gap-4 sm:py-4">
<Skeleton class="h-6 w-6 rounded-full sm:h-8 sm:w-8" />
<div class="min-w-0 flex-1">
<Skeleton class="h-4 w-16 sm:w-24" />
<Skeleton class="mt-1 h-3 w-12 sm:w-16" />
</div>
<Skeleton class="h-4 w-16" />
<Skeleton class="h-4 w-20" />
<Skeleton class="h-4 w-16" />
<div class="hidden sm:block">
<Skeleton class="h-4 w-16" />
</div>
<div class="hidden md:block">
<Skeleton class="h-4 w-20" />
</div>
<Skeleton class="h-4 w-12 sm:w-16" />
</div>
{/each}
</div>
@ -104,23 +108,27 @@
<Card.Header class="pb-3">
<Card.Title class="flex items-center gap-2">
<Skeleton class="h-5 w-5" />
<Skeleton class="h-6 w-40" />
<Skeleton class="h-5 w-32 sm:h-6 sm:w-40" />
</Card.Title>
<Skeleton class="h-4 w-52" />
<Skeleton class="h-4 w-36 sm:w-52" />
</Card.Header>
<Card.Content class="p-0">
<div class="p-6">
<div class="p-4 sm:p-6">
{#each Array(5) as _}
<div class="flex items-center gap-4 border-b py-4 last:border-b-0">
<Skeleton class="h-6 w-12" />
<Skeleton class="h-8 w-8 rounded-full" />
<div class="flex-1">
<Skeleton class="h-4 w-20" />
<Skeleton class="mt-1 h-3 w-16" />
<div class="flex items-center gap-3 border-b py-3 last:border-b-0 sm:gap-4 sm:py-4">
<Skeleton class="h-5 w-10 sm:h-6 sm:w-12" />
<Skeleton class="h-6 w-6 rounded-full sm:h-8 sm:w-8" />
<div class="min-w-0 flex-1">
<Skeleton class="h-4 w-16 sm:w-20" />
<Skeleton class="mt-1 h-3 w-12 sm:w-16" />
</div>
<Skeleton class="h-4 w-16" />
<Skeleton class="h-4 w-16" />
<Skeleton class="h-4 w-20" />
<div class="hidden sm:block">
<Skeleton class="h-4 w-16" />
</div>
<div class="hidden md:block">
<Skeleton class="h-4 w-16" />
</div>
<Skeleton class="h-4 w-16 sm:w-20" />
</div>
{/each}
</div>