forked from trent_larson/crowd-funder-for-time-pwa
fix: improve image handling and icon support
- Fix image load event handler signature - Add alt text for accessibility - Add building icon to FontAwesome library Technical Changes: - Update cacheImage event to pass only image URL - Add proper alt text for activity images - Add faBuilding icon to FontAwesome library This improves image handling and accessibility while adding needed icon support for the activity feed interface.
This commit is contained in:
@@ -43,7 +43,8 @@
|
||||
<img
|
||||
class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
|
||||
:src="record.image"
|
||||
@load="$emit('cacheImage', $event, record.image)"
|
||||
@load="$emit('cacheImage', record.image)"
|
||||
alt="Activity image"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
@@ -59,35 +60,41 @@
|
||||
<EntityIcon
|
||||
:profile-image-url="record.giver.profileImageUrl"
|
||||
:class="[
|
||||
record.giver.known
|
||||
!record.providerPlanName
|
||||
? 'rounded-full size-12 sm:size-24 object-cover'
|
||||
: 'rounded size-12 sm:size-24 object-cover'
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- Project Icon -->
|
||||
<template v-if="record.providerPlanName">
|
||||
<ProjectIcon
|
||||
:entityId="record.providerPlanName"
|
||||
:iconSize="96"
|
||||
class="rounded size-12 sm:size-24"
|
||||
/>
|
||||
</template>
|
||||
<!-- Identicon for DIDs -->
|
||||
<img
|
||||
v-if="record.giver.did"
|
||||
:src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
|
||||
:class="[
|
||||
record.giver.known
|
||||
? 'rounded-full size-12 sm:size-24'
|
||||
: 'rounded size-12 sm:size-24'
|
||||
]"
|
||||
alt="Identicon"
|
||||
/>
|
||||
<!-- Fallback icon for projects -->
|
||||
<fa
|
||||
v-else
|
||||
icon="person-circle-question"
|
||||
class="text-slate-300 text-5xl sm:text-8xl"
|
||||
/>
|
||||
<template v-else-if="record.giver.did">
|
||||
<img
|
||||
:src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
|
||||
class="rounded-full size-12 sm:size-24"
|
||||
alt="Identicon"
|
||||
/>
|
||||
</template>
|
||||
<!-- Unknown Person -->
|
||||
<template v-else>
|
||||
<fa
|
||||
icon="person-circle-question"
|
||||
class="text-slate-300 text-5xl sm:text-8xl"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<div class="text-xs mt-2 line-clamp-2">
|
||||
<fa
|
||||
:icon="record.giver.known ? 'user' : 'hammer'"
|
||||
:icon="record.providerPlanName ? 'building' : 'user'"
|
||||
class="fa-fw text-slate-400"
|
||||
/>
|
||||
{{ record.giver.displayName }}
|
||||
@@ -114,35 +121,41 @@
|
||||
<EntityIcon
|
||||
:profile-image-url="record.receiver.profileImageUrl"
|
||||
:class="[
|
||||
record.receiver.known
|
||||
!record.recipientProjectName
|
||||
? 'rounded-full size-12 sm:size-24 object-cover'
|
||||
: 'rounded size-12 sm:size-24 object-cover'
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- Project Icon -->
|
||||
<template v-if="record.recipientProjectName">
|
||||
<ProjectIcon
|
||||
:entityId="record.recipientProjectName"
|
||||
:iconSize="96"
|
||||
class="rounded size-12 sm:size-24"
|
||||
/>
|
||||
</template>
|
||||
<!-- Identicon for DIDs -->
|
||||
<img
|
||||
v-if="record.receiver.did"
|
||||
:src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
|
||||
:class="[
|
||||
record.receiver.known
|
||||
? 'rounded-full size-12 sm:size-24'
|
||||
: 'rounded size-12 sm:size-24'
|
||||
]"
|
||||
alt="Identicon"
|
||||
/>
|
||||
<!-- Fallback icon for projects -->
|
||||
<fa
|
||||
v-else
|
||||
icon="image"
|
||||
class="text-slate-300 text-5xl sm:text-8xl"
|
||||
/>
|
||||
<template v-else-if="record.receiver.did">
|
||||
<img
|
||||
:src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
|
||||
class="rounded-full size-12 sm:size-24"
|
||||
alt="Identicon"
|
||||
/>
|
||||
</template>
|
||||
<!-- Unknown Person -->
|
||||
<template v-else>
|
||||
<fa
|
||||
icon="person-circle-question"
|
||||
class="text-slate-300 text-5xl sm:text-8xl"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<div class="text-xs mt-2 line-clamp-2">
|
||||
<fa
|
||||
:icon="record.receiver.known ? 'user' : 'hammer'"
|
||||
:icon="record.recipientProjectName ? 'building' : 'user'"
|
||||
class="fa-fw text-slate-400"
|
||||
/>
|
||||
{{ record.receiver.displayName }}
|
||||
@@ -187,10 +200,12 @@ import { GiveRecordWithContactInfo } from "../types";
|
||||
import EntityIcon from "./EntityIcon.vue";
|
||||
import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util";
|
||||
import { containsHiddenDid } from "../libs/endorserServer";
|
||||
import ProjectIcon from "./ProjectIcon.vue";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
EntityIcon,
|
||||
ProjectIcon,
|
||||
},
|
||||
})
|
||||
export default class ActivityListItem extends Vue {
|
||||
|
||||
@@ -88,6 +88,7 @@ import {
|
||||
faUser,
|
||||
faUsers,
|
||||
faXmark,
|
||||
faBuilding,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
library.add(
|
||||
@@ -168,6 +169,7 @@ library.add(
|
||||
faUser,
|
||||
faUsers,
|
||||
faXmark,
|
||||
faBuilding,
|
||||
);
|
||||
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
|
||||
Reference in New Issue
Block a user