trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 22 Releases 5 Wiki Activity

Source-destination compacted

Browse Source 
- Narrower max-width
- Element sizes adjusted
- Switched to a more controllable unit for widths and heights
This commit is contained in:
Jose Olarte III
2025-03-17 21:03:58 +08:00
parent 96da4f6aec
commit c0fc6909ab
1 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/ActivityListItem.vue
View File

@@ -53,11 +53,11 @@
</a> </a>
</div> </div>
<div class="relative flex justify-between gap-4 mb-5"> <div class="relative flex justify-between gap-4 max-w-lg mx-auto mb-5">
<!-- Source --> <!-- Source -->
<a <a
href="" href=""
class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3" class="w-28 sm:w-40 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
> >
<div class="relative w-fit mx-auto"> <div class="relative w-fit mx-auto">
<template v-if="record.giver.profileImageUrl"> <template v-if="record.giver.profileImageUrl">
@@ -65,8 +65,8 @@
:profile-image-url="record.giver.profileImageUrl" :profile-image-url="record.giver.profileImageUrl"
:class="[ :class="[
!record.providerPlanName !record.providerPlanName
? 'rounded-full size-12 sm:size-24 object-cover' ? 'rounded-full size-[3rem] sm:size-[4rem] object-cover'
: 'rounded size-12 sm:size-24 object-cover', : 'rounded size-[3rem] sm:size-[4rem] object-cover',
]" ]"
/> />
</template> </template>
@@ -76,14 +76,14 @@
<ProjectIcon <ProjectIcon
:entityId="record.providerPlanName" :entityId="record.providerPlanName"
:iconSize="48" :iconSize="48"
class="rounded size-12 sm:size-24 *:w-full *:h-full" class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
/> />
</template> </template>
<!-- Identicon for DIDs --> <!-- Identicon for DIDs -->
<template v-else-if="record.giver.did"> <template v-else-if="record.giver.did">
<img <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="rounded-full size-12 sm:size-24" class="rounded-full size-[3rem] sm:size-[4rem]"
alt="Identicon" alt="Identicon"
/> />
</template> </template>
@@ -91,12 +91,12 @@
<template v-else> <template v-else>
<fa <fa
icon="person-circle-question" icon="person-circle-question"
class="text-slate-300 text-5xl sm:text-8xl" class="text-slate-300 text-[3rem] sm:text-[4rem]"
/> />
</template> </template>
</template> </template>
</div> </div>
<div class="text-xs mt-2 line-clamp-2"> <div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
<fa <fa
:icon="record.providerPlanName ? 'building' : 'user'" :icon="record.providerPlanName ? 'building' : 'user'"
class="fa-fw text-slate-400" class="fa-fw text-slate-400"
@@ -107,18 +107,20 @@
<!-- Arrow --> <!-- Arrow -->
<div <div
class="absolute inset-28 sm:inset-x-48 mx-4 sm:mx-8 top-1/2 flex items-center" class="absolute inset-28 sm:inset-x-40 mx-2 top-1/2 flex items-center"
> >
<hr class="grow border-t-[25px] border-slate-300" /> <hr
class="grow border-t-[18px] sm:border-t-[24px] border-slate-300"
/>
<div <div
class="shrink-0 w-0 h-0 border border-slate-300 border-t-[30px] border-t-transparent border-b-[30px] border-b-transparent border-s-[40px] border-e-0" class="shrink-0 w-0 h-0 border border-slate-300 border-t-[20px] sm:border-t-[30px] border-t-transparent border-b-[20px] sm:border-b-[30px] border-b-transparent border-s-[27px] sm:border-s-[40px] border-e-0"
></div> ></div>
</div> </div>
<!-- Destination --> <!-- Destination -->
<a <a
href="" href=""
class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3" class="w-28 sm:w-40 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
> >
<div class="relative w-fit mx-auto"> <div class="relative w-fit mx-auto">
<template v-if="record.receiver.profileImageUrl"> <template v-if="record.receiver.profileImageUrl">
@@ -126,8 +128,8 @@
:profile-image-url="record.receiver.profileImageUrl" :profile-image-url="record.receiver.profileImageUrl"
:class="[ :class="[
!record.recipientProjectName !record.recipientProjectName
? 'rounded-full size-12 sm:size-24 object-cover' ? 'rounded-full size-[3rem] sm:size-[4rem] object-cover'
: 'rounded size-12 sm:size-24 object-cover', : 'rounded size-[3rem] sm:size-[4rem] object-cover',
]" ]"
/> />
</template> </template>
@@ -137,14 +139,14 @@
<ProjectIcon <ProjectIcon
:entityId="record.recipientProjectName" :entityId="record.recipientProjectName"
:iconSize="48" :iconSize="48"
class="rounded size-12 sm:size-24 *:w-full *:h-full" class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
/> />
</template> </template>
<!-- Identicon for DIDs --> <!-- Identicon for DIDs -->
<template v-else-if="record.receiver.did"> <template v-else-if="record.receiver.did">
<img <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="rounded-full size-12 sm:size-24" class="rounded-full size-[3rem] sm:size-[4rem]"
alt="Identicon" alt="Identicon"
/> />
</template> </template>
@@ -152,12 +154,12 @@
<template v-else> <template v-else>
<fa <fa
icon="person-circle-question" icon="person-circle-question"
class="text-slate-300 text-5xl sm:text-8xl" class="text-slate-300 text-[3rem] sm:text-[4rem]"
/> />
</template> </template>
</template> </template>
</div> </div>
<div class="text-xs mt-2 line-clamp-2"> <div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
<fa <fa
:icon="record.recipientProjectName ? 'building' : 'user'" :icon="record.recipientProjectName ? 'building' : 'user'"
class="fa-fw text-slate-400" class="fa-fw text-slate-400"