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

Cleaned up Project view UI

polish-ui-project-view
Jose Olarte III 1 year ago
parent
179a5cd9f8
commit
4de66b1609
1 changed files with 96 additions and 64 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. 160
      src/views/ProjectViewView.vue

160
src/views/ProjectViewView.vue
View File

@ -65,83 +65,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 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 icon="coins" class="fa-fw text-slate-400"></fa> </span>
<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="coins" class="fa-fw text-slate-400"></fa> >
<span>{{ give.amount }}</span> <div class="flex justify-between gap-4">
</div> <span
<div class="flex gap-2"> ><fa icon="user" class="fa-fw text-slate-400"></fa>
<fa icon="comment" class="fa-fw text-slate-400"></fa> {{ didInfo(give.agentDid, activeDid, allMyDids, allContacts) }}
<span>{{ give.description }}</span> </span>
</div> <span v-if="give.amount"
><fa icon="coins" class="fa-fw text-slate-400"></fa>
{{ give.amount }}
</span>
</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