trentlarson/crowd-funder-from-jason
1
0
Fork 0
forked from jsnbuchanan/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

fix: improve image handling and icon support

Browse Source 
- 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:
Matthew Raymer
2025-03-07 12:58:14 +00:00
parent 3168416bfa
commit 66df9234fa
2 changed files with 54 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/ActivityListItem.vue
View File

@@ -43,7 +43,8 @@
<img <img
class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md" class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
:src="record.image" :src="record.image"
@load="$emit('cacheImage', $event, record.image)" @load="$emit('cacheImage', record.image)"
alt="Activity image"
/> />
</a> </a>
</div> </div>
@@ -59,35 +60,41 @@
<EntityIcon <EntityIcon
:profile-image-url="record.giver.profileImageUrl" :profile-image-url="record.giver.profileImageUrl"
:class="[ :class="[
record.giver.known !record.providerPlanName
? 'rounded-full size-12 sm:size-24 object-cover' ? 'rounded-full size-12 sm:size-24 object-cover'
: 'rounded size-12 sm:size-24 object-cover' : 'rounded size-12 sm:size-24 object-cover'
]" ]"
/> />
</template> </template>
<template v-else> <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 --> <!-- Identicon for DIDs -->
<img <template v-else-if="record.giver.did">
v-if="record.giver.did" <img
:src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`" :src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
:class="[ class="rounded-full size-12 sm:size-24"
record.giver.known alt="Identicon"
? 'rounded-full size-12 sm:size-24' />
: 'rounded size-12 sm:size-24' </template>
]" <!-- Unknown Person -->
alt="Identicon" <template v-else>
/> <fa
<!-- Fallback icon for projects --> icon="person-circle-question"
<fa class="text-slate-300 text-5xl sm:text-8xl"
v-else />
icon="person-circle-question" </template>
class="text-slate-300 text-5xl sm:text-8xl"
/>
</template> </template>
</div> </div>
<div class="text-xs mt-2 line-clamp-2"> <div class="text-xs mt-2 line-clamp-2">
<fa <fa
:icon="record.giver.known ? 'user' : 'hammer'" :icon="record.providerPlanName ? 'building' : 'user'"
class="fa-fw text-slate-400" class="fa-fw text-slate-400"
/> />
{{ record.giver.displayName }} {{ record.giver.displayName }}
@@ -114,35 +121,41 @@
<EntityIcon <EntityIcon
:profile-image-url="record.receiver.profileImageUrl" :profile-image-url="record.receiver.profileImageUrl"
:class="[ :class="[
record.receiver.known !record.recipientProjectName
? 'rounded-full size-12 sm:size-24 object-cover' ? 'rounded-full size-12 sm:size-24 object-cover'
: 'rounded size-12 sm:size-24 object-cover' : 'rounded size-12 sm:size-24 object-cover'
]" ]"
/> />
</template> </template>
<template v-else> <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 --> <!-- Identicon for DIDs -->
<img <template v-else-if="record.receiver.did">
v-if="record.receiver.did" <img
:src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`" :src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
:class="[ class="rounded-full size-12 sm:size-24"
record.receiver.known alt="Identicon"
? 'rounded-full size-12 sm:size-24' />
: 'rounded size-12 sm:size-24' </template>
]" <!-- Unknown Person -->
alt="Identicon" <template v-else>
/> <fa
<!-- Fallback icon for projects --> icon="person-circle-question"
<fa class="text-slate-300 text-5xl sm:text-8xl"
v-else />
icon="image" </template>
class="text-slate-300 text-5xl sm:text-8xl"
/>
</template> </template>
</div> </div>
<div class="text-xs mt-2 line-clamp-2"> <div class="text-xs mt-2 line-clamp-2">
<fa <fa
:icon="record.receiver.known ? 'user' : 'hammer'" :icon="record.recipientProjectName ? 'building' : 'user'"
class="fa-fw text-slate-400" class="fa-fw text-slate-400"
/> />
{{ record.receiver.displayName }} {{ record.receiver.displayName }}
@@ -187,10 +200,12 @@ import { GiveRecordWithContactInfo } from "../types";
import EntityIcon from "./EntityIcon.vue"; import EntityIcon from "./EntityIcon.vue";
import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util"; import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util";
import { containsHiddenDid } from "../libs/endorserServer"; import { containsHiddenDid } from "../libs/endorserServer";
import ProjectIcon from "./ProjectIcon.vue";
@Component({ @Component({
components: { components: {
EntityIcon, EntityIcon,
ProjectIcon,
}, },
}) })
export default class ActivityListItem extends Vue { export default class ActivityListItem extends Vue {

2
src/main.ts
View File

@@ -88,6 +88,7 @@ import {
faUser, faUser,
faUsers, faUsers,
faXmark, faXmark,
faBuilding,
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
library.add( library.add(
@@ -168,6 +169,7 @@ library.add(
faUser, faUser,
faUsers, faUsers,
faXmark, faXmark,
faBuilding,
); );
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";