Merge pull request #930 from roiLeo/feature/collection/gift

feat(collection&profile): donationButton under sharing

Author: yangwao

src/components/rmrk/Gallery/CollectionItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pack-item-wrapper container">
+  <div class="pack-item-wrapper container is-fluid">
     <div class="columns is-centered">
       <div class="column is-half has-text-centered">
         <div class="container image is-128x128 mb-2">
@@ -30,14 +30,16 @@
         <div class="label">
           {{ $t('owner') }}
         </div>
-        <div class="subtitle">
-          <ProfileLink :address="owner" :inline="true" />
+        <div class="subtitle is-size-6">
+          <ProfileLink :address="owner" :inline="true" :showTwitter="true" />
         </div>
       </div>
       <div class="column is-2">
         <Sharing v-if="sharingVisible"
+          class="mb-2"
           label="Check this awesome Collection on %23KusamaNetwork %23KodaDot"
           :iframe="iframeSettings" />
+        <DonationButton :address="issuer" style="width: 100%;" />
       </div>
     </div>
 
@@ -76,6 +78,7 @@ const components = {
   ProfileLink: () => import('@/components/rmrk/Profile/ProfileLink.vue'),
   VueMarkdown: () => import('vue-markdown-render'),
   Search: () => import('./Search/SearchBarCollection.vue'),
+  DonationButton: () => import('@/components/transfer/DonationButton.vue'),
 }
 @Component<CollectionItem>({
   metaInfo() {

src/locales/en.json

@@ -247,12 +247,13 @@
     "accept": "I confirm that I hold full copyright ownership of the submitted digital asset (or have sufficient permission by the owner to use the asset)"
   },
   "profile": {
+    "user": "User",
     "created": "Created",
     "collected": "Collected",
     "sold": "Sold"
   },
   "spotlight": {
-	"filter_accounts": "Accounts With Identity",
+    "filter_accounts": "Accounts With Identity",
     "id": "Creator",
     "sold": "Sold",
     "unique": "Unique",
@@ -264,13 +265,13 @@
     "empty": "Empty"
   },
   "series": {
-	"title": "Top Collection",
-	"subtitle": "The top NFTs on RMRK, ranked by volume, floor price and other statistics.",
-	"assets": "Assets",
-	"collected": "Collected",
-	"floorprice": "Floor price",
-	"owners": "Owners",
-	"volume": "Volume"
+    "title": "Top Collection",
+    "subtitle": "The top NFTs on RMRK, ranked by volume, floor price and other statistics.",
+    "assets": "Assets",
+    "collected": "Collected",
+    "floorprice": "Floor price",
+    "owners": "Owners",
+    "volume": "Volume"
   },
   "tutorial": {
     "create": "1. Create polkadot js account",

src/views/Profile.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="profile-wrapper container">
+  <div class="profile-wrapper container is-fluid">
     <div class="columns is-centered">
       <div class="column is-half has-text-centered">
         <div class="container image is-64x64 mb-2">
@@ -18,26 +18,22 @@
     </div>
 
     <div class="columns">
-      <div class="column has-text-centered-mobile">
-        <DonationButton :address="id" />
+      <div class="column">
+        <div class="label">
+          {{ $t('profile.user') }}
+        </div>
+        <div class="subtitle is-size-6">
+          <ProfileLink :address="id" :inline="true" :showTwitter="true"/>
+        </div>
       </div>
-      <div class="column has-text-centered">
-        <OnChainProperty
-          v-bind:email="email"
-          v-bind:twitter="twitter"
-          v-bind:web="web"
-          v-bind:legal="legal"
-          v-bind:riot="riot"
+      <div class="column is-2">
+        <Sharing
+          class="mb-2"
+          v-if="!sharingVisible"
+          label="Check this awesome Profile on %23KusamaNetwork %23KodaDot"
+          :iframe="iframeSettings"
         />
-      </div>
-      <div class="column has-text-right-tablet">
-        <div class="share-mobile">
-          <Sharing
-            v-if="!sharingVisible"
-            label="Check this awesome Profile on %23KusamaNetwork %23KodaDot"
-            :iframe="iframeSettings"
-          />
-        </div>
+        <DonationButton :address="id" style="width: 100%;" />
       </div>
     </div>
 
@@ -131,11 +127,11 @@ const components = {
   Sharing: () => import('@/components/rmrk/Gallery/Item/Sharing.vue'),
   Identity: () => import('@/components/shared/format/Identity.vue'),
   Pagination: () => import('@/components/rmrk/Gallery/Pagination.vue'),
-  OnChainProperty: () => import('@/views/OnChainProperty.vue'),
   PaginatedCardList: () =>
     import('@/components/rmrk/Gallery/PaginatedCardList.vue'),
   DonationButton: () => import('@/components/transfer/DonationButton.vue'),
   Avatar: () => import('@/components/shared/Avatar.vue'),
+  ProfileLink: () => import('@/components/rmrk/Profile/ProfileLink.vue'),
 
 }
 
@@ -377,24 +373,4 @@ export default class Profile extends Vue {
   flex-basis: auto;
 }
 
-.share-mobile {
-  width: 50%;
-  margin-left: auto;
-}
-
-@media only screen and (max-width: 768px) {
-  .column-mobile {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-  }
-
-  .container-mobile {
-    flex-direction: column;
-  }
-
-  .share-mobile {
-    width: 100%;
-  }
-}
 </style>