Skip to content

Commit

Permalink
ref: cleaner top collection card
Browse files Browse the repository at this point in the history
  • Loading branch information
@hassnian
hassnian committed Feb 13, 2024
1 parent 793d370 commit 1b02f8f
Showing 1 changed file with 74 additions and 98 deletions.
172 changes: 74 additions & 98 deletions components/landing/topCollections/TopCollectionsCard.vue
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,62 @@
<template>
<div
v-if="collection"
class="top-collection-card w-full border border-card-border-color hover:border-border-color bg-background-color group">
class="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="`/${urlPrefix}/collection/${collection.id}`">
: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})` }">
<div class="top-collection-card-banner-avatar-container">
class="h-[112px] md:h-[142px] flex items-center justify-center group-hover:opacity-[0.85] bg-center bg-cover"
:style="{ backgroundImage: `url(${collection?.image})` }"
:class="`${!collection && 'bg-k-shade animate-pulse'}`">
<div class="border border-card-border-color w-[4.375rem] h-[4.375rem]">
<BasicImage
custom-class="top-collection-card-banner-avatar-inner [&>img]:border [&>img]:border-card-border-color !p-0"
:src="collection.image || placeholder" />
v-if="collection"
custom-class="avatar-border [&>img]:border [&>img]:border-card-border-color !p-0"
:src="collection?.image || placeholder" />
<div v-else class="avatar-border relative">
<NeoSkeleton
no-margin
:rounded="false"
full-size
class="border border-card-border-color" />
</div>
</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">
{{ collection.name }}
<div class="pt-3 pb-4 !px-6 border-t border-card-border-color">
<p class="font-bold text-base whitespace-nowrap text-center truncate">
<span v-if="collection?.name">{{ collection.name }}</span>
<span v-else class="flex justify-center">
<NeoSkeleton
no-margin
:rounded="false"
width="160"
height="24"
class="!w-min" />
</span>
</p>
<div class="info-fields">
<div v-if="collection.floorPrice || collection.floor">
<div
class="mt-2 flex flex-col justify-between md:flex-row"
:class="{ 'max-md:gap-2': !collection }">
<div
class="flex flex-row justify-between items-center md:flex-col md:items-start">
<p class="capitalize text-k-grey text-xs">
{{ $t('price') }}
<span v-if="collection?.floorPrice || collection?.floor">
{{ $t('price') }}
</span>
<NeoSkeleton
v-else
no-margin
:rounded="false"
width="40"
height="12" />
</p>
<div class="flex gap-2 items-center max-md:flex-row-reverse">
<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
Expand All @@ -38,63 +66,45 @@
{{ formattedDiffPercent }}
</div>
</div>
<NeoSkeleton
v-else
no-margin
:rounded="false"
width="80"
height="20"
class="!w-min md:mt-1" />
</div>
<div>
<div
class="flex flex-row justify-between items-center md:flex-col md:items-end">
<p class="capitalize text-k-grey text-end text-xs">
{{ $t('volume') }}
<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 :value="volume" inline :round="1" />
<CommonTokenMoney
v-if="collection"
:value="volume"
inline
:round="1" />
<NeoSkeleton
v-else
no-margin
:rounded="false"
width="80"
class="md:mt-1"
height="20" />
</div>
</div>
</div>
</div>
</nuxt-link>
</div>
<div v-else class="top-collection-card-skeleton border border-border-color">
<div class="top-collection-card-skeleton-banner relative">
<NeoSkeleton no-margin :rounded="false" full-size />

<div class="top-collection-card-banner-avatar-container">
<div class="top-collection-card-banner-avatar-inner relative">
<NeoSkeleton
no-margin
:rounded="false"
full-size
class="border border-card-border-color" />
</div>
</div>
</div>

<div class="top-collection-card-skeleton-info">
<div class="flex justify-center">
<div class="relative w-40 h-6">
<NeoSkeleton no-margin :rounded="false" full-size />
</div>
</div>

<div class="info-fields">
<div>
<div class="relative w-10 h-3 mb-1">
<NeoSkeleton no-margin :rounded="false" full-size />
</div>
<div class="relative w-20 h-5 mt-1">
<NeoSkeleton no-margin :rounded="false" full-size />
</div>
</div>

<div class="flex flex-col">
<div class="relative w-10 h-3 mb-1">
<NeoSkeleton no-margin :rounded="false" full-size />
</div>
<div class="relative w-20 h-5 mt-1">
<NeoSkeleton no-margin :rounded="false" full-size />
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
Expand Down Expand Up @@ -126,41 +136,7 @@ const color = computed(() => {
</script>
<style lang="scss" scoped>
.top-collection-card,
.top-collection-card-skeleton {
@apply bg-background-color;
&-banner {
@apply h-[112px] md:h-[142px] flex items-center justify-center;
&-avatar {
&-container {
@apply border border-card-border-color w-[4.375rem] h-[4.375rem];
}
&-inner {
@apply border-[6px] h-full border-text-color-inverse;
}
}
}
&-info {
@apply pt-3 pb-4 px-6;
.collection-name {
@apply text-base;
}
.info-fields {
@apply mt-2 flex flex-col justify-between md:flex-row;
> div {
@apply flex flex-row justify-between items-center md:flex-col md:items-start;
}
> :nth-child(2) {
@apply md:items-end items-center;
}
}
}
.avatar-border {
@apply border-[6px] h-full border-text-color-inverse;
}
</style>

0 comments on commit 1b02f8f

Please sign in to comment.