removed negative margin

kodadot · Mar 28, 2023 · 9f4865d · 9f4865d
1 parent 2c9caa6
commit 9f4865d
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 121 deletions.
diff --git a/components/collection/activity/OwnerInsights.vue b/components/collection/activity/OwnerInsights.vue
@@ -14,7 +14,7 @@
         {{ $t('flippers') }}
       </div>
     </div>
-    <div class="py-4 px-5 limit-height is-scrollable">
+    <div class="py-4 limit-height is-scrollable">
       <HoldersTab v-if="activeTab === Tabs.holders" :owners="owners" />
       <FlippersTab v-if="activeTab === Tabs.flippers" :flippers="flippers" />
     </div>

diff --git a/components/collection/activity/events/eventRow/common.ts b/components/collection/activity/events/eventRow/common.ts
@@ -7,7 +7,7 @@ import {
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import { processSingleMetadata } from '@/utils/cachingStrategy'
 import { NFTMetadata } from '@/components/rmrk/service/scheme'
-import { mintInteraction } from '~~/composables/collectionActivity/helpers'
+import { mintInteraction } from '@/composables/collectionActivity/helpers'
 
 export const interactionNameMap = {
   BUY: 'Sale',

diff --git a/components/collection/activity/ownerInsightsTabs/FlipperTab.vue b/components/collection/activity/ownerInsightsTabs/FlipperTab.vue
@@ -8,60 +8,61 @@
       :key="flipperId"
       class="hide-last-hr">
       <div class="is-flex is-flex-direction-column gap">
-        <ProfileLink
-          :address="flipperId"
-          :avatar-size="35"
-          class="has-text-weight-bold" />
-        <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 has-text-grey">{{
-            $t('activity.owned')
-          }}</span>
-          <span>{{ owned }}</span>
-        </div>
-        <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 has-text-grey">{{
-            $t('activity.totalBought')
-          }}</span>
-          <Money :value="totalBought" />
-        </div>
-        <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 has-text-grey">{{
-            $t('activity.totalSold')
-          }}</span>
-          <Money :value="totalsold" />
-        </div>
-        <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 has-text-grey">{{
-            $t('activity.bestFlip')
-          }}</span>
-          <span
-            :class="{
-              'has-text-k-green': bestFlip > 0,
-              'has-text-k-red': bestFlip < 0,
-            }"
-            >{{ bestFlip === 0 ? '--' : `${format(bestFlip)}%` }}</span
-          >
-        </div>
-        <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 has-text-grey">{{
-            $t('activity.latestActivity')
-          }}</span>
-          <span class="no-wrap">{{ timeAgo(latestflipTimestamp) }}</span>
-        </div>
-        <div>
-          <div
-            class="is-size-7 has-text-k-blue is-clickable"
-            @click="toggleNFTDetails(flipperId)">
-            {{ $t('activity.nftDetails') }}
-            <NeoIcon
-              :icon="
-                isNFTDetailsOpen[flipperId] ? 'chevron-down' : 'chevron-right'
-              " />
+        <div class="px-5">
+          <ProfileLink
+            :address="flipperId"
+            :avatar-size="35"
+            class="has-text-weight-bold" />
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.owned')
+            }}</span>
+            <span>{{ owned }}</span>
           </div>
-
-          <div v-if="isNFTDetailsOpen[flipperId]">
-            <MoreNFTS :flips="flips" variant="Flippers" />
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.totalBought')
+            }}</span>
+            <Money :value="totalBought" />
           </div>
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.totalSold')
+            }}</span>
+            <Money :value="totalsold" />
+          </div>
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.bestFlip')
+            }}</span>
+            <span
+              :class="{
+                'has-text-k-green': bestFlip > 0,
+                'has-text-k-red': bestFlip < 0,
+              }"
+              >{{ bestFlip === 0 ? '--' : `${format(bestFlip)}%` }}</span
+            >
+          </div>
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.latestActivity')
+            }}</span>
+            <span class="no-wrap">{{ timeAgo(latestflipTimestamp) }}</span>
+          </div>
+          <div>
+            <div
+              class="is-size-7 has-text-k-blue is-clickable"
+              @click="toggleNFTDetails(flipperId)">
+              {{ $t('activity.nftDetails') }}
+              <NeoIcon
+                :icon="
+                  isNFTDetailsOpen[flipperId] ? 'chevron-down' : 'chevron-right'
+                " />
+            </div>
+          </div>
+        </div>
+        <div v-if="isNFTDetailsOpen[flipperId]">
+          <NFTsDetaislDropdown :flips="flips" variant="Flippers" />
         </div>
       </div>
       <hr class="my-3" />
@@ -75,7 +76,7 @@ import Money from '@/components/shared/format/ChainMoney.vue'
 import { NeoIcon } from '@kodadot1/brick'
 import { format } from '@/components/collection/activity/utils'
 
-import MoreNFTS from './NFTsDetaislDropdown.vue'
+import NFTsDetaislDropdown from './NFTsDetaislDropdown.vue'
 import { timeAgo } from '@/components/collection/utils/timeAgo'
 import { Flippers } from '@/composables/collectionActivity/types'
 

diff --git a/components/collection/activity/ownerInsightsTabs/HolderTab.vue b/components/collection/activity/ownerInsightsTabs/HolderTab.vue
@@ -1,51 +1,52 @@
 <template>
   <div>
-    <div
-      v-for="[holderId, holdings] in holders"
-      :key="holderId"
-      class="hide-last-hr">
+    <div v-for="[holderId, holdings] in holders" :key="holderId" class="">
       <div class="is-flex is-flex-direction-column gap">
-        <ProfileLink
-          :address="holderId"
-          :avatar-size="35"
-          class="has-text-weight-bold" />
-        <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 has-text-grey">{{
-            $t('activity.owned')
-          }}</span>
-          <span>{{ holdings.nftCount }}</span>
-        </div>
-        <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 has-text-grey">{{
-            $t('activity.totalBought')
-          }}</span>
-          <Money :value="holdings.totalBought" />
-        </div>
-        <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 has-text-grey">{{
-            $t('activity.totalSold')
-          }}</span>
-          <Money v-if="holdings.totalSold > 0" :value="holdings.totalSold" />
-          <span v-else>--</span>
-        </div>
-        <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 has-text-grey">{{ $t('activity.date') }}</span>
-          <span>{{ timeAgo(holdings.lastActivityTimestamp) }}</span>
-        </div>
-        <div>
-          <div
-            class="is-size-7 has-text-k-blue is-clickable"
-            @click="toggleNFTDetails(holderId)">
-            {{ $t('activity.nftDetails') }}
-            <NeoIcon
-              :icon="
-                isNFTDetailsOpen[holderId] ? 'chevron-down' : 'chevron-right'
-              " />
+        <div class="px-5">
+          <ProfileLink
+            :address="holderId"
+            :avatar-size="35"
+            class="has-text-weight-bold" />
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.owned')
+            }}</span>
+            <span>{{ holdings.nftCount }}</span>
           </div>
-
-          <div v-if="isNFTDetailsOpen[holderId]">
-            <MoreNFTS :holder-nfts="holdings.nfts" variant="Holders" />
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.totalBought')
+            }}</span>
+            <Money :value="holdings.totalBought" />
           </div>
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.totalSold')
+            }}</span>
+            <Money v-if="holdings.totalSold > 0" :value="holdings.totalSold" />
+            <span v-else>--</span>
+          </div>
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.date')
+            }}</span>
+            <span>{{ timeAgo(holdings.lastActivityTimestamp) }}</span>
+          </div>
+          <div>
+            <div
+              class="is-size-7 has-text-k-blue is-clickable"
+              @click="toggleNFTDetails(holderId)">
+              {{ $t('activity.nftDetails') }}
+              <NeoIcon
+                :icon="
+                  isNFTDetailsOpen[holderId] ? 'chevron-down' : 'chevron-right'
+                " />
+            </div>
+          </div>
+        </div>
+
+        <div v-if="isNFTDetailsOpen[holderId]">
+          <NFTsDetaislDropdown :holder-nfts="holdings.nfts" variant="Holders" />
         </div>
       </div>
       <hr class="my-3" />
@@ -59,7 +60,7 @@ import { Owners } from '@/composables/collectionActivity/types'
 import Money from '@/components/shared/format/ChainMoney.vue'
 import { NeoIcon } from '@kodadot1/brick'
 
-import MoreNFTS from './NFTsDetaislDropdown.vue'
+import NFTsDetaislDropdown from './NFTsDetaislDropdown.vue'
 import { timeAgo } from '@/components/collection/utils/timeAgo'
 
 const toggleNFTDetails = (flipperId: string) => {

diff --git a/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Flipper.vue b/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Flipper.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="ready" class="-mx-5">
+  <div v-if="ready" class="">
     <div
       v-for="{ avatar, boughtPrice, soldPrice, profit, nft } in flips"
       :key="nft.id"
@@ -11,7 +11,7 @@
           :alt="nft.name"
           width="40"
           height="40"
-          class="border mr-4" />
+          class="border mr-5" />
         <img v-else src="/placeholder.webp" class="border mr-5" />
         <span>{{ nft.name }}</span>
       </div>
@@ -83,9 +83,3 @@ const processNFTImages = async () => {
   }
 }
 </script>
-
-<style scoped lang="scss">
-.-mx-5 {
-  margin: 0 -1.5rem !important;
-}
-</style>
diff --git a/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Holder.vue b/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Holder.vue
@@ -1,18 +1,18 @@
 <template>
-  <div v-if="ready" class="-mx-5">
+  <div v-if="ready" class="">
     <div
       v-for="{ avatar, id, name, updatedAt } in nfts"
       :key="id"
       class="is-flex pt-2 px-5 is-justify-content-start is-hoverable">
-      <div class="mr-2rem">
+      <div class="mr-5">
         <img
           v-if="avatar"
           :src="avatar"
           :alt="name"
           width="40"
           height="40"
           class="border" />
-        <img v-else src="/placeholder.webp" class="border" />
+        <img v-else src="/placeholder.webp" class="border mr-5" />
       </div>
       <div class="is-flex is-flex-direction-column">
         {{ name }}
@@ -28,7 +28,7 @@
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import { processSingleMetadata } from '@/utils/cachingStrategy'
 import { NFTMetadata } from '@/components/rmrk/service/scheme'
-import { NFTExcludingEvents } from '@/components/collection/utils/types'
+import { NFTExcludingEvents } from '@/composables/collectionActivity/types'
 import { timeAgo } from '@/components/collection/utils/timeAgo'
 
 const props = defineProps<{
@@ -62,13 +62,3 @@ const processNFTImages = async () => {
   }
 }
 </script>
-
-<style scoped lang="scss">
-.mr-2rem {
-  margin-right: 2rem;
-}
-
-.-mx-5 {
-  margin: 0 -1.5rem !important;
-}
-</style>