feat(qr-code): resolve conflict

kodadot · Nov 10, 2021 · b6955aa · b6955aa
2 parents cb1b62a + a6fa6e8
commit b6955aa
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 24 deletions.
diff --git a/src/components/rmrk/Gallery/CollectionActivity.vue b/src/components/rmrk/Gallery/CollectionActivity.vue
@@ -1,40 +1,53 @@
 <template>
   <div>
-    <div class="level m-4" v-if="nfts">
+    <div class="level m-4 collection" v-if="nfts">
       <div class="level-item has-text-centered">
         <div>
-          <p class="heading">Items</p>
           <p class="title">{{ collectionLength }}</p>
+          <p class="heading">Items</p>
         </div>
       </div>
-      <div class="level-item has-text-centered">
+            <div class="level-item has-text-centered">
         <div>
-          <p class="heading">Owned</p>
-          <p class="title">{{ collectionSoldedNFT }}</p>
+          <p class="title">
+            <Money :value="collectionFloorPrice" inline />
+          </p>
+          <p class="heading">Floor price</p>
         </div>
       </div>
-      <div class="level-item has-text-centered">
+            <div class="level-item has-text-centered">
         <div>
-          <p class="heading">Floor price</p>
           <p class="title">
-            <Money :value="collectionFloorPrice" inline />
+            <Money :value="collectionTradedVolumeNumber" inline />
           </p>
+          <p class="heading">Volume traded</p>
+        </div>
+      </div>
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="title">{{ collectionSoldedNFT }}</p>
+          <p class="heading">Owned</p>
         </div>
       </div>
       <div class="level-item has-text-centered">
         <div>
-          <p class="heading">Volume traded</p>
           <p class="title">
-            <Money :value="collectionTradedVolumeNumber" inline />
+            {{
+              collectionSoldedNFT
+                ? (collectionLength / collectionSoldedNFT).toFixed(4)
+                : 0
+            }}
           </p>
+          <p class="heading">Distribution</p>
         </div>
       </div>
+
       <div class="level-item has-text-centered">
         <div>
-          <p class="heading">24h Volume traded</p>
           <p class="title">
             <Money :value="collectionDailyTradedVolumeNumber" inline />
           </p>
+          <p class="heading">24h Volume traded</p>
         </div>
       </div>
     </div>
@@ -100,3 +113,17 @@ export default class extends Vue {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+@import "@/styles/variables";
+
+  .collection {
+    display: grid;
+    grid-gap: 0.7rem;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .title {
+    font-size: 1.2rem;
+  }
+</style>
diff --git a/src/components/rmrk/Gallery/CollectionItem.vue b/src/components/rmrk/Gallery/CollectionItem.vue
@@ -18,7 +18,7 @@
         </div>
       </div>
 
-      <div class="columns is-mobile">
+      <div class="columns is-align-items-center">
         <div class="column">
           <div class="label">
             {{ $t('creator') }}
@@ -35,6 +35,9 @@
             <ProfileLink :address="owner" :inline="true" :showTwitter="true" />
           </div>
         </div>
+        <div class="column is-narrow">
+          <CollectionActivity :nfts="stats" />
+        </div>
         <div class="column has-text-right">
           <Sharing v-if="sharingVisible"
             class="mb-2"
@@ -45,8 +48,6 @@
         </div>
       </div>
 
-      <CollectionActivity :nfts="stats" />
-
       <div class="columns is-centered">
         <div class="column is-8 has-text-centered">
           <VueMarkdown :source="description" />
@@ -55,7 +56,7 @@
 
       <Search v-bind.sync="searchQuery">
         <b-field>
-          <Pagination simple replace preserveScroll :total="total" v-model="currentValue" :per-page="first" />
+          <Pagination class="mb-0" hasMagicBtn simple replace preserveScroll :total="total" v-model="currentValue" :per-page="first" />
         </b-field>
       </Search>
 

diff --git a/src/components/rmrk/Gallery/PaginatedCardList.vue b/src/components/rmrk/Gallery/PaginatedCardList.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <Search v-bind.sync="searchQuery" v-if="showSearchBar" />
-    <Pagination replace :total="total" v-model="currentValue" />
+    <Pagination hasMagicBtn replace :total="total" v-model="currentValue" />
     <GalleryCardList :items="items" />
     <Pagination
       class="pt-5 pb-5"

diff --git a/src/components/rmrk/Gallery/Pagination.vue b/src/components/rmrk/Gallery/Pagination.vue
@@ -65,7 +65,7 @@ export default class Pagination extends Vue {
 
   public goToRandomPage() {
     this.onPageChange()
-    const pageSize = Math.floor(this.total / this.perPage)
+    const pageSize = Math.ceil(this.total / this.perPage)
     let randomNumber = getRandomIntInRange(1, pageSize)
     this.current = randomNumber
   }

diff --git a/src/components/spotlight/SpotlightTable.vue b/src/components/spotlight/SpotlightTable.vue
@@ -3,19 +3,28 @@
     <b-table
       :data="toggleUsersWithIdentity ? usersWithIdentity : data"
       hoverable
+      :current-page="currentPage ? currentPage : 1"
       detailed
       paginated
       pagination-position="top"
       show-detail-icon
     >
       <template v-slot:top-left>
-        <b-field>
+        <b-field class="mb-0">
           <div class="control is-flex">
             <b-switch v-model="toggleUsersWithIdentity" :rounded="false">
               {{ $t('spotlight.filter_accounts') }}
             </b-switch>
           </div>
         </b-field>
+        <b-button
+          class="ml-2 magicBtn"
+          title="Go to random page"
+          type="is-primary"
+          icon-left="magic"
+          @click="goToRandomPage"
+        >
+        </b-button>
       </template>
       <b-table-column
         field="id"
@@ -127,6 +136,7 @@ import { denyList } from '@/constants'
 import { GenericAccountId } from '@polkadot/types/generic/AccountId'
 import { get } from 'idb-keyval'
 import { identityStore } from '@/utils/idbStore'
+import { getRandomIntInRange } from '../rmrk/utils'
 type Address = string | GenericAccountId | undefined;
 
 const components = {
@@ -142,6 +152,7 @@ export default class SpotlightTable extends Mixins(TransactionMixin) {
   protected columns: Column[] = columns;
   protected usersWithIdentity: Row[] = [];
   protected toggleUsersWithIdentity = false;
+  protected currentPage = 0;
 
   async created() {
     this.isLoading = true
@@ -181,7 +192,34 @@ export default class SpotlightTable extends Mixins(TransactionMixin) {
       ? account.toString()
       : account || ''
   }
+
+  public goToRandomPage() {
+    const total = this.toggleUsersWithIdentity
+      ? this.usersWithIdentity.length
+      : this.data.length
+    const pageSize = Math.floor(total / 20)
+    let randomNumber = getRandomIntInRange(1, pageSize)
+    this.currentPage = randomNumber
+  }
 }
 </script>
 <style>
+ .magicBtn {
+    position: absolute;
+    right: 0;
+    border-width: 1px;
+ }
+ .level-right {
+   margin-right: 3rem;
+ }
+ @media only screen and (max-width: 768px) {
+  .magicBtn {
+    top: 4rem;
+    position: relative;
+  }
+  .level-right {
+    margin-left: 2rem;
+    margin-right: 0rem;
+  }
+}
 </style>
diff --git a/src/components/transfer/DonationButton.vue b/src/components/transfer/DonationButton.vue
@@ -2,9 +2,7 @@
   <b-button
     type="is-primary"
     icon-left="gift"
-    outlined
     @click="goToTransfer"
-    class="donation-btn"
   >
   </b-button>
 </template>
@@ -28,7 +26,4 @@ export default class DonationButton extends Vue {
 <style lang="scss" scoped>
 @import "@/styles/variables";
 
-.donation-btn {
-  margin-bottom: 1.5rem;
-}
 </style>
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
@@ -69,7 +69,7 @@
           :label="`Collections - ${totalCollections}`"
           value="collection"
         >
-          <Pagination replace :total="totalCollections" v-model="currentCollectionPage" />
+          <Pagination hasMagicBtn replace :total="totalCollections" v-model="currentCollectionPage" />
           <GalleryCardList
             :items="collections"
             type="collectionDetail"