|
|
@ -2,37 +2,65 @@ |
|
|
|
<QuickNav selected="Home"></QuickNav> |
|
|
|
<!-- CONTENT --> |
|
|
|
<section id="Content" class="p-6 pb-24"> |
|
|
|
<div class="mb-8"> |
|
|
|
<h2 class="text-xl font-bold">Quick Action</h2> |
|
|
|
<p class="mb-4">Show appreciation to a contact:</p> |
|
|
|
|
|
|
|
<ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5"> |
|
|
|
<li @click="openDialog()"> |
|
|
|
<div class="mb-1"> |
|
|
|
<fa icon="question-circle" class="fa-fw fa-xl text-slate-400"></fa> |
|
|
|
</div> |
|
|
|
<h3 |
|
|
|
class="text-xs font-medium italic text-ellipsis whitespace-nowrap overflow-hidden" |
|
|
|
> |
|
|
|
<!-- Breadcrumb --> |
|
|
|
<div id="ViewBreadcrumb" class="mb-8"> |
|
|
|
<h1 class="text-lg text-center font-light relative px-7"> |
|
|
|
<!-- Back --> |
|
|
|
<router-link |
|
|
|
:to="{ name: 'home' }" |
|
|
|
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1" |
|
|
|
><fa icon="chevron-left" class="fa-fw"></fa |
|
|
|
></router-link> |
|
|
|
|
|
|
|
Give to Contacts |
|
|
|
</h1> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- Quick Search --> |
|
|
|
|
|
|
|
<!-- Initial Loading Animation --> |
|
|
|
|
|
|
|
<!-- Results List --> |
|
|
|
<ul class="border-t border-slate-300"> |
|
|
|
<li class="border-b border-slate-300 py-3"> |
|
|
|
<h2 class="text-base flex gap-4 items-center"> |
|
|
|
<span class="grow italic" |
|
|
|
><fa icon="question-circle" class="fa-fw fa-xl text-slate-400"></fa> |
|
|
|
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" |
|
|
|
> |
|
|
|
</span> |
|
|
|
<span class="text-right"> |
|
|
|
<button |
|
|
|
type="button" |
|
|
|
@click="openDialog()" |
|
|
|
class="block w-full text-center text-sm uppercase bg-blue-600 text-white px-3 py-1.5 rounded-md" |
|
|
|
> |
|
|
|
<fa icon="gift" class="fa-fw"></fa> |
|
|
|
</button> |
|
|
|
</span> |
|
|
|
</h2> |
|
|
|
</li> |
|
|
|
<li |
|
|
|
v-for="contact in allContacts" |
|
|
|
:key="contact.did" |
|
|
|
class="border-b border-slate-300 py-3" |
|
|
|
> |
|
|
|
<h2 class="text-base flex gap-4 items-center"> |
|
|
|
<span class="grow font-semibold" |
|
|
|
><fa icon="user" class="fa-fw fa-xl text-slate-400"></fa> |
|
|
|
{{ contact.name || "(no name)" }} |
|
|
|
</h3> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span class="text-right"> |
|
|
|
<button |
|
|
|
type="button" |
|
|
|
@click="openDialog(contact)" |
|
|
|
class="block w-full text-center text-sm uppercase bg-blue-600 text-white px-3 py-1.5 rounded-md" |
|
|
|
> |
|
|
|
<fa icon="gift" class="fa-fw"></fa> |
|
|
|
</button> |
|
|
|
</span> |
|
|
|
</h2> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
<GiftedDialog |
|
|
|
ref="customDialog" |
|
|
|