feat: Top collections - landing page v3 #9336
Conversation
✅ Deploy Preview for koda-canary ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
…into issue-9309
hassnian
requested review from
preschian and
roiLeo
and removed request for
a team
|
no fancy layout talked with @exezbcz on telegram |
|
also can we change the default time range to 30 days ? I think makes more sense otherwise the floor price diff is 0
|
|
@hassnian sure |
There was a problem hiding this comment.
would be good if we can delete this file
| @@ -0,0 +1,37 @@ | |||
| .top-collection-card, | |||
There was a problem hiding this comment.
Create a shared component instead of shared scss files?
There was a problem hiding this comment.
prefer something like this, then we can inline tailwind classes
<template>
<div
class="top-collection-card w-full border border-card-border-color hover:border-border-color bg-background-color group">
<nuxt-link
class="flex flex-col hover:text-text-color"
rel="nofollow noopener noreferrer"
:to="`${collection?.id && `/${urlPrefix}/collection/${collection.id}`}`">
<div
class="top-collection-card-banner group-hover:opacity-[0.85] bg-center bg-cover"
:style="{ backgroundImage: `url(${collection?.image})` }"
:class="`${!collection && 'bg-k-shade animate-pulse'}`">
<div class="top-collection-card-banner-avatar-container">
<BasicImage
custom-class="top-collection-card-banner-avatar-inner [&>img]:border [&>img]:border-card-border-color !p-0"
:src="collection?.image || placeholder" />
</div>
</div>
<div class="top-collection-card-info border-t border-card-border-color">
<p
class="collection-name font-bold text-base whitespace-nowrap text-center truncate">
<span v-if="collection?.name">{{ collection.name }}</span>
<span v-else class="inline-block">
<NeoSkeleton no-margin :rounded="false" width="160" height="24" />
</span>
</p>
<div class="info-fields">
<div>
<p class="capitalize text-k-grey text-xs">
<span v-if="collection?.floorPrice || collection?.floor">
{{ $t('price') }}
</span>
<NeoSkeleton
v-else
no-margin
:rounded="false"
width="40"
height="12" />
</p>
<div
v-if="collection?.floorPrice || collection?.floor"
class="flex gap-2 items-center max-md:flex-row-reverse">
<CommonTokenMoney
:value="collection.floorPrice || collection.floor"
inline
:round="2" />
<div v-if="formattedDiffPercent" :class="color" class="text-xs">
{{ formattedDiffPercent }}
</div>
</div>
<NeoSkeleton
v-else
no-margin
:rounded="false"
width="80"
height="20"
class="mt-1" />
</div>
<div>
<p class="capitalize text-k-grey text-end text-xs">
<span v-if="collection">{{ $t('volume') }}</span>
<NeoSkeleton
v-else
no-margin
:rounded="false"
width="40"
height="12" />
</p>
<div class="flex gap-2 items-center">
<CommonTokenMoney
v-if="collection"
:value="volume"
inline
:round="1" />
<NeoSkeleton
v-else
no-margin
:rounded="false"
width="80"
height="20" />
</div>
</div>
</div>
</div>
</nuxt-link>
</div>
</template>There was a problem hiding this comment.
that one is TopCollectionsCard component
There was a problem hiding this comment.
oh yeah much cleaner, let me fix it
it does not, ty |
indeed, for me it changed explore-items: explore-items.mp4edit: other than the mentioned above(also affects profile), works for me, not sure of how problematic it is, wdyt @exezbcz ? |
|
deploy:
canary:
if we will get more precise columns and cards that don't drop below the minimum width, I am for it! |
|
green check for me! good job |
|
|
Code Climate has analyzed commit 6ddc7ca and detected 0 issues on this pull request. View more on Code Climate. |
roiLeo
added
the
S-code-lgtm-✅
related? #9336 (comment)
sure , let's do that |
prury
added
the
S-works-for-me-✅
|
Thanks! |
|
😍 Perfect, I’ve sent the payout 🪅 Let’s grab another issue and get rewarded! |
PR Type
Context
Needs Design check
Did your issue had any of the "$" label on it?
Screenshot 📸