kentbull
/
crowd-funder-for-time-pwa
forked from trent_larson/crowd-funder-for-time-pwa
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge remote-tracking branch 'origin/polish-ui-project-view'

kb/add-usage-guide
Matthew Aaron Raymer 1 year ago
parent
9a41aff8f0 4de66b1609
commit
304985f88d
1 changed files with 96 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 170
      src/views/ProjectViewView.vue

170
src/views/ProjectViewView.vue
View File

@ -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&hellip;
</button> </button>
&horbar; 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()">
&nbsp;{{ 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">&nbsp;or&nbsp;</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&hellip;
</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">
</div> Given to this Project
<div> </h3>
<h1 class="text-xl">... and paid forward from this Project</h1>
</div> <ul class="text-sm border-t border-slate-300">
</div> <li
<div class="flex justify-around"> v-for="give in givesToThis"
<div class="w-1/2"> :key="give.id"
<div v-for="give in givesToThis" :key="give.id"> class="py-1.5 border-b border-slate-300"
<div class="flex justify-between"> >
<div class="flex gap-3"> <div class="flex justify-between gap-4">
<div class="flex gap-2"> <span
<fa icon="user" class="fa-fw text-slate-400"></fa> ><fa icon="user" class="fa-fw text-slate-400"></fa>
<span>{{ {{ didInfo(give.agentDid, activeDid, allMyDids, allContacts) }}
didInfo(give.agentDid, activeDid, allMyDids, allContacts) </span>
}}</span> <span v-if="give.amount"
</div> ><fa icon="coins" class="fa-fw text-slate-400"></fa>
<div class="flex gap-2" v-if="give.amount"> {{ give.amount }}
<fa </span>
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" v-if="give.description">
<fa icon="comment" class="fa-fw text-slate-400"></fa>
<span>{{ give.description }}</span>
</div>
</div> </div>
</div> <div v-if="give.description" class="text-slate-500">
</div> <fa icon="comment" class="fa-fw text-slate-400"></fa>
{{ give.description }}
</div>
</li>
</ul>
</div> </div>
<div class="w-1/2">
<div v-for="give in givesByThis" :key="give.id"> <div class="bg-slate-100 px-4 py-3 rounded-md">
<div class="flex justify-between"> <h3 class="text-sm uppercase font-semibold mb-3">
<div class="flex gap-3"> &hellip;and from this Project
<div class="flex gap-2"> </h3>
<fa icon="user" class="fa-fw text-slate-400"></fa>
<span>{{ <ul class="text-sm border-t border-slate-300">
didInfo(give.agentDid, activeDid, allMyDids, allContacts) <li
}}</span> v-for="give in givesByThis"
</div> :key="give.id"
<div class="flex gap-2" v-if="give.amount"> class="py-1.5 border-b border-slate-300"
<fa >
icon="clock" <div class="flex justify-between gap-4">
v-if="give.unit === 'HUR'" <span
class="fa-fw text-slate-400" ><fa icon="user" class="fa-fw text-slate-400"></fa>
></fa> {{ didInfo(give.agentDid, activeDid, allMyDids, allContacts) }}
<fa icon="coins" v-else class="fa-fw text-slate-400"></fa> </span>
<span>{{ give.amount }}</span> <span v-if="give.amount"
</div> ><fa icon="coins" class="fa-fw text-slate-400"></fa>
<div class="flex gap-2"> {{ give.amount }}
<fa icon="comment" class="fa-fw text-slate-400"></fa> </span>
<span>{{ give.description }}</span>
</div>
</div> </div>
</div> <div v-if="give.description" class="text-slate-500">
</div> <fa icon="comment" class="fa-fw text-slate-400"></fa>
{{ give.description }}
</div>
</li>
</ul>
</div> </div>
</div> </div>
<GiftedDialog <GiftedDialog
ref="customDialog" ref="customDialog"
@dialog-result="handleDialogResult" @dialog-result="handleDialogResult"

Write Preview
Loading…
Cancel
Save