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: product and purchase layout is misaligned for desktop view

Browse Source 
Time spent: 1 hour
This commit is contained in:
Bob
2024-07-17 15:03:20 +08:00
parent 58420ff2d5
commit b430426861
5 changed files with 47 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/ProductCard.svelte
View File

@@ -46,16 +46,31 @@
</script>
{#if validate(product)}
<Card.Root class="m-2 w-[450px]">
<Card.Root>
<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]} alt="cover" />
<Card.Content>
<slot />
</Card.Content>
<Card.Footer class="flex justify-between">
{#if $$slots.default}
<Card.Content>
<div class="flex flex-col items-center justify-center gap-2 sm:flex-row">
<img
src={product.getMatchingTags('cover')[0][1]}
alt="cover"
class="aspect-square w-[200px] object-cover"
/>
<slot />
</div>
</Card.Content>
{:else}
<img
src={product.getMatchingTags('cover')[0][1]}
alt="cover"
class="aspect-square object-cover"
/>
{/if}
<Card.Footer class="flex justify-between pt-2">
{#if !includedInRocket()}
<AddProductToRocket {product} {rocket} />
{:else}