Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Activity event improvements #5801

Merged
merged 5 commits into from
Apr 27, 2023
Merged

fix: Activity event improvements #5801

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e83d93e
fix: Activity event improvements
Jarsen136 Apr 24, 2023
a98fdce
fix: columns styles
Jarsen136 Apr 25, 2023
99961cd
feat: NeoAvatar component
Jarsen136 Apr 25, 2023
32aa491
fix: deep scan issue
Jarsen136 Apr 25, 2023
90af86d
fix: placeholder image
Jarsen136 Apr 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions components/collection/activity/events/Events.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Jarsen136 marked this conversation as resolved.
Show resolved Hide resolved
<span>{{ $t('activity.event.event') }}</span>
</div>
<div class="column">
Expand Down Expand Up @@ -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>
18 changes: 10 additions & 8 deletions components/collection/activity/events/eventRow/EventRowAvatar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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>
26 changes: 15 additions & 11 deletions components/collection/activity/events/eventRow/EventRowDesktop.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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>
76 changes: 36 additions & 40 deletions components/collection/activity/events/eventRow/EventRowTablet.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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;
}
Expand Down