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

Commit baa02fc

Browse files
yangwaoyangwao
authored
Merge pull request #976 from roiLeo/fix/page/layout
fix(page): layout
2 parents ceb5a3a + e60fd73 commit baa02fc

File tree

2 files changed

+144
-140
lines changed

2 files changed

+144
-140
lines changed

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

Lines changed: 45 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,62 @@
11
<template>
2-
<div class="pack-item-wrapper container is-fluid">
3-
<div class="columns is-centered">
4-
<div class="column is-half has-text-centered">
5-
<div class="container image is-128x128 mb-2">
6-
<b-image
7-
v-if="!isLoading"
8-
:src="image"
9-
:alt="name"
10-
ratio="1by1"
11-
rounded
12-
></b-image>
2+
<div class="section">
3+
<div class="pack-item-wrapper container">
4+
<div class="columns is-centered">
5+
<div class="column is-half has-text-centered">
6+
<div class="container image is-128x128 mb-2">
7+
<b-image
8+
v-if="!isLoading"
9+
:src="image"
10+
:alt="name"
11+
ratio="1by1"
12+
rounded
13+
></b-image>
14+
</div>
15+
<h1 class="title is-2">
16+
{{ name }}
17+
</h1>
1318
</div>
14-
<h1 class="title is-2">
15-
{{ name }}
16-
</h1>
1719
</div>
18-
</div>
1920

20-
<div class="columns">
21-
<div class="column">
22-
<div class="label">
23-
{{ $t('creator') }}
24-
</div>
25-
<div class="subtitle is-size-6">
26-
<ProfileLink :address="issuer" :inline="true" :showTwitter="true"/>
21+
<div class="columns">
22+
<div class="column">
23+
<div class="label">
24+
{{ $t('creator') }}
25+
</div>
26+
<div class="subtitle is-size-6">
27+
<ProfileLink :address="issuer" :inline="true" :showTwitter="true"/>
28+
</div>
2729
</div>
28-
</div>
29-
<div class="column" v-if="owner">
30-
<div class="label">
31-
{{ $t('owner') }}
30+
<div class="column" v-if="owner">
31+
<div class="label">
32+
{{ $t('owner') }}
33+
</div>
34+
<div class="subtitle is-size-6">
35+
<ProfileLink :address="owner" :inline="true" :showTwitter="true" />
36+
</div>
3237
</div>
33-
<div class="subtitle is-size-6">
34-
<ProfileLink :address="owner" :inline="true" :showTwitter="true" />
38+
<div class="column is-2">
39+
<Sharing v-if="sharingVisible"
40+
class="mb-2"
41+
label="Check this awesome Collection on %23KusamaNetwork %23KodaDot"
42+
:iframe="iframeSettings" />
43+
<DonationButton :address="issuer" style="width: 100%;" />
3544
</div>
3645
</div>
37-
<div class="column is-2">
38-
<Sharing v-if="sharingVisible"
39-
class="mb-2"
40-
label="Check this awesome Collection on %23KusamaNetwork %23KodaDot"
41-
:iframe="iframeSettings" />
42-
<DonationButton :address="issuer" style="width: 100%;" />
43-
</div>
44-
</div>
4546

46-
<CollectionActivity :nfts="collection.nfts" />
47+
<CollectionActivity :nfts="collection.nfts" />
4748

48-
<div class="columns is-centered">
49-
<div class="column is-8 has-text-centered">
50-
<VueMarkdown :source="description" />
49+
<div class="columns is-centered">
50+
<div class="column is-8 has-text-centered">
51+
<VueMarkdown :source="description" />
52+
</div>
5153
</div>
52-
</div>
5354

54-
<Search v-bind.sync="searchQuery" />
55+
<Search v-bind.sync="searchQuery" />
5556

56-
<GalleryCardList :items="collection.nfts" />
57+
<GalleryCardList :items="collection.nfts" />
5758

59+
</div>
5860
</div>
5961
</template>
6062

‎src/views/Profile.vue‎

Lines changed: 99 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,111 @@
11
<template>
2-
<div class="profile-wrapper container is-fluid">
3-
<div class="columns is-centered">
4-
<div class="column is-half has-text-centered">
5-
<div class="container image is-64x64 mb-2">
6-
<Avatar :value="id" />
2+
<div class="section">
3+
<div class="profile-wrapper container">
4+
<div class="columns is-centered">
5+
<div class="column is-half has-text-centered">
6+
<div class="container image is-64x64 mb-2">
7+
<Avatar :value="id" />
8+
</div>
9+
<h1 class="title is-2">
10+
<a
11+
:href="`https://kusama.subscan.io/account/${id}`"
12+
target="_blank"
13+
rel="noopener noreferrer"
14+
>
15+
<Identity ref="identity" :address="id" inline emit @change="handleIdentity" />
16+
</a>
17+
</h1>
718
</div>
8-
<h1 class="title is-2">
9-
<a
10-
:href="`https://kusama.subscan.io/account/${id}`"
11-
target="_blank"
12-
rel="noopener noreferrer"
13-
>
14-
<Identity ref="identity" :address="id" inline emit @change="handleIdentity" />
15-
</a>
16-
</h1>
1719
</div>
18-
</div>
1920

20-
<div class="columns">
21-
<div class="column">
22-
<div class="label">
23-
{{ $t('profile.user') }}
21+
<div class="columns">
22+
<div class="column">
23+
<div class="label">
24+
{{ $t('profile.user') }}
25+
</div>
26+
<div class="subtitle is-size-6">
27+
<ProfileLink :address="id" :inline="true" :showTwitter="true"/>
28+
</div>
2429
</div>
25-
<div class="subtitle is-size-6">
26-
<ProfileLink :address="id" :inline="true" :showTwitter="true"/>
30+
<div class="column is-2">
31+
<Sharing
32+
class="mb-2"
33+
v-if="!sharingVisible"
34+
label="Check this awesome Profile on %23KusamaNetwork %23KodaDot"
35+
:iframe="iframeSettings"
36+
/>
37+
<DonationButton :address="id" style="width: 100%;" />
2738
</div>
2839
</div>
29-
<div class="column is-2">
30-
<Sharing
31-
class="mb-2"
32-
v-if="!sharingVisible"
33-
label="Check this awesome Profile on %23KusamaNetwork %23KodaDot"
34-
:iframe="iframeSettings"
35-
/>
36-
<DonationButton :address="id" style="width: 100%;" />
37-
</div>
38-
</div>
3940

40-
<b-tabs
41-
:class="{ 'invisible-tab': sharingVisible }"
42-
v-model="activeTab"
43-
destroy-on-hide
44-
expanded
45-
size="is-medium"
46-
>
47-
<b-tab-item value="nft">
48-
<template #header>
49-
{{ $t("profile.created") }}
50-
<span class="tab-counter" v-if="totalCreated">{{ totalCreated }}</span>
51-
</template>
52-
<PaginatedCardList
53-
:id="id"
54-
:query="nftListByIssuer"
55-
@change="totalCreated = $event"
56-
:account="id"
57-
:showSearchBar="true"
58-
/>
59-
</b-tab-item>
60-
<b-tab-item
61-
:label="`Collections - ${totalCollections}`"
62-
value="collection"
41+
<b-tabs
42+
:class="{ 'invisible-tab': sharingVisible }"
43+
v-model="activeTab"
44+
destroy-on-hide
45+
expanded
46+
size="is-medium"
6347
>
64-
<Pagination replace :total="totalCollections" v-model="currentCollectionPage" />
65-
<GalleryCardList
66-
:items="collections"
67-
type="collectionDetail"
68-
link="rmrk/collection"
69-
/>
70-
<Pagination
71-
replace
72-
class="pt-5 pb-5"
73-
:total="totalCollections"
74-
v-model="currentCollectionPage"
75-
/>
76-
</b-tab-item>
77-
<b-tab-item value="sold">
78-
<template #header>
79-
{{ $t("profile.sold") }}
80-
<span class="tab-counter" v-if="totalSold">{{ totalSold }}</span>
81-
</template>
82-
<PaginatedCardList
83-
:id="id"
84-
:query="nftListSold"
85-
@change="totalSold = $event"
86-
:account="id"
87-
/>
88-
</b-tab-item>
89-
<b-tab-item value="collected">
90-
<template #header>
91-
{{ $t("profile.collected") }}
92-
<span class="tab-counter" v-if="totalCollected">{{ totalCollected }}</span>
93-
</template>
94-
<PaginatedCardList
95-
:id="id"
96-
:query="nftListCollected"
97-
@change="totalCollected = $event"
98-
:account="id"
99-
/>
100-
</b-tab-item>
101-
102-
<!-- <b-tab-item label="Packs" value="pack">
103-
<span>TODO: Reintroduce</span>
104-
<GalleryCardList :items="packs" type="packDetail" link="rmrk/pack" />
105-
</b-tab-item> -->
106-
</b-tabs>
48+
<b-tab-item value="nft">
49+
<template #header>
50+
{{ $t("profile.created") }}
51+
<span class="tab-counter" v-if="totalCreated">{{ totalCreated }}</span>
52+
</template>
53+
<PaginatedCardList
54+
:id="id"
55+
:query="nftListByIssuer"
56+
@change="totalCreated = $event"
57+
:account="id"
58+
:showSearchBar="true"
59+
/>
60+
</b-tab-item>
61+
<b-tab-item
62+
:label="`Collections - ${totalCollections}`"
63+
value="collection"
64+
>
65+
<Pagination replace :total="totalCollections" v-model="currentCollectionPage" />
66+
<GalleryCardList
67+
:items="collections"
68+
type="collectionDetail"
69+
link="rmrk/collection"
70+
/>
71+
<Pagination
72+
replace
73+
class="pt-5 pb-5"
74+
:total="totalCollections"
75+
v-model="currentCollectionPage"
76+
/>
77+
</b-tab-item>
78+
<b-tab-item value="sold">
79+
<template #header>
80+
{{ $t("profile.sold") }}
81+
<span class="tab-counter" v-if="totalSold">{{ totalSold }}</span>
82+
</template>
83+
<PaginatedCardList
84+
:id="id"
85+
:query="nftListSold"
86+
@change="totalSold = $event"
87+
:account="id"
88+
/>
89+
</b-tab-item>
90+
<b-tab-item value="collected">
91+
<template #header>
92+
{{ $t("profile.collected") }}
93+
<span class="tab-counter" v-if="totalCollected">{{ totalCollected }}</span>
94+
</template>
95+
<PaginatedCardList
96+
:id="id"
97+
:query="nftListCollected"
98+
@change="totalCollected = $event"
99+
:account="id"
100+
/>
101+
</b-tab-item>
102+
103+
<!-- <b-tab-item label="Packs" value="pack">
104+
<span>TODO: Reintroduce</span>
105+
<GalleryCardList :items="packs" type="packDetail" link="rmrk/pack" />
106+
</b-tab-item> -->
107+
</b-tabs>
108+
</div>
107109
</div>
108110
</template>
109111

0 commit comments

Comments
 (0)