Skip to content
This repository was archived by the owner on Dec 5, 2025. It is now read-only.

Commit e9b82ab

Browse files
roiLeoroiLeo
committed
🔄 sync galleryItem
1 parent 7fb1647 commit e9b82ab

File tree

3 files changed

+169
-158
lines changed

3 files changed

+169
-158
lines changed

‎components/rmrk/Gallery/GalleryItem.vue‎

Lines changed: 107 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,131 @@
11
<template>
22
<section class="wrapper no-padding-desktop gallery-item">
3-
4-
<b-message type="is-primary" v-if="message">
5-
<div class="columns">
3+
<b-message type="is-primary" v-if="message">
4+
<div class="columns">
65
<div class="column is-four-fifths">
7-
<p class="title is-3 has-text-black">{{ $t('mint.success') }} 🎉</p>
8-
<p class="subtitle is-size-5 has-text-black">{{ $t('mint.shareWithFriends', [nft.name]) }} △</p>
6+
<p class="title is-3 has-text-black">{{ $t('mint.success') }} 🎉</p>
7+
<p class="subtitle is-size-5 has-text-black">{{ $t('mint.shareWithFriends', [nft.name]) }} △</p>
98
</div>
109
<div class="column">
11-
<Sharing onlyCopyLink/>
12-
</div>
10+
<Sharing onlyCopyLink/>
1311
</div>
14-
15-
</b-message>
16-
<div class="columns">
17-
<div class="image-wrapper">
18-
<button id="theatre-view" @click="toggleView" v-if="!isLoading && imageVisible">{{ viewMode === 'default' ? $t('theatre') : $t('default') }} {{$t('view')}}</button>
19-
<div class="column" :class="{ 'is-12 is-theatre': viewMode === 'theatre', 'is-6 is-offset-3': viewMode === 'default'}">
20-
<div v-orientation="viewMode === 'default' && !isFullScreenView && imageVisible" class="image-preview has-text-centered" :class="{fullscreen: isFullScreenView}">
21-
<b-image
22-
v-if="!isLoading && imageVisible && !meta.animation_url"
23-
:src="meta.image || '/placeholder.svg'"
24-
src-fallback="/placeholder.svg'"
25-
alt="KodaDot NFT minted multimedia"
26-
ratio="1by1"
27-
@error="onImageError"
28-
></b-image>
29-
<img class="fullscreen-image" :src="meta.image || '/placeholder.svg'" alt="KodaDot NFT minted multimedia">
30-
<b-skeleton height="524px" size="is-large" :active="isLoading"></b-skeleton>
31-
<MediaResolver v-if="meta.animation_url" :class="{ withPicture: imageVisible }" :src="meta.animation_url" :mimeType="mimeType" />
32-
</div>
33-
</div>
34-
<button id="fullscreen-view" @keyup.esc="minimize" @click="toggleFullScreen" v-if="!isLoading && imageVisible" :class="{fullscreen: isFullScreenView}">
35-
<b-icon
36-
:icon="isFullScreenView ? 'compress-alt' : 'arrows-alt'"
37-
>
38-
</b-icon>
39-
</button>
40-
</div>
4112
</div>
13+
</b-message>
14+
15+
<div class="columns">
16+
<div class="image-wrapper">
17+
<button id="theatre-view" @click="toggleView" v-if="!isLoading && imageVisible">{{ viewMode === 'default' ? $t('theatre') : $t('default') }} {{$t('view')}}</button>
18+
<div class="column" :class="{ 'is-12 is-theatre': viewMode === 'theatre', 'is-6 is-offset-3': viewMode === 'default'}">
19+
<div v-orientation="viewMode === 'default' && !isFullScreenView && imageVisible" class="image-preview has-text-centered" :class="{fullscreen: isFullScreenView}">
20+
<b-image
21+
v-if="!isLoading && imageVisible && !meta.animation_url"
22+
:src="meta.image || '/placeholder.svg'"
23+
src-fallback="/placeholder.svg'"
24+
alt="KodaDot NFT minted multimedia"
25+
ratio="1by1"
26+
@error="onImageError"
27+
></b-image>
28+
<img class="fullscreen-image" :src="meta.image || '/placeholder.svg'" alt="KodaDot NFT minted multimedia">
29+
<b-skeleton height="524px" size="is-large" :active="isLoading"></b-skeleton>
30+
<MediaResolver v-if="meta.animation_url" :class="{ withPicture: imageVisible }" :src="meta.animation_url" :mimeType="mimeType" />
31+
</div>
32+
</div>
33+
<button id="fullscreen-view" @keyup.esc="minimize" @click="toggleFullScreen" v-if="!isLoading && imageVisible" :class="{fullscreen: isFullScreenView}">
34+
<b-icon
35+
:icon="isFullScreenView ? 'compress-alt' : 'arrows-alt'"
36+
>
37+
</b-icon>
38+
</button>
39+
</div>
40+
</div>
41+
42+
<div class="columns">
43+
<div class="column is-6">
44+
<Appreciation
45+
:emotes="nft.emotes"
46+
:accountId="accountId"
47+
:currentOwnerId="nft.currentOwner"
48+
:nftId="nft.id"
49+
:burned="nft.burned"
50+
/>
51+
<div class="nft-title">
52+
<Name :nft="nft" :isLoading="isLoading" />
53+
</div>
4254

43-
<div class="columns">
44-
<div class="column is-6">
45-
<Appreciation
46-
:emotes="nft.emotes"
47-
:accountId="accountId"
48-
:currentOwnerId="nft.currentOwner"
49-
:nftId="nft.id"
50-
:burned="nft.burned"
51-
/>
52-
<div class="nft-title">
53-
<Name :nft="nft" :isLoading="isLoading" />
54-
</div>
55-
56-
<div v-if="meta.description" class="block">
57-
<p class="label">{{ $t('legend')}}</p>
58-
<VueMarkdown v-if="!isLoading" class="is-size-5" :source="meta.description.replaceAll('\n', ' \n')" />
59-
<b-skeleton :count="3" size="is-large" :active="isLoading"></b-skeleton>
60-
</div>
61-
62-
<History v-if="!isLoading" :events="nft.events"/>
55+
<div v-if="meta.description" class="block">
56+
<p class="label">{{ $t('legend')}}</p>
57+
<VueMarkdown v-if="!isLoading" class="is-size-5" :source="meta.description.replaceAll('\n', ' \n')" />
58+
<b-skeleton :count="3" size="is-large" :active="isLoading"></b-skeleton>
6359
</div>
6460

65-
<div class="column is-3 is-offset-3" v-if="detailVisible">
66-
<b-skeleton :count="2" size="is-large" :active="isLoading"></b-skeleton>
61+
</div>
6762

68-
<Sharing class="mb-4" />
63+
<div class="column is-6" v-if="detailVisible">
64+
<b-skeleton :count="2" size="is-large" :active="isLoading"></b-skeleton>
6965

70-
<div class="price-block mb-4" v-if="hasPrice">
71-
<div class="label">{{ $t('price') }}</div>
72-
<div class="price-block__container">
73-
<div class="price-block__original">{{ nft.price | formatBalance(12, 'KSM') }}</div>
74-
<b-button v-if="nft.currentOwner === accountId" type="is-warning" outlined @click="handleUnlist">{{ $t('Unlist') }}</b-button>
66+
<div class="columns">
67+
<div class="column">
68+
<div class="nft-title">
69+
<Detail :nft="nft" :isLoading="isLoading"/>
7570
</div>
76-
<!--<div class="label price-block__exchange">{{ this.nft.price | formatBalance(12, 'USD') }}</div>--> <!-- // price in USD -->
7771
</div>
78-
79-
<template v-if="detailVisible && !nft.burned">
80-
<!-- <PackSaver v-if="accountId" :accountId="accountId" :currentOwnerId="nft.currentOwner" :nftId="nft.id" /> -->
81-
<div class="card mb-4" aria-id="contentIdForA11y3">
72+
<div class="column is-flex is-flex-direction-column is-justify-content-space-between">
73+
<div
74+
class="card mb-4"
75+
aria-id="contentIdForA11y3"
76+
>
8277
<div class="card-content">
83-
<div class="label ">{{ $t('actions') }}</div>
84-
<div class="content">
85-
<p class="subtitle">
86-
<Auth />
87-
<IndexerGuard showMessage>
88-
<AvailableActions
78+
<template v-if="hasPrice">
79+
<div class="label">
80+
{{ $t('price') }}
81+
</div>
82+
<div class="price-block__container">
83+
<div class="price-block__original">
84+
{{ nft.price | formatBalance(12, 'KSM') }}
85+
</div>
86+
<b-button
87+
v-if="nft.currentOwner === accountId"
88+
type="is-warning"
89+
outlined
90+
@click="handleUnlist"
91+
>
92+
{{ $t('Unlist') }}
93+
</b-button>
94+
</div>
95+
</template>
96+
97+
<div class="content pt-4">
98+
<p class="subtitle">
99+
<IndexerGuard show-message class="pb-4">
100+
<AvailableActions
89101
ref="actions"
90-
:accountId="accountId"
91-
:currentOwnerId="nft.currentOwner"
102+
:account-id="accountId"
103+
:current-owner-id="nft.currentOwner"
92104
:price="nft.price"
93-
:nftId="nft.id"
94-
:ipfsHashes="[nft.image, nft.animation_url, nft.metadata]"
105+
:nft-id="nft.id"
106+
:ipfs-hashes="[nft.image, nft.animation_url, nft.metadata]"
95107
@change="handleAction"
96-
/>
97-
</IndexerGuard>
98-
</p>
99-
</div>
108+
/>
109+
</IndexerGuard>
110+
<Auth />
111+
</p>
100112
</div>
101-
</div>
102-
</template>
103113

104-
<template v-if="detailVisible">
105-
<Facts :nft="nft" :meta="meta" />
106-
</template>
114+
<Sharing class="mb-4" />
115+
</div>
116+
</div>
117+
</div>
107118
</div>
108-
</div>
109119

110-
<!-- <hr class="comment-divider" />
111-
<BaseCommentSection :nft="nft" :meta="meta" /> -->
120+
<Facts :nft="nft" :meta="meta" />
121+
</div>
122+
</div>
112123

124+
<div class="columns">
125+
<div class="column">
126+
<History v-if="!isLoading" :events="nft.events"/>
127+
</div>
128+
</div>
113129
</section>
114130
</template>
115131

@@ -168,7 +184,8 @@ import Orientation from '@/directives/DeviceOrientation'
168184
MediaResolver: () => import('../Media/MediaResolver.vue'),
169185
// PackSaver: () => import('../Pack/PackSaver.vue'),
170186
IndexerGuard: () => import('@/components/shared/wrapper/IndexerGuard.vue'),
171-
VueMarkdown: () => import('vue-markdown-render')
187+
VueMarkdown: () => import('vue-markdown-render'),
188+
Detail: () => import('@/components/rmrk/Gallery/Item/Detail.vue'),
172189
},
173190
directives: {
174191
orientation: Orientation

‎components/rmrk/Gallery/Item/Detail.vue‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<template>
2+
<div v-if="detailVisible">
3+
<p class="label">
4+
{{ $t('collection') }}
5+
</p>
6+
<p class="subtitle is-size-6">
7+
<router-link :to="{ name: 'collectionDetail', params: { id: nft.collectionId } }">
8+
{{ nft.collectionId }}
9+
</router-link>
10+
<b-skeleton :count="1" size="is-large" :active="isLoading"></b-skeleton>
11+
</p>
12+
<p class="label">
13+
{{ $t('creator') }}
14+
</p>
15+
<p class="subtitle is-size-6">
16+
<ProfileLink :address="nft.issuer" :showTwitter="true"/>
17+
<b-skeleton :count="1" size="is-large" :active="isLoading"></b-skeleton>
18+
<!-- <a :href="`https://kusama.subscan.io/account/${nft.currentOwner}`" target="_blank"><Identity :address="nft.currentOwner" /></a> -->
19+
</p>
20+
<template v-if="nft.issuer !== nft.currentOwner">
21+
<p class="label">
22+
{{ $t('owner') }}
23+
</p>
24+
<p class="subtitle is-size-6">
25+
<ProfileLink :address="nft.currentOwner" :showTwitter="true"/>
26+
<b-skeleton :count="1" size="is-large" :active="isLoading"></b-skeleton>
27+
<!-- <a :href="`https://kusama.subscan.io/account/${nft.currentOwner}`" target="_blank"><Identity :address="nft.currentOwner" /></a> -->
28+
</p>
29+
</template>
30+
</div>
31+
</template>
32+
33+
<script lang="ts" >
34+
import { Component, Prop, Vue } from 'nuxt-property-decorator'
35+
import isShareMode from '@/utils/isShareMode'
36+
import { NFTWithMeta } from '../../service/scheme'
37+
import { emptyObject } from '@/utils/empty'
38+
// import Identity from '@/components/shared/format/Identity.vue'
39+
40+
const components = {
41+
ProfileLink: () => import('@/components/rmrk/Profile/ProfileLink.vue')
42+
}
43+
44+
@Component({ components })
45+
export default class Name extends Vue {
46+
@Prop({ default: () => emptyObject<NFTWithMeta>() }) public nft!: NFTWithMeta;
47+
@Prop() public isLoading!: boolean;
48+
49+
get detailVisible() {
50+
return !isShareMode
51+
}
52+
53+
get carbonlessBadge() {
54+
return this.nft.attributes?.some(({trait_type, value}) => trait_type === 'carbonless' && value)
55+
}
56+
}
57+
</script>

‎components/rmrk/Gallery/Item/Name.vue‎

Lines changed: 5 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -7,79 +7,16 @@
77
<span v-if="!isLoading">
88
<span v-if="nft.burned">「🔥」</span> {{ nft.name }} <span v-if="carbonlessBadge">「🌱」</span>
99
</span>
10-
<b-skeleton
11-
height="100px"
12-
size="is-large"
13-
:active="isLoading"
14-
/>
10+
<b-skeleton height="100px" size="is-large" :active="isLoading"></b-skeleton>
1511
</p>
16-
<p
17-
v-if="nft.burned"
18-
class="title is-size-4 has-text-danger"
19-
>
12+
<p v-if="nft.burned" class="title is-size-4 has-text-danger">
2013
{{ $t('nft.burned') }} 「🔥」
21-
<b-skeleton
22-
:count="1"
23-
size="is-large"
24-
:active="isLoading"
25-
/>
14+
<b-skeleton :count="1" size="is-large" :active="isLoading"></b-skeleton>
2615
</p>
27-
<p
28-
v-if="carbonlessBadge"
29-
class="title is-size-4 has-text-success"
30-
>
16+
<p v-if="carbonlessBadge" class="title is-size-4 has-text-success">
3117
{{ $t('nft.carbonless') }} 「🌱」
32-
<b-skeleton
33-
:count="1"
34-
size="is-large"
35-
:active="isLoading"
36-
/>
37-
</p>
38-
<p class="label">
39-
{{ $t('collection') }}
40-
</p>
41-
<p class="subtitle is-size-6">
42-
<nuxt-link :to="`/rmrk/collection/${nft.collectionId}`">
43-
{{ nft.collectionId }}
44-
</nuxt-link>
45-
<b-skeleton
46-
:count="1"
47-
size="is-large"
48-
:active="isLoading"
49-
/>
50-
</p>
51-
<p class="label">
52-
{{ $t('creator') }}
53-
</p>
54-
<p class="subtitle is-size-6">
55-
<ProfileLink
56-
:address="nft.issuer"
57-
:show-twitter="true"
58-
/>
59-
<b-skeleton
60-
:count="1"
61-
size="is-large"
62-
:active="isLoading"
63-
/>
64-
<!-- <a :href="`https://kusama.subscan.io/account/${nft.currentOwner}`" target="_blank"><Identity :address="nft.currentOwner" /></a> -->
18+
<b-skeleton :count="1" size="is-large" :active="isLoading"></b-skeleton>
6519
</p>
66-
<template v-if="nft.issuer !== nft.currentOwner">
67-
<p class="label">
68-
{{ $t('owner') }}
69-
</p>
70-
<p class="subtitle is-size-6">
71-
<ProfileLink
72-
:address="nft.currentOwner"
73-
:show-twitter="true"
74-
/>
75-
<b-skeleton
76-
:count="1"
77-
size="is-large"
78-
:active="isLoading"
79-
/>
80-
<!-- <a :href="`https://kusama.subscan.io/account/${nft.currentOwner}`" target="_blank"><Identity :address="nft.currentOwner" /></a> -->
81-
</p>
82-
</template>
8320
</div>
8421
</template>
8522

0 commit comments

Comments
 (0)