fix: Activity event improvements

components/collection/activity/events/Events.vue

@@ -1,11 +1,11 @@
 <template>
  <div ref="eventsContainer">
  <div v-if="events.length > 0">
- <div v-if="desktop" class="columns is-size-7 has-text-grey">
+ <div v-if="desktop" class="columns is-1 is-size-7 has-text-grey">
  <div class="column">
  <span>{{ $t('activity.event.item') }}</span>
  </div>
- <div class="column">
+ <div class="is-flex is-align-items-center fixed-width-100px">
  <span>{{ $t('activity.event.event') }}</span>
  </div>
  <div class="column">
@@ -121,3 +121,8 @@ const handleIntersection = (entries: IntersectionObserverEntry[]) => {
 const sentinel = ref<HTMLDivElement | null>(null)
 useIntersectionObserver(sentinel, handleIntersection, { threshold: 0.66 })
 </script>
+<style scoped lang="scss">
+.fixed-width-100px {
+ width: 100px;
+}
+</style>

components/collection/activity/events/eventRow/EventRowAvatar.vue

@@ -3,25 +3,29 @@
  v-if="avatar"
  :src="avatar"
  :alt="name"
- width="50"
- height="50"
  class="border image-size"
+ :style="customStyle"
  @error="onError" />
  <img
  v-else
  :src="placeholder"
- class="border image-size"
- width="50"
- height="50" />
+ :style="customStyle"
+ class="border image-size" />
 </template>
 
 <script setup lang="ts">
 const { placeholder } = useTheme()
-defineProps<{
+const props = defineProps<{
  avatar?: string
  name: string
+ size: number
 }>()
 
+const customStyle = computed(() => ({
+ width: `${props.size}px`,
+ height: `${props.size}px`,
+}))
+
 const onError = (e: Event) => {
  const target = e.target as HTMLImageElement
  if (target) {
@@ -32,8 +36,6 @@ const onError = (e: Event) => {
 
 <style scoped lang="scss">
 .image-size {
- width: 50px !important;
- height: 50px !important;
  max-width: none !important;
 }
 </style>

components/collection/activity/events/eventRow/EventRowDesktop.vue

@@ -1,21 +1,23 @@
 <template>
- <div class="columns mb-2">
- <div class="column">
+ <div class="columns mb-2 is-1">
+ <div class="column is-overflow-hidden">
  <div class="is-flex is-align-items-center">
  <nuxt-link
  :to="`/${urlPrefix}/gallery/${event.nft.id}`"
  class="height-50px">
- <EventRowAvatar :avatar="avatar" :name="event.nft.name" />
+ <EventRowAvatar :avatar="avatar" :name="event.nft.name" :size="50" />
  </nuxt-link>
- <nuxt-link :to="`/${urlPrefix}/gallery/${event.nft.id}`">
- <div class="ml-5 has-text-weight-bold is-clipped elipsis">
+ <nuxt-link
+ class="is-ellipsis is-inline-block"
+ :to="`/${urlPrefix}/gallery/${event.nft.id}`">
+ <span class="ml-5 has-text-weight-bold is-clipped">
  {{ event.nft.name }}
- </div>
+ </span>
  </nuxt-link>
  </div>
  </div>
 
- <div class="column">
+ <div class="is-flex is-align-items-center fixed-width-100px">
  <div class="height-50px is-flex is-align-items-center">
  <div
  class="border is-size-7 is-justify-content-center py-1 my-2 is-flex is-align-items-center fixed-width fixed-height"
@@ -117,14 +119,16 @@ const getAvatar = async () => {
 .fixed-width {
  width: 66px;
 }
+.fixed-width-100px {
+ width: 100px;
+}
+.is-overflow-hidden {
+ overflow: hidden;
+}
 .fixed-height {
  height: 22px;
 }
 .height-50px {
  height: 50px;
 }
-
-.elipsis {
- text-overflow: ellipsis;
-}
 </style>

components/collection/activity/events/eventRow/EventRowTablet.vue

@@ -1,59 +1,51 @@
 <template>
- <div class="mb-5">
- <div class="is-flex height-50px line-height-1">
+ <div class="mb-6 is-flex is-flex-direction-column gap-10px">
+ <div class="is-flex height-70px line-height-1">
  <nuxt-link :to="`/${urlPrefix}/gallery/${event.nft.id}`">
  <div class="mr-5">
- <EventRowAvatar :avatar="avatar" :name="event.nft.name" />
+ <EventRowAvatar :avatar="avatar" :name="event.nft.name" :size="70" />
  </div>
  </nuxt-link>
  <div
- class="is-flex is-flex-direction-column is-flex-grow-1 is-justify-content-space-between">
- <div class="is-flex is-justify-content-space-between">
- <nuxt-link :to="`/${urlPrefix}/gallery/${event.nft.id}`">
- <div class="has-text-weight-bold is-clipped elipsis">
- {{ event.nft.name }}
- </div>
- </nuxt-link>
- <CommonTokenMoney v-if="amount !== blank" :value="amount" />
- </div>
- <div
- class="is-flex is-justify-content-space-between is-align-items-center">
- <div
- class="border is-size-7 is-justify-content-center py-1 is-flex is-align-items-center fixed-width fixed-height"
- :class="getInteractionColor(event.interaction)">
- {{ interactionName }}
- </div>
- <div>
- {{ timeAgo(event.timestamp) }}
+ class="is-flex is-flex-direction-column is-justify-content-center gap-10px is-flex-grow-1">
+ <nuxt-link :to="`/${urlPrefix}/gallery/${event.nft.id}`">
+ <div class="has-text-weight-bold is-clipped elipsis">
+ {{ event.nft.name }}
  </div>
+ </nuxt-link>
+
+ <div
+ class="border is-size-7 is-justify-content-center is-flex is-align-items-center fixed-width fixed-height"
+ :class="getInteractionColor(event.interaction)">
+ {{ interactionName }}
  </div>
  </div>
  </div>
- <div class="is-flex mt-4 gap">
- <div class="is-flex is-align-items-center">
+ <div class="is-flex">
+ <div class="is-flex is-justify-content-space-between is-flex-grow-1">
+ <CommonTokenMoney v-if="amount !== blank" :value="amount" />
+ <span v-else>
+ {{ blank }}
+ </span>
+ <span>
+ {{ timeAgo(event.timestamp) }}
+ </span>
+ </div>
+ </div>
+
+ <div class="is-flex gap">
+ <div v-if="fromAddress !== blank" class="is-flex is-align-items-center">
  <span class="is-size-7 mr-3">{{ $t('activity.event.from') }}:</span>
- <nuxt-link
- v-if="fromAddress !== blank"
- :to="`/${urlPrefix}/u/${fromAddress}`"
- class="has-text-link">
+ <nuxt-link :to="`/${urlPrefix}/u/${fromAddress}`" class="has-text-link">
  <IdentityIndex ref="identity" :address="fromAddress" show-clipboard />
  </nuxt-link>
- <div v-else>
- {{ blank }}
- </div>
  </div>
 
- <div class="is-flex is-align-items-center">
+ <div v-if="toAddress !== blank" class="is-flex is-align-items-center">
  <span class="is-size-7 mr-3">{{ $t('activity.event.to') }}:</span>
- <nuxt-link
- v-if="toAddress !== blank"
- :to="`/${urlPrefix}/u/${toAddress}`"
- class="has-text-link">
+ <nuxt-link :to="`/${urlPrefix}/u/${toAddress}`" class="has-text-link">
  <IdentityIndex ref="identity" :address="toAddress" show-clipboard />
  </nuxt-link>
- <div v-else>
- {{ blank }}
- </div>
  </div>
  </div>
  </div>
@@ -111,13 +103,17 @@ const getAvatar = async () => {
 .fixed-height {
  height: 22px;
 }
-.height-50px {
- height: 50px;
+.height-70px {
+ height: 70px;
 }
 .line-height-1 {
  line-height: 1;
 }
 
+.gap-10px {
+ gap: 10px;
+}
+
 .gap {
  gap: 1rem;
 }