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>
</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 -->
<a
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">
<template v-if="record.giver.profileImageUrl">
@@ -65,8 +65,8 @@
:profile-image-url="record.giver.profileImageUrl"
:class="[
!record.providerPlanName
? 'rounded-full size-12 sm:size-24 object-cover'
: 'rounded size-12 sm:size-24 object-cover',
? 'rounded-full size-[3rem] sm:size-[4rem] object-cover'
: 'rounded size-[3rem] sm:size-[4rem] object-cover',
]"
/>
</template>
@@ -76,14 +76,14 @@
<ProjectIcon
:entityId="record.providerPlanName"
: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>
<!-- Identicon for DIDs -->
<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"
class="rounded-full size-[3rem] sm:size-[4rem]"
alt="Identicon"
/>
</template>
@@ -91,12 +91,12 @@
<template v-else>
<fa
icon="person-circle-question"
class="text-slate-300 text-5xl sm:text-8xl"
class="text-slate-300 text-[3rem] sm:text-[4rem]"
/>
</template>
</template>
</div>
<div class="text-xs mt-2 line-clamp-2">
<div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
<fa
:icon="record.providerPlanName ? 'building' : 'user'"
class="fa-fw text-slate-400"
@@ -107,18 +107,20 @@
<!-- Arrow -->
<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
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>
<!-- Destination -->
<a
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">
<template v-if="record.receiver.profileImageUrl">
@@ -126,8 +128,8 @@
:profile-image-url="record.receiver.profileImageUrl"
:class="[
!record.recipientProjectName
? 'rounded-full size-12 sm:size-24 object-cover'
: 'rounded size-12 sm:size-24 object-cover',
? 'rounded-full size-[3rem] sm:size-[4rem] object-cover'
: 'rounded size-[3rem] sm:size-[4rem] object-cover',
]"
/>
</template>
@@ -137,14 +139,14 @@
<ProjectIcon
:entityId="record.recipientProjectName"
: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>
<!-- Identicon for DIDs -->
<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"
class="rounded-full size-[3rem] sm:size-[4rem]"
alt="Identicon"
/>
</template>
@@ -152,12 +154,12 @@
<template v-else>
<fa
icon="person-circle-question"
class="text-slate-300 text-5xl sm:text-8xl"
class="text-slate-300 text-[3rem] sm:text-[4rem]"
/>
</template>
</template>
</div>
<div class="text-xs mt-2 line-clamp-2">
<div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
<fa
:icon="record.recipientProjectName ? 'building' : 'user'"
class="fa-fw text-slate-400"