Browse Source

Design tweaks to Latest Activity

projects-view-improvements
Jose Olarte III 1 year ago
parent
commit
9960a96a20
  1. 44
      src/views/HomeView.vue

44
src/views/HomeView.vue

@ -13,12 +13,13 @@
<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>
<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">Anonymous</h3>
<h3
class="text-xs font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
>
Anonymous
</h3>
</li>
<li
v-for="contact in allContacts"
@ -26,12 +27,13 @@
@click="openDialog(contact)"
>
<div class="mb-1">
<fa
icon="user"
class="fa-fw fa-xl text-slate-400"
></fa>
<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>
<h3
class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
>
{{ contact.name || "(no name)" }}
</h3>
</li>
</ul>
</div>
@ -43,29 +45,27 @@
>
</GiftedDialog>
<div>
<h1 class="text-2xl">Latest Activity</h1>
<span :class="{ hidden: isHiddenSpinner }">
<fa icon="spinner" class="fa-spin-pulse"></fa>
Loading&hellip;
</span>
<ul>
<div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
<h2 class="text-xl font-bold mb-4">Latest Activity</h2>
<div :class="{ hidden: isHiddenSpinner }">
<p class="text-slate-500 text-center italic mt-4 mb-4">
<fa icon="spinner" class="fa-spin-pulse"></fa> Loading&hellip;
</p>
</div>
<ul class="border-t border-slate-300">
<li
class="border-b border-slate-300 py-2"
v-for="record in feedData"
:key="record.jwtId"
>
<div
class="border-b border-dashed border-slate-400 text-orange-400 py-2 mb-2 font-bold uppercase text-sm"
class="border-b border-dashed border-slate-400 text-orange-400 pb-2 mb-2 font-bold uppercase text-sm"
v-if="record.jwtId == feedLastViewedId"
>
You've seen all claims below:
</div>
<div class="flex">
<fa
icon="gift"
class="fa-fw flex-none pt-1 pr-2 text-slate-500"
></fa>
<fa icon="gift" class="pt-1 pr-2 text-slate-500"></fa>
<!-- icon values: "coins" = money; "clock" = time; "gift" = others -->
<span class="">{{ this.giveDescription(record) }}</span>
</div>

Loading…
Cancel
Save