enhancement: NftGalleryItem

bloomwalletio · Apr 29, 2024 · 09121d8 · 09121d8
1 parent 69c5de6
commit 09121d8
Showing 1 changed file with 48 additions and 61 deletions.
diff --git a/packages/shared/src/components/molecules/NftGalleryItem.svelte b/packages/shared/src/components/molecules/NftGalleryItem.svelte
@@ -10,7 +10,6 @@
 
     export let nft: Nft
 
-    let nftWrapperClientWidth: number
     let anchor: HTMLElement
 
     $: placeHolderColor = nft.downloadMetadata?.error
@@ -38,73 +37,61 @@
     }
 </script>
 
-<button type="button" on:click={onNftClick} class="nft-gallery-item w-full">
-    <container>
-        <div
-            class="w-full flex relative bg-surface-2 dark:bg-surface-2-dark"
-            bind:clientWidth={nftWrapperClientWidth}
-            style="height: {nftWrapperClientWidth}px; "
-        >
-            <NftMedia {nft} classes="min-w-full min-h-full object-cover" loop muted>
-                <MediaPlaceholder
-                    type={nft?.type}
-                    textColor={placeHolderColor}
-                    downloading={$downloadingNftId === nft?.id}
-                    size="md"
-                    slot="placeholder"
-                />
-            </NftMedia>
-            <error-container bind:this={anchor}>
-                {#if nft.isScam}
-                    <Pill color="warning">{localize('general.warning')}</Pill>
-                {:else if nft.downloadMetadata?.error || nft.downloadMetadata?.warning}
-                    <Pill color={nft.downloadMetadata?.error ? 'danger' : 'warning'}>
-                        {localize('general.' + (nft.downloadMetadata?.error ? 'error' : 'warning'))}
-                    </Pill>
-                {/if}
-            </error-container>
-            <Tooltip
-                {anchor}
-                placement="bottom"
-                event="hover"
-                text={nft.isScam ? localize('error.nft.scamNft.short') : getAlertText(nft.downloadMetadata)}
+<button type="button" on:click={onNftClick}>
+    <div class="flex-1 flex relative bg-surface-2 dark:bg-surface-2-dark">
+        <NftMedia {nft} classes="min-w-full min-h-full object-cover" loop muted>
+            <MediaPlaceholder
+                type={nft?.type}
+                textColor={placeHolderColor}
+                downloading={$downloadingNftId === nft?.id}
+                size="md"
+                slot="placeholder"
             />
-        </div>
-        <div class="flex flex-col gap-2 p-3">
-            <nft-name class="w-full flex flex-row items-center justify-between gap-2">
-                <Text type="body2" truncate>{nft.name}</Text>
-            </nft-name>
-            <nft-pills class="flex flex-row items-center gap-2">
-                <NetworkAvatar networkId={nft.networkId} size="sm" showTooltip />
-                <AssetPillsForNft {nft} />
-                <AsyncPillsForNft {nft} />
-            </nft-pills>
-        </div>
-    </container>
+        </NftMedia>
+        <error-container bind:this={anchor} class="absolute left-3 top-3">
+            {#if nft.isScam}
+                <Pill color="warning">{localize('general.warning')}</Pill>
+            {:else if nft.downloadMetadata?.error || nft.downloadMetadata?.warning}
+                <Pill color={nft.downloadMetadata?.error ? 'danger' : 'warning'}>
+                    {localize('general.' + (nft.downloadMetadata?.error ? 'error' : 'warning'))}
+                </Pill>
+            {/if}
+        </error-container>
+        <Tooltip
+            {anchor}
+            placement="bottom"
+            event="hover"
+            text={nft.isScam ? localize('error.nft.scamNft.short') : getAlertText(nft.downloadMetadata)}
+        />
+    </div>
+    <div class="flex flex-col gap-2 p-3">
+        <nft-name class="w-full flex flex-row items-center justify-between gap-2">
+            <Text type="body2" truncate>{nft.name}</Text>
+        </nft-name>
+        <nft-pills class="flex flex-row items-center gap-2">
+            <NetworkAvatar networkId={nft.networkId} size="sm" showTooltip />
+            <AssetPillsForNft {nft} />
+            <AsyncPillsForNft {nft} />
+        </nft-pills>
+    </div>
 </button>
 
 <style lang="postcss">
-    .nft-gallery-item {
-        container {
-            @apply w-full overflow-hidden flex flex-col divide-y divide-solid divide-stroke dark:divide-stroke-dark;
-            @apply border border-solid border-stroke dark:border-stroke-dark;
-            @apply bg-surface-1 dark:bg-surface-1-dark;
-            @apply rounded-2xl;
-            @apply duration-300;
-            transition-property: background-color, border-color, box-shadow;
-        }
+    button {
+        @apply w-full overflow-hidden flex flex-col;
+        @apply divide-y divide-solid divide-stroke dark:divide-stroke-dark;
+        @apply border-2 border-solid border-stroke dark:border-stroke-dark;
+        @apply bg-surface-1 dark:bg-surface-1-dark;
+        @apply rounded-2xl;
+        @apply duration-300;
+        transition-property: background-color, border-color, box-shadow;
+        aspect-ratio: 3 / 4;
 
         &:hover,
         &:focus {
-            container {
-                @apply shadow-lg dark:shadow-violet-900/25;
-                @apply border-2 border-brand-500;
-                @apply bg-surface dark:bg-surface-dark;
-            }
+            @apply shadow-lg dark:shadow-violet-900/25;
+            @apply border-2 border-brand-500;
+            @apply bg-surface dark:bg-surface-dark;
         }
     }
-
-    error-container {
-        @apply absolute left-3 top-3;
-    }
 </style>