trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Pull Requests 4 Releases 5 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. 150
      src/views/ProjectViewView.vue

150
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>
&horbar; or:
</div>
<!-- similar contact selection code is in multiple places -->
Record a gift from
<span v-for="contact in allContacts" :key="contact.did">
<button @click="openDialog(contact)" class="text-blue-500">
&nbsp;{{ contact.name }}</button
>,
</span>
<span v-if="allContacts.length > 0">&nbsp;or&nbsp;</span>
<button @click="openDialog()" class="text-blue-500">
someone not specified
</button> </button>
<p class="mt-2 mb-4 text-center">Or, record a gift from:</p>
</div> </div>
<p v-if="!activeDid" class="mt-2 mb-4">Record a gift from:</p>
<!-- Gifts to & from this --> <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
<div class="mt-8 flex justify-around"> <li @click="openDialog()">
<div> <div class="mb-1">
<h1 class="text-xl">Given to this Project</h1> <fa icon="question-circle" class="fa-fw fa-xl text-slate-400"></fa>
</div>
<div>
<h1 class="text-xl">... and from this Project</h1>
</div> </div>
<h3
class="text-xs italic font-medium text-ellipsis whitespace-nowrap overflow-hidden"
>
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> </div>
<div class="flex justify-around"> <h3
<div class="w-1/2"> class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
<div v-for="give in givesToThis" :key="give.id"> >
<div class="flex justify-between"> {{ contact.name || "(no name)" }}
<div class="flex gap-3"> </h3>
<div class="flex gap-2"> </li>
<fa icon="user" class="fa-fw text-slate-400"></fa> </ul>
<span>{{
didInfo(give.agentDid, activeDid, allMyDids, allContacts) <!-- 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) -->
}}</span> <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>
<div class="flex gap-2" v-if="give.amount">
<fa icon="coins" class="fa-fw text-slate-400"></fa> <!-- Gifts to & from this -->
<span>{{ give.amount }}</span> <div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-4">
<div class="bg-slate-100 px-4 py-3 rounded-md">
<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>
<div class="flex gap-2" v-if="give.description"> <div v-if="give.description" class="text-slate-500">
<fa icon="comment" class="fa-fw text-slate-400"></fa> <fa icon="comment" class="fa-fw text-slate-400"></fa>
<span>{{ give.description }}</span> {{ give.description }}
</div>
</div>
</div>
</div> </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">
<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>
<div class="flex gap-2"> <div v-if="give.description" class="text-slate-500">
<fa icon="comment" class="fa-fw text-slate-400"></fa> <fa icon="comment" class="fa-fw text-slate-400"></fa>
<span>{{ give.description }}</span> {{ give.description }}
</div>
</div>
</div>
</div> </div>
</li>
</ul>
</div> </div>
</div> </div>
<GiftedDialog <GiftedDialog
ref="customDialog" ref="customDialog"
@dialog-result="handleDialogResult" @dialog-result="handleDialogResult"

Write Preview
Loading…
Cancel
Save