forked from trent_larson/crowd-funder-for-time-pwa
Optimized per-item layout
- Stacked contact name and DID - Text truncates to leave room for action buttons when visible - Separated "from / to" heading from buttons to minimize width - Various spacing and alignment adjustments
This commit is contained in:
Jose Olarte III
@@ -174,125 +174,127 @@
|
|||||||
class="border-b border-slate-300 pt-1 pb-1"
|
class="border-b border-slate-300 pt-1 pb-1"
|
||||||
data-testId="contactListItem"
|
data-testId="contactListItem"
|
||||||
>
|
>
|
||||||
<div class="grow overflow-hidden">
|
<div class="flex items-center justify-between gap-3">
|
||||||
<div class="flex items-center justify-between gap-3">
|
<div class="flex overflow-hidden min-w-0 items-center gap-3">
|
||||||
<div class="flex items-center gap-3">
|
<input
|
||||||
<input
|
v-if="!showGiveNumbers"
|
||||||
v-if="!showGiveNumbers"
|
type="checkbox"
|
||||||
type="checkbox"
|
:checked="contactsSelected.includes(contact.did)"
|
||||||
:checked="contactsSelected.includes(contact.did)"
|
class="ml-2 h-6 w-6 flex-shrink-0"
|
||||||
class="ml-2 h-6 w-6 flex-shrink-0"
|
data-testId="contactCheckOne"
|
||||||
data-testId="contactCheckOne"
|
@click="
|
||||||
@click="
|
contactsSelected.includes(contact.did)
|
||||||
contactsSelected.includes(contact.did)
|
? contactsSelected.splice(
|
||||||
? contactsSelected.splice(
|
contactsSelected.indexOf(contact.did),
|
||||||
contactsSelected.indexOf(contact.did),
|
1,
|
||||||
1,
|
)
|
||||||
)
|
: contactsSelected.push(contact.did)
|
||||||
: contactsSelected.push(contact.did)
|
"
|
||||||
"
|
/>
|
||||||
/>
|
|
||||||
|
|
||||||
<div
|
<EntityIcon
|
||||||
class="flex-shrink-0 w-12 h-12 flex items-center justify-center"
|
:contact="contact"
|
||||||
>
|
:icon-size="48"
|
||||||
<EntityIcon
|
class="shrink-0 align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
|
||||||
:contact="contact"
|
@click="showLargeIdenticon = contact"
|
||||||
:icon-size="48"
|
/>
|
||||||
class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
|
|
||||||
@click="showLargeIdenticon = contact"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 class="text-base font-semibold w-1/3 truncate flex-shrink-0">
|
<div class="overflow-hidden">
|
||||||
{{ contactNameNonBreakingSpace(contact.name) }}
|
<h2 class="text-base font-semibold truncate">
|
||||||
|
<router-link
|
||||||
|
:to="{
|
||||||
|
path: '/did/' + encodeURIComponent(contact.did),
|
||||||
|
}"
|
||||||
|
title="See more about this person"
|
||||||
|
>
|
||||||
|
{{ contactNameNonBreakingSpace(contact.name) }}
|
||||||
|
</router-link>
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<span>
|
<div class="flex gap-1.5 items-center overflow-hidden">
|
||||||
<div class="flex gap-2 items-center">
|
<router-link
|
||||||
<router-link
|
:to="{
|
||||||
:to="{
|
path: '/did/' + encodeURIComponent(contact.did),
|
||||||
path: '/did/' + encodeURIComponent(contact.did),
|
}"
|
||||||
}"
|
title="See more about this person"
|
||||||
title="See more about this person"
|
>
|
||||||
>
|
<font-awesome
|
||||||
<font-awesome
|
icon="circle-info"
|
||||||
icon="circle-info"
|
class="text-base text-blue-500"
|
||||||
class="text-xl text-blue-500"
|
/>
|
||||||
/>
|
</router-link>
|
||||||
</router-link>
|
|
||||||
|
|
||||||
<span class="text-sm overflow-hidden">{{
|
<span class="text-xs truncate">{{
|
||||||
libsUtil.shortDid(contact.did)
|
contact.did
|
||||||
}}</span>
|
}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm">
|
<div class="text-sm">
|
||||||
{{ contact.notes }}
|
{{ contact.notes }}
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="showGiveNumbers && contact.did != activeDid"
|
||||||
|
class="flex gap-1.5 items-end"
|
||||||
|
>
|
||||||
|
<div class='text-center'>
|
||||||
|
<div class="text-xs leading-none mb-1">From/To</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<button
|
||||||
|
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2.5 py-1.5 rounded-l-md"
|
||||||
|
:title="givenToMeDescriptions[contact.did] || ''"
|
||||||
|
@click="confirmShowGiftedDialog(contact.did, activeDid)"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
/* eslint-disable prettier/prettier */
|
||||||
|
showGiveTotals
|
||||||
|
? ((givenToMeConfirmed[contact.did] || 0)
|
||||||
|
+ (givenToMeUnconfirmed[contact.did] || 0))
|
||||||
|
: showGiveConfirmed
|
||||||
|
? (givenToMeConfirmed[contact.did] || 0)
|
||||||
|
: (givenToMeUnconfirmed[contact.did] || 0)
|
||||||
|
/* eslint-enable prettier/prettier */
|
||||||
|
}}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2.5 py-1.5 rounded-r-md border-l"
|
||||||
|
:title="givenByMeDescriptions[contact.did] || ''"
|
||||||
|
@click="confirmShowGiftedDialog(activeDid, contact.did)"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
/* eslint-disable prettier/prettier */
|
||||||
|
showGiveTotals
|
||||||
|
? ((givenByMeConfirmed[contact.did] || 0)
|
||||||
|
+ (givenByMeUnconfirmed[contact.did] || 0))
|
||||||
|
: showGiveConfirmed
|
||||||
|
? (givenByMeConfirmed[contact.did] || 0)
|
||||||
|
: (givenByMeUnconfirmed[contact.did] || 0)
|
||||||
|
/* eslint-enable prettier/prettier */
|
||||||
|
}}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<button
|
||||||
v-if="showGiveNumbers && contact.did != activeDid"
|
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md"
|
||||||
class="flex gap-2 items-center"
|
data-testId="offerButton"
|
||||||
|
@click="openOfferDialog(contact.did, contact.name)"
|
||||||
>
|
>
|
||||||
<button
|
Offer
|
||||||
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-l-md"
|
</button>
|
||||||
:title="givenToMeDescriptions[contact.did] || ''"
|
|
||||||
@click="confirmShowGiftedDialog(contact.did, activeDid)"
|
|
||||||
>
|
|
||||||
From:
|
|
||||||
<br />
|
|
||||||
{{
|
|
||||||
/* eslint-disable prettier/prettier */
|
|
||||||
showGiveTotals
|
|
||||||
? ((givenToMeConfirmed[contact.did] || 0)
|
|
||||||
+ (givenToMeUnconfirmed[contact.did] || 0))
|
|
||||||
: showGiveConfirmed
|
|
||||||
? (givenToMeConfirmed[contact.did] || 0)
|
|
||||||
: (givenToMeUnconfirmed[contact.did] || 0)
|
|
||||||
/* eslint-enable prettier/prettier */
|
|
||||||
}}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
<router-link
|
||||||
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white -ml-1.5 px-2 py-1.5 rounded-r-md border-l"
|
:to="{
|
||||||
:title="givenByMeDescriptions[contact.did] || ''"
|
name: 'contact-amounts',
|
||||||
@click="confirmShowGiftedDialog(activeDid, contact.did)"
|
query: { contactDid: contact.did },
|
||||||
>
|
}"
|
||||||
To:
|
class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md"
|
||||||
<br />
|
title="See more given activity"
|
||||||
{{
|
>
|
||||||
/* eslint-disable prettier/prettier */
|
<font-awesome icon="file-lines" class="fa-fw" />
|
||||||
showGiveTotals
|
</router-link>
|
||||||
? ((givenByMeConfirmed[contact.did] || 0)
|
|
||||||
+ (givenByMeUnconfirmed[contact.did] || 0))
|
|
||||||
: showGiveConfirmed
|
|
||||||
? (givenByMeConfirmed[contact.did] || 0)
|
|
||||||
: (givenByMeUnconfirmed[contact.did] || 0)
|
|
||||||
/* eslint-enable prettier/prettier */
|
|
||||||
}}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md border border-blue-400"
|
|
||||||
data-testId="offerButton"
|
|
||||||
@click="openOfferDialog(contact.did, contact.name)"
|
|
||||||
>
|
|
||||||
Offer
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<router-link
|
|
||||||
:to="{
|
|
||||||
name: 'contact-amounts',
|
|
||||||
query: { contactDid: contact.did },
|
|
||||||
}"
|
|
||||||
class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md border border-slate-400"
|
|
||||||
title="See more given activity"
|
|
||||||
>
|
|
||||||
<font-awesome icon="file-lines" class="fa-fw" />
|
|
||||||
</router-link>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
Reference in New Issue
Block a user