forked from trent_larson/crowd-funder-for-time-pwa
Compare commits
3 Commits
jdenticon-
...
polish-ui-
| Author | SHA1 | Date | |
|---|---|---|---|
| 3204f1d676 | |||
|
304985f88d | ||
|
4de66b1609 |
@@ -77,93 +77,115 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<div v-if="activeDid">
|
<div v-if="activeDid" class="text-center">
|
||||||
<button
|
<button
|
||||||
@click="openDialog({ name: 'you', did: activeDid })"
|
@click="openDialog({ name: 'you', did: activeDid })"
|
||||||
class="text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md"
|
class="block w-full text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md"
|
||||||
>
|
>
|
||||||
I gave...
|
I gave…
|
||||||
</button>
|
</button>
|
||||||
― or:
|
<p class="mt-2 mb-4 text-center">Or, record a gift from:</p>
|
||||||
</div>
|
</div>
|
||||||
<!-- similar contact selection code is in multiple places -->
|
<p v-if="!activeDid" class="mt-2 mb-4">Record a gift from:</p>
|
||||||
Record a gift from
|
|
||||||
<span v-for="contact in allContacts" :key="contact.did">
|
<ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
|
||||||
<button @click="openDialog(contact)" class="text-blue-500">
|
<li @click="openDialog()">
|
||||||
{{ contact.name }}</button
|
<div class="mb-1">
|
||||||
>,
|
<fa icon="question-circle" class="fa-fw fa-xl text-slate-400"></fa>
|
||||||
</span>
|
</div>
|
||||||
<span v-if="allContacts.length > 0"> or </span>
|
<h3
|
||||||
<button @click="openDialog()" class="text-blue-500">
|
class="text-xs italic font-medium text-ellipsis whitespace-nowrap overflow-hidden"
|
||||||
someone not specified
|
>
|
||||||
</button>
|
Anonymous
|
||||||
|
</h3>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
v-for="contact in allContacts"
|
||||||
|
:key="contact.did"
|
||||||
|
@click="openDialog(contact)"
|
||||||
|
>
|
||||||
|
<div class="mb-1">
|
||||||
|
<fa icon="user" class="fa-fw fa-xl text-slate-400"></fa>
|
||||||
|
</div>
|
||||||
|
<h3
|
||||||
|
class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
|
||||||
|
>
|
||||||
|
{{ contact.name || "(no name)" }}
|
||||||
|
</h3>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- Ideally, this button should only be visible when the active account has more than 7 or 11 contacts in their list (we want to limit the grid count above to 8 or 12 accounts to keep it compact) -->
|
||||||
|
<router-link
|
||||||
|
v-if="allContacts.length > 7"
|
||||||
|
:to="{ name: 'contact-gives' }"
|
||||||
|
class="block text-center text-md font-bold uppercase bg-slate-500 text-white px-2 py-3 rounded-md"
|
||||||
|
>
|
||||||
|
Show More Contacts…
|
||||||
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Gifts to & from this -->
|
<!-- Gifts to & from this -->
|
||||||
<div class="mt-8 flex justify-around">
|
<div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
<div>
|
<div class="bg-slate-100 px-4 py-3 rounded-md">
|
||||||
<h1 class="text-xl">Given to this Project</h1>
|
<h3 class="text-sm uppercase font-semibold mb-3">
|
||||||
|
Given to this Project
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<ul class="text-sm border-t border-slate-300">
|
||||||
|
<li
|
||||||
|
v-for="give in givesToThis"
|
||||||
|
:key="give.id"
|
||||||
|
class="py-1.5 border-b border-slate-300"
|
||||||
|
>
|
||||||
|
<div class="flex justify-between gap-4">
|
||||||
|
<span
|
||||||
|
><fa icon="user" class="fa-fw text-slate-400"></fa>
|
||||||
|
{{ didInfo(give.agentDid, activeDid, allMyDids, allContacts) }}
|
||||||
|
</span>
|
||||||
|
<span v-if="give.amount"
|
||||||
|
><fa icon="coins" class="fa-fw text-slate-400"></fa>
|
||||||
|
{{ give.amount }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="give.description" class="text-slate-500">
|
||||||
|
<fa icon="comment" class="fa-fw text-slate-400"></fa>
|
||||||
|
{{ give.description }}
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<h1 class="text-xl">... and paid forward from this Project</h1>
|
<div class="bg-slate-100 px-4 py-3 rounded-md">
|
||||||
</div>
|
<h3 class="text-sm uppercase font-semibold mb-3">
|
||||||
</div>
|
…and from this Project
|
||||||
<div class="flex justify-around">
|
</h3>
|
||||||
<div class="w-1/2">
|
|
||||||
<div v-for="give in givesToThis" :key="give.id">
|
<ul class="text-sm border-t border-slate-300">
|
||||||
<div class="flex justify-between">
|
<li
|
||||||
<div class="flex gap-3">
|
v-for="give in givesByThis"
|
||||||
<div class="flex gap-2">
|
:key="give.id"
|
||||||
<fa icon="user" class="fa-fw text-slate-400"></fa>
|
class="py-1.5 border-b border-slate-300"
|
||||||
<span>{{
|
>
|
||||||
didInfo(give.agentDid, activeDid, allMyDids, allContacts)
|
<div class="flex justify-between gap-4">
|
||||||
}}</span>
|
<span
|
||||||
</div>
|
><fa icon="user" class="fa-fw text-slate-400"></fa>
|
||||||
<div class="flex gap-2" v-if="give.amount">
|
{{ didInfo(give.agentDid, activeDid, allMyDids, allContacts) }}
|
||||||
<fa
|
</span>
|
||||||
icon="clock"
|
<span v-if="give.amount"
|
||||||
v-if="give.unit === 'HUR'"
|
><fa icon="coins" class="fa-fw text-slate-400"></fa>
|
||||||
class="fa-fw text-slate-400"
|
{{ give.amount }}
|
||||||
></fa>
|
</span>
|
||||||
<fa icon="coins" v-else class="fa-fw text-slate-400"></fa>
|
</div>
|
||||||
<span>{{ give.amount }}</span>
|
<div v-if="give.description" class="text-slate-500">
|
||||||
</div>
|
<fa icon="comment" class="fa-fw text-slate-400"></fa>
|
||||||
<div class="flex gap-2" v-if="give.description">
|
{{ give.description }}
|
||||||
<fa icon="comment" class="fa-fw text-slate-400"></fa>
|
</div>
|
||||||
<span>{{ give.description }}</span>
|
</li>
|
||||||
</div>
|
</ul>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="w-1/2">
|
|
||||||
<div v-for="give in givesByThis" :key="give.id">
|
|
||||||
<div class="flex justify-between">
|
|
||||||
<div class="flex gap-3">
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<fa icon="user" class="fa-fw text-slate-400"></fa>
|
|
||||||
<span>{{
|
|
||||||
didInfo(give.agentDid, activeDid, allMyDids, allContacts)
|
|
||||||
}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-2" v-if="give.amount">
|
|
||||||
<fa
|
|
||||||
icon="clock"
|
|
||||||
v-if="give.unit === 'HUR'"
|
|
||||||
class="fa-fw text-slate-400"
|
|
||||||
></fa>
|
|
||||||
<fa icon="coins" v-else class="fa-fw text-slate-400"></fa>
|
|
||||||
<span>{{ give.amount }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<fa icon="comment" class="fa-fw text-slate-400"></fa>
|
|
||||||
<span>{{ give.description }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<GiftedDialog
|
<GiftedDialog
|
||||||
ref="customDialog"
|
ref="customDialog"
|
||||||
@dialog-result="handleDialogResult"
|
@dialog-result="handleDialogResult"
|
||||||
|
|||||||
Reference in New Issue
Block a user