aljaz/hypergolic
1
0
Fork 0
mirror of https://github.com/aljazceru/hypergolic.git synced 2025-12-18 22:14:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

problem: Products and Purchases element layout is bad

Browse Source
This commit is contained in:
Bob
2024-07-17 00:49:27 +08:00
parent 2c6d86d821
commit 2d9f0de756
4 changed files with 51 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ProductCard.svelte
View File

@@ -46,13 +46,15 @@
</script>
{#if validate(product)}
<Card.Root class="m-2 w-[350px]">
<Card.Root class="m-2 w-[450px]">
<Card.Header>
<Card.Title>{product.getMatchingTags('name')[0][1]}</Card.Title>
<Card.Description>{product.getMatchingTags('description')[0][1]}</Card.Description>
</Card.Header>
<img src={product.getMatchingTags('cover')[0][1]} />
<Card.Content></Card.Content>
<img src={product.getMatchingTags('cover')[0][1]} alt="cover" />
<Card.Content>
<slot />
</Card.Content>
<Card.Footer class="flex justify-between">
{#if !includedInRocket()}
<AddProductToRocket {product} {rocket} />

4
src/components/ProductCardFromID.svelte
View File

@@ -17,5 +17,7 @@
</script>
{#if productEvent}
<ProductCard {rocket} product={productEvent} />
<ProductCard {rocket} product={productEvent}>
<slot />
</ProductCard>
{/if}

8
src/components/ProductFomo.svelte
View File

@@ -1,6 +1,5 @@
<script lang="ts">
import * as Card from '$lib/components/ui/card/index.js';
import * as Table from '$lib/components/ui/table/index.js';
import { RocketProduct } from '@/event_helpers/rockets';
import type { NDKEvent } from '@nostr-dev-kit/ndk';
import ProductCardFromId from './ProductCardFromID.svelte';
@@ -27,11 +26,10 @@
<Card.Title>Products and Purchases</Card.Title>
<Card.Description class="grid grid-cols-2">
{#each $products as product}
<div class=" grid-cols-1">
<ProductCardFromId {rocket} productID={product.ID} />
</div>
<div class="grid-cols-1">
<ProductPurchases {rocket} {product} />
<ProductCardFromId {rocket} productID={product.ID}>
<ProductPurchases {rocket} {product} />
</ProductCardFromId>
</div>
{/each}
</Card.Description>

88
src/components/ProductPurchases.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
import * as Card from '@/components/ui/card';
import * as Table from '@/components/ui/table';
import { ZapPurchase, type RocketProduct } from '@/event_helpers/rockets';
import { unixToRelativeTime } from '@/helpers';
@@ -47,51 +46,44 @@
//todo: update rocket event with confirmed zaps if we have votepower
</script>
<Card.Root>
<Card.Header class="px-7">
<Card.Title>Purchases</Card.Title>
<Card.Description
>Purchase history for {productEvent?.getMatchingTags('name')[0][1]}</Card.Description
>
</Card.Header>
<Card.Content>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head>Buyer</Table.Head>
<Table.Head class="hidden md:table-cell">Sats Paid</Table.Head>
<Table.Head class="text-right"></Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{#each $purchases as [id, purchase], _ (id)}
<Table.Row
on:click={() => {
console.log(purchase.ZapReceipt.rawEvent());
}}
class="bg-accent"
{#if $purchases.size > 0}
<div class="pt-2 text-lg font-semibold">Purchases</div>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head>Buyer</Table.Head>
<Table.Head class="hidden md:table-cell">Sats Paid</Table.Head>
<Table.Head class="text-right"></Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{#each $purchases as [id, purchase], _ (id)}
<Table.Row
on:click={() => {
console.log(purchase.ZapReceipt.rawEvent());
}}
class="bg-accent"
>
<Table.Cell>
<div class="flex flex-nowrap">
<Avatar
ndk={$ndk}
pubkey={purchase.BuyerPubkey}
class="h-10 w-10 flex-none rounded-full object-cover"
/>
<Name
ndk={$ndk}
pubkey={purchase.BuyerPubkey}
class="inline-block max-w-32 truncate p-2"
/>
</div>
</Table.Cell>
<Table.Cell class="hidden md:table-cell">{purchase.Amount / 1000}</Table.Cell>
<Table.Cell class="text-right"
>{unixToRelativeTime(purchase.ZapReceipt.created_at * 1000)}</Table.Cell
>
<Table.Cell>
<div class="flex flex-nowrap">
<Avatar
ndk={$ndk}
pubkey={purchase.BuyerPubkey}
class="h-10 w-10 flex-none rounded-full object-cover"
/>
<Name
ndk={$ndk}
pubkey={purchase.BuyerPubkey}
class="inline-block max-w-32 truncate p-2"
/>
</div>
</Table.Cell>
<Table.Cell class="hidden md:table-cell">{purchase.Amount / 1000}</Table.Cell>
<Table.Cell class="text-right"
>{unixToRelativeTime(purchase.ZapReceipt.created_at * 1000)}</Table.Cell
>
</Table.Row>
{/each}
</Table.Body>
</Table.Root>
</Card.Content>
</Card.Root>
</Table.Row>
{/each}
</Table.Body>
</Table.Root>
{/if}