Browse Source

Converted to tabular structure

For more adaptive widths
contact-amounts-ui-improvements
Jose Olarte III 1 year ago
parent
commit
69f2f3cfd2
  1. 79
      src/views/ContactAmountsView.vue

79
src/views/ContactAmountsView.vue

@ -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>
</tr>
</thead>
<tbody>
<tr
v-for="record in giveRecords" v-for="record in giveRecords"
:key="record.id" :key="record.id"
class="border-b border-slate-300"
> >
<div class="w-1/4"> <td class="p-1 text-xs sm:text-sm text-slate-500">
{{ new Date(record.issuedAt).toLocaleString() }} {{ new Date(record.issuedAt).toLocaleString() }}
</div> </td>
<div class="w-1/4"> <td class="p-1">
<span v-if="record.agentDid == contact.did"> <span v-if="record.agentDid == contact.did">
<div class="font-bold"> <div class="font-bold">
{{ record.amount }} {{ record.unit }} {{ record.amount }} {{ record.unit }}
<span v-if="record.amountConfirmed" class="tooltip"> <span v-if="record.amountConfirmed" title="Confirmed">
<fa icon="circle-check" class="text-green-600 fa-fw ml-1" /> <fa icon="circle-check" class="text-green-600 fa-fw" />
<span class="tooltiptext">Confirmed</span>
</span> </span>
<button v-else class="tooltip" @click="confirm(record)"> <button v-else @click="confirm(record)" title="Unconfirmed">
<fa icon="circle" class="text-blue-600 fa-fw ml-1" /> <fa icon="circle" class="text-blue-600 fa-fw" />
<span class="tooltiptext">Unconfirmed</span>
</button> </button>
</div> </div>
<br /> <div class="italic text-xs sm:text-sm text-slate-500">
{{ record.description }} {{ record.description }}
</span>
</div> </div>
<div class="w-1/8"> </span>
</td>
<td class="p-1">
<span v-if="record.agentDid == contact.did"> <span v-if="record.agentDid == contact.did">
<fa icon="long-arrow-alt-left" class="text-slate-900 fa-fw ml-1" /> <fa icon="long-arrow-alt-left" class="text-slate-400 fa-fw" />
</span> </span>
<span v-else> <span v-else>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <fa icon="long-arrow-alt-right" class="text-slate-400 fa-fw" />
<fa icon="long-arrow-alt-right" class="text-slate-900 fa-fw ml-1" />
</span> </span>
</div> </td>
<div class="w-1/4"> <td class="p-1">
<span v-if="record.agentDid != contact.did"> <span v-if="record.agentDid != contact.did">
<div class="font-bold"> <div class="font-bold">
{{ record.amount }} {{ record.unit }} {{ record.amount }} {{ record.unit }}
<span v-if="record.amountConfirmed" class="tooltip"> <span v-if="record.amountConfirmed" title="Confirmed">
<fa icon="circle-check" class="text-green-600 fa-fw ml-1" /> <fa icon="circle-check" class="text-green-600 fa-fw" />
<span class="tooltiptext">Confirmed</span>
</span> </span>
<button v-else class="tooltip" @click="cannotConfirmMessage()"> <button
<fa icon="circle" class="text-slate-600 fa-fw ml-1" /> v-else
<span class="tooltiptext">Unconfirmed</span> @click="cannotConfirmMessage()"
title="Unconfirmed"
>
<fa icon="circle" class="text-slate-600 fa-fw" />
</button> </button>
</div> </div>
<br /> <div class="italic text-xs sm:text-sm text-slate-500">
{{ record.description }} {{ record.description }}
</span>
</div>
</div>
</div> </div>
</span>
</td>
</tr>
</tbody>
</table>
<AlertMessage <AlertMessage
:alertTitle="alertTitle" :alertTitle="alertTitle"
:alertMessage="alertMessage" :alertMessage="alertMessage"

Loading…
Cancel
Save