Skip to content

Commit d537e8e

Browse files
vikiivalvikiival
authored
Merge pull request #855 from kodadot/basic-image
basic image
2 parents 75fc0e1 + 2375fdc commit d537e8e

File tree

5 files changed

+85
-58
lines changed

5 files changed

+85
-58
lines changed

‎src/components/rmrk/Gallery/CollectionItem.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const components = {
6868
CollectionActivity: () => import('@/components/rmrk/Gallery/CollectionActivity.vue'),
6969
Sharing: () => import('@/components/rmrk/Gallery/Item/Sharing.vue'),
7070
ProfileLink: () => import('@/components/rmrk/Profile/ProfileLink.vue'),
71-
VueMarkdown: () => import('vue-markdown-render')
71+
VueMarkdown: () => import('vue-markdown-render'),
7272
}
7373
@Component<CollectionItem>({
7474
metaInfo() {

‎src/components/rmrk/Gallery/Gallery.vue

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,7 @@
2525
nft.emoteCount
2626
}}</span>
2727
</span>
28-
<figure class="gallery__image-wrapper">
29-
<img
30-
:src="placeholder"
31-
:data-src="nft.image"
32-
:data-type="nft.type"
33-
:alt="nft.name"
34-
class="lazyload gallery__image"
35-
:class="{ 'card-image__burned': nft.burned }"
36-
@error="onError"
37-
/>
38-
</figure>
28+
<BasicImage :src="nft.image" :alt="nft.name" customClass="gallery__image-wrapper" />
3929
<span v-if="nft.price > 0" class="card-image__price">
4030
<Money :value="nft.price" inline />
4131
</span>
@@ -121,6 +111,7 @@ const components = {
121111
Money: () => import('@/components/shared/format/Money.vue'),
122112
Pagination: () => import('./Pagination.vue'),
123113
Loader: () => import('@/components/shared/Loader.vue'),
114+
BasicImage: () => import('@/components/shared/view/BasicImage.vue'),
124115
}
125116
126117
@Component<Gallery>({
@@ -349,18 +340,14 @@ export default class Gallery extends Vue {
349340
cursor: pointer;
350341
}
351342
352-
&__image {
353-
bottom: 0;
354-
left: 0;
355-
position: absolute;
356-
right: 0;
343+
.card-image img {
357344
border-radius: 8px;
358345
top: 50%;
359346
transition: all 0.3s;
360347
display: block;
361348
width: 100%;
362349
height: auto;
363-
transform: scale(1) translateY(-50%);
350+
transform: scale(1);
364351
}
365352
366353
.ff-container {
@@ -470,11 +457,12 @@ export default class Gallery extends Vue {
470457
}
471458
472459
&:hover .gallery__image-wrapper img {
473-
transform: scale(1.1) translateY(-50%);
460+
transform: scale(1.1);
461+
transition: transform 0.3s linear;
474462
}
475463
476464
&:hover .ff-canvas {
477-
transform: scale(1.1) translateY(-50%);
465+
transform: scale(1.1);
478466
}
479467
480468
&:hover .card-image__emotes {

‎src/components/rmrk/Gallery/GalleryCard.vue

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,44 @@
11
<template>
2-
<div class="card nft-card" :class="{'is-current-owner': accountIsCurrentOwner()}">
3-
<LinkResolver class="nft-card__skeleton" :route="type" :param="id" :link="link" tag="a" >
2+
<div
3+
class="card nft-card"
4+
:class="{ 'is-current-owner': accountIsCurrentOwner() }"
5+
>
6+
<LinkResolver
7+
class="nft-card__skeleton"
8+
:route="type"
9+
:param="id"
10+
:link="link"
11+
tag="a"
12+
>
413
<div class="card-image" v-if="image">
514
<span v-if="emoteCount" class="card-image__emotes">
615
<b-icon icon="heart" />
7-
<span class="card-image__emotes__count">{{
8-
emoteCount
9-
}}</span>
16+
<span class="card-image__emotes__count">{{ emoteCount }}</span>
17+
</span>
18+
<BasicImage :src="image" :alt="title" customClass="gallery__image-wrapper" />
19+
<span v-if="price > 0" class="card-image__price">
20+
<Money :value="price" inline />
1021
</span>
11-
12-
<b-image
13-
:src="image"
14-
:src-fallback="placeholder"
15-
:alt="title || 'Simple image'"
16-
ratio="1by1"
17-
></b-image>
18-
<span v-if="price > 0" class="card-image__price">
19-
<Money :value="price" inline />
20-
</span>
2122
</div>
2223

2324
<div v-else class="card-image">
2425
<span v-if="emoteCount" class="card-image__emotes">
2526
<b-icon icon="heart" />
26-
<span class="card-image__emotes__count">{{
27-
emoteCount
28-
}}</span>
27+
<span class="card-image__emotes__count">{{ emoteCount }}</span>
2928
</span>
3029

31-
<b-image
32-
:src="placeholder"
33-
alt="Simple image"
34-
ratio="1by1"
35-
></b-image>
30+
<b-image :src="placeholder" alt="Simple image" ratio="1by1"></b-image>
3631

3732
<span v-if="price > 0" class="card-image__price">
3833
<Money :value="price" inline />
3934
</span>
4035
</div>
4136

4237
<div class="card-content">
43-
<span class="title mb-0 is-4 has-text-centered has-text-primary" :title="name">
38+
<span
39+
class="title mb-0 is-4 has-text-centered has-text-primary"
40+
:title="name"
41+
>
4442
<div class="has-text-overflow-ellipsis">
4543
{{ name }}
4644
</div>
@@ -60,7 +58,7 @@ import { NFT } from '../service/scheme'
6058
const components = {
6159
LinkResolver: () => import('@/components/shared/LinkResolver.vue'),
6260
Money: () => import('@/components/shared/format/Money.vue'),
63-
61+
BasicImage: () => import('@/components/shared/view/BasicImage.vue'),
6462
}
6563
6664
@Component({ components })
@@ -80,14 +78,16 @@ export default class GalleryCard extends Vue {
8078
private placeholder = '/koda300x300.svg';
8179
8280
async mounted() {
83-
8481
if (this.metadata) {
8582
const meta = await get(this.metadata)
8683
if (meta) {
8784
this.image = getSanitizer(meta.image || '')(meta.image || '')
8885
this.title = meta.name
8986
} else {
90-
const m = await fetchNFTMetadata({ metadata: this.metadata } as NFT, getSanitizer(this.metadata, undefined, 'permafrost'))
87+
const m = await fetchNFTMetadata(
88+
{ metadata: this.metadata } as NFT,
89+
getSanitizer(this.metadata, undefined, 'permafrost')
90+
)
9191
this.image = getSanitizer(m.image || '')(m.image || '')
9292
this.title = m.name
9393
update(this.metadata, () => m)
@@ -113,7 +113,6 @@ export default class GalleryCard extends Vue {
113113
</script>
114114

115115
<style lang="scss">
116-
117116
.nft-card {
118117
border-radius: 8px;
119118
position: relative;
@@ -137,7 +136,7 @@ export default class GalleryCard extends Vue {
137136
}
138137
transition: all 0.3s;
139138
140-
.card-image{
139+
.card-image {
141140
&__emotes {
142141
position: absolute;
143142
background-color: #d32e79;
@@ -209,5 +208,4 @@ export default class GalleryCard extends Vue {
209208
}
210209
}
211210
}
212-
213211
</style>

‎src/components/rmrk/Gallery/GalleryCardList.vue

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@
55
v-for="nft in items"
66
:key="nft.id"
77
>
8-
<GalleryCard :id="nft.id"
9-
:name="nft.name"
10-
:type="type"
11-
:link="link"
12-
:metadata="nft.metadata"
13-
:price="nft.price"
14-
:emoteCount="nft.emoteCount"
15-
:currentOwner="nft.currentOwner"
8+
<GalleryCard
9+
:id="nft.id"
10+
:name="nft.name"
11+
:type="type"
12+
:link="link"
13+
:metadata="nft.metadata"
14+
:price="nft.price"
15+
:emoteCount="nft.emoteCount"
16+
:currentOwner="nft.currentOwner"
1617
/>
1718
</div>
1819
</div>

‎src/components/shared/view/BasicImage.vue

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<b-image
3+
:src="src"
4+
src-fallback="/placeholder.svg"
5+
:alt="alt"
6+
ratio="1by1"
7+
@error="onImageError"
8+
:class="customClass"
9+
:rounded="rounded"
10+
>
11+
<template #placeholder>
12+
<b-skeleton class="skeleton-placeholder" height="100%"></b-skeleton>
13+
</template>
14+
</b-image>
15+
</template>
16+
17+
<script lang="ts" >
18+
import { Component, Prop, Vue } from 'vue-property-decorator'
19+
20+
@Component
21+
export default class BasicImage extends Vue {
22+
@Prop({ type: String }) public src!: string;
23+
@Prop(String) public customClass!: string;
24+
@Prop({ type: String, default: 'KodaDot NFT minted multimedia' }) public alt!: string;
25+
@Prop(Boolean) public rounded!: boolean;
26+
27+
public onImageError(event: unknown, src: string): void {
28+
console.log('Unable to load ', src)
29+
}
30+
31+
}
32+
</script>
33+
34+
<style scoped>
35+
.b-skeleton {
36+
height: 100%;
37+
position: absolute;
38+
top: 0;
39+
}
40+
</style>

0 commit comments

Comments
 (0)