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

Homeview activity card design tweaks

Browse Source
This commit is contained in:
Jose Olarte III
2025-03-27 00:02:43 +08:00
parent 0cdbb76005
commit e5545fd56e
1 changed files with 29 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/ActivityListItem.vue
View File

@@ -10,8 +10,10 @@
</span> </span>
</div> </div>
<div class="bg-slate-100 rounded-t-md border border-slate-300 p-3 sm:p-4"> <div
<div class="flex items-center gap-2 mb-6"> class="flex items-center justify-between gap-2 text-lg bg-slate-200 border border-slate-300 border-b-0 rounded-t-md px-3 sm:px-4 py-1 sm:py-2"
>
<div class="flex items-center gap-2">
<div v-if="record.issuerDid"> <div v-if="record.issuerDid">
<EntityIcon <EntityIcon
:entity-id="record.issuerDid" :entity-id="record.issuerDid"
@@ -35,10 +37,16 @@
</div> </div>
</div> </div>
<a class="cursor-pointer" @click="$emit('loadClaim', record.jwtId)">
<font-awesome icon="circle-info" class="fa-fw text-slate-500" />
</a>
</div>
<div class="bg-slate-100 rounded-b-md border border-slate-300 p-3 sm:p-4">
<!-- Record Image --> <!-- Record Image -->
<div <div
v-if="record.image" v-if="record.image"
class="bg-cover mb-6 -mx-3 sm:-mx-4" class="bg-cover mb-6 -mt-3 sm:-mt-4 -mx-3 sm:-mx-4"
:style="`background-image: url(${record.image});`" :style="`background-image: url(${record.image});`"
> >
<a <a
@@ -86,8 +94,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2"> <div
<div v-if="record.providerPlanName || record.giver.known"> v-if="record.providerPlanName || record.giver.known"
class="text-xs mt-2 line-clamp-3 sm:line-clamp-2"
>
<font-awesome <font-awesome
:icon="record.providerPlanName ? 'users' : 'user'" :icon="record.providerPlanName ? 'users' : 'user'"
class="fa-fw text-slate-400" class="fa-fw text-slate-400"
@@ -95,7 +105,6 @@
{{ record.providerPlanName || record.giver.displayName }} {{ record.providerPlanName || record.giver.displayName }}
</div> </div>
</div> </div>
</div>
<!-- Arrow --> <!-- Arrow -->
<div <div
@@ -147,8 +156,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2"> <div
<div v-if="record.recipientProjectName || record.receiver.known"> v-if="record.recipientProjectName || record.receiver.known"
class="text-xs mt-2 line-clamp-3 sm:line-clamp-2"
>
<font-awesome <font-awesome
:icon="record.recipientProjectName ? 'users' : 'user'" :icon="record.recipientProjectName ? 'users' : 'user'"
class="fa-fw text-slate-400" class="fa-fw text-slate-400"
@@ -157,7 +168,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Description --> <!-- Description -->
<p class="font-medium"> <p class="font-medium">
@@ -166,14 +176,6 @@
</a> </a>
</p> </p>
</div> </div>
<div
class="flex items-center gap-2 text-lg bg-slate-300 rounded-b-md px-3 sm:px-4 py-1 sm:py-2"
>
<a class="cursor-pointer" @click="$emit('loadClaim', record.jwtId)">
<font-awesome icon="circle-info" class="fa-fw text-slate-500" />
</a>
</div>
</li> </li>
</template> </template>