feat(activities): drop image placeholder when an event has no image
Cards without an image no longer render the solid-color 16:9 placeholder + calendar glyph. They go straight to the content area with the badges (category, price, Yours, status, Past) shown inline in a small row at the top, so the title and details aren't pushed below a meaningless filler block. The placeholderBg computed (hash → HSL) is removed; it was only feeding the deleted no-image branch.
This commit is contained in:
parent
ce7f062760
commit
ea1e408801
1 changed files with 37 additions and 17 deletions
|
|
@ -52,13 +52,6 @@ const priceDisplay = computed(() => {
|
||||||
return `${info.price} ${info.currency}`
|
return `${info.price} ${info.currency}`
|
||||||
})
|
})
|
||||||
|
|
||||||
const placeholderBg = computed(() => {
|
|
||||||
// Generate a consistent hue from the activity title
|
|
||||||
const hash = props.activity.title.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
|
|
||||||
const hue = hash % 360
|
|
||||||
return `hsl(${hue}, 40%, 85%)`
|
|
||||||
})
|
|
||||||
|
|
||||||
const isPast = computed(() => {
|
const isPast = computed(() => {
|
||||||
const a = props.activity
|
const a = props.activity
|
||||||
const end = a.endDate ?? a.startDate
|
const end = a.endDate ?? a.startDate
|
||||||
|
|
@ -72,22 +65,18 @@ const isPast = computed(() => {
|
||||||
class="overflow-hidden cursor-pointer hover:shadow-lg transition-shadow duration-200 flex flex-col"
|
class="overflow-hidden cursor-pointer hover:shadow-lg transition-shadow duration-200 flex flex-col"
|
||||||
@click="emit('click', activity)"
|
@click="emit('click', activity)"
|
||||||
>
|
>
|
||||||
<!-- Image / Placeholder -->
|
<!-- Image with overlaid badges. Cards without an image skip the
|
||||||
<div class="relative aspect-[16/9] overflow-hidden">
|
hero area entirely and surface their badges inline at the top
|
||||||
|
of the content block — the solid-color placeholder + calendar
|
||||||
|
glyph wasn't communicating anything the title + details don't
|
||||||
|
already. -->
|
||||||
|
<div v-if="activity.image" class="relative aspect-[16/9] overflow-hidden">
|
||||||
<img
|
<img
|
||||||
v-if="activity.image"
|
|
||||||
:src="activity.image"
|
:src="activity.image"
|
||||||
:alt="activity.title"
|
:alt="activity.title"
|
||||||
class="w-full h-full object-cover"
|
class="w-full h-full object-cover"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
/>
|
/>
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
class="w-full h-full flex items-center justify-center"
|
|
||||||
:style="{ backgroundColor: placeholderBg }"
|
|
||||||
>
|
|
||||||
<Calendar class="w-12 h-12 text-foreground/20" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Category badge -->
|
<!-- Category badge -->
|
||||||
<Badge
|
<Badge
|
||||||
|
|
@ -147,6 +136,37 @@ const isPast = computed(() => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<CardContent class="p-4 flex-1 flex flex-col gap-2">
|
<CardContent class="p-4 flex-1 flex flex-col gap-2">
|
||||||
|
<!-- Inline badge row (no-image variant). Same badges as the
|
||||||
|
image-overlay set, just stacked horizontally at the top of
|
||||||
|
the content area. -->
|
||||||
|
<div v-if="!activity.image" class="flex flex-wrap items-center gap-1.5">
|
||||||
|
<Badge v-if="categoryLabel" variant="secondary" class="text-xs">
|
||||||
|
{{ categoryLabel }}
|
||||||
|
</Badge>
|
||||||
|
<Badge v-if="priceDisplay" class="text-xs">
|
||||||
|
{{ priceDisplay }}
|
||||||
|
</Badge>
|
||||||
|
<Badge v-if="activity.isMine" variant="outline" class="text-xs gap-1">
|
||||||
|
<User class="w-3 h-3" />
|
||||||
|
Yours
|
||||||
|
</Badge>
|
||||||
|
<Badge
|
||||||
|
v-if="activity.lnbitsStatus && activity.lnbitsStatus !== 'approved'"
|
||||||
|
:variant="activity.lnbitsStatus === 'rejected' ? 'destructive' : 'secondary'"
|
||||||
|
class="text-xs capitalize"
|
||||||
|
>
|
||||||
|
{{ activity.lnbitsStatus === 'rejected' ? 'Rejected' : 'Pending review' }}
|
||||||
|
</Badge>
|
||||||
|
<Badge
|
||||||
|
v-if="isPast && !(activity.lnbitsStatus && activity.lnbitsStatus !== 'approved')"
|
||||||
|
variant="outline"
|
||||||
|
class="text-xs gap-1"
|
||||||
|
>
|
||||||
|
<History class="w-3 h-3" />
|
||||||
|
{{ t('activities.filters.past', 'Past') }}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Title + Bookmark -->
|
<!-- Title + Bookmark -->
|
||||||
<div class="flex items-start gap-1">
|
<div class="flex items-start gap-1">
|
||||||
<h3 class="font-semibold text-foreground line-clamp-2 leading-tight flex-1">
|
<h3 class="font-semibold text-foreground line-clamp-2 leading-tight flex-1">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue