trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 23 Releases 5 Wiki Activity

Converted to tabular structure

Browse Source 
For more adaptive widths
This commit is contained in:
Jose Olarte III
2023-07-31 21:32:19 +08:00
parent 179a5cd9f8
commit 69f2f3cfd2
1 changed files with 67 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/views/ContactAmountsView.vue
View File

@@ -6,66 +6,73 @@
</h1> </h1>
<!-- Results List --> <!-- Results List -->
<div> <table
<div class="border-b border-slate-300 flex"> class="table-auto w-full border-t border-slate-300 text-sm sm:text-base text-center"
<div class="w-1/4"></div> >
<div class="w-1/4">from them</div> <thead class="bg-slate-100">
<div class="w-1/4"></div> <tr class="border-b border-slate-300">
<div class="w-1/4">to them</div> <th></th>
</div> <th class="px-1 py-2">From Them</th>
<div <th></th>
class="border-b border-slate-300 flex" <th class="px-1 py-2">To Them</th>
v-for="record in giveRecords" </tr>
:key="record.id" </thead>
> <tbody>
<div class="w-1/4"> <tr
{{ new Date(record.issuedAt).toLocaleString() }} v-for="record in giveRecords"
</div> :key="record.id"
<div class="w-1/4"> class="border-b border-slate-300"
<span v-if="record.agentDid == contact.did"> >
<div class="font-bold"> <td class="p-1 text-xs sm:text-sm text-slate-500">
{{ record.amount }} {{ record.unit }} {{ new Date(record.issuedAt).toLocaleString() }}
<span v-if="record.amountConfirmed" class="tooltip"> </td>
<fa icon="circle-check" class="text-green-600 fa-fw ml-1" /> <td class="p-1">
<span class="tooltiptext">Confirmed</span> <span v-if="record.agentDid == contact.did">
</span> <div class="font-bold">
<button v-else class="tooltip" @click="confirm(record)"> {{ record.amount }} {{ record.unit }}
<fa icon="circle" class="text-blue-600 fa-fw ml-1" /> <span v-if="record.amountConfirmed" title="Confirmed">
<span class="tooltiptext">Unconfirmed</span> <fa icon="circle-check" class="text-green-600 fa-fw" />
</button> </span>
</div> <button v-else @click="confirm(record)" title="Unconfirmed">
<br /> <fa icon="circle" class="text-blue-600 fa-fw" />
{{ record.description }} </button>
</span> </div>
</div> <div class="italic text-xs sm:text-sm text-slate-500">
<div class="w-1/8"> {{ record.description }}
<span v-if="record.agentDid == contact.did"> </div>
<fa icon="long-arrow-alt-left" class="text-slate-900 fa-fw ml-1" /> </span>
</span> </td>
<span v-else> <td class="p-1">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span v-if="record.agentDid == contact.did">
<fa icon="long-arrow-alt-right" class="text-slate-900 fa-fw ml-1" /> <fa icon="long-arrow-alt-left" class="text-slate-400 fa-fw" />
</span> </span>
</div> <span v-else>
<div class="w-1/4"> <fa icon="long-arrow-alt-right" class="text-slate-400 fa-fw" />
<span v-if="record.agentDid != contact.did"> </span>
<div class="font-bold"> </td>
{{ record.amount }} {{ record.unit }} <td class="p-1">
<span v-if="record.amountConfirmed" class="tooltip"> <span v-if="record.agentDid != contact.did">
<fa icon="circle-check" class="text-green-600 fa-fw ml-1" /> <div class="font-bold">
<span class="tooltiptext">Confirmed</span> {{ record.amount }} {{ record.unit }}
</span> <span v-if="record.amountConfirmed" title="Confirmed">
<button v-else class="tooltip" @click="cannotConfirmMessage()"> <fa icon="circle-check" class="text-green-600 fa-fw" />
<fa icon="circle" class="text-slate-600 fa-fw ml-1" /> </span>
<span class="tooltiptext">Unconfirmed</span> <button
</button> v-else
</div> @click="cannotConfirmMessage()"
<br /> title="Unconfirmed"
{{ record.description }} >
</span> <fa icon="circle" class="text-slate-600 fa-fw" />
</div> </button>
</div> </div>
</div> <div class="italic text-xs sm:text-sm text-slate-500">
{{ record.description }}
</div>
</span>
</td>
</tr>
</tbody>
</table>
<AlertMessage <AlertMessage
:alertTitle="alertTitle" :alertTitle="alertTitle"
:alertMessage="alertMessage" :alertMessage="alertMessage"