Cleaned up Project view UI

src/views/ProjectViewView.vue

@@ -65,83 +65,115 @@
     </div>
 
     <div>
-      <div v-if="activeDid">
+      <div v-if="activeDid" class="text-center">
         <button
           @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:
+        <p class="mt-2 mb-4 text-center">Or, record a gift from:</p>
       </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>
+      <p v-if="!activeDid" class="mt-2 mb-4">Record a gift from:</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 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>
+          <h3
+            class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+          >
+            {{ contact.name || "(no name)" }}
+          </h3>
+        </li>
+      </ul>
+
+      <!-- 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) -->
+      <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>
 
     <!-- Gifts to & from this -->
-    <div class="mt-8 flex justify-around">
-      <div>
-        <h1 class="text-xl">Given to this Project</h1>
-      </div>
-      <div>
-        <h1 class="text-xl">... and from this Project</h1>
-      </div>
-    </div>
-    <div class="flex justify-around">
-      <div class="w-1/2">
-        <div v-for="give in givesToThis" :key="give.id">
-          <div class="flex justify-between">
-            <div class="flex gap-3">
-              <div class="flex gap-2">
-                <fa icon="user" class="fa-fw text-slate-400"></fa>
-                <span>{{
-                  didInfo(give.agentDid, activeDid, allMyDids, allContacts)
-                }}</span>
-              </div>
-              <div class="flex gap-2" v-if="give.amount">
-                <fa icon="coins" class="fa-fw text-slate-400"></fa>
-                <span>{{ give.amount }}</span>
-              </div>
-              <div class="flex gap-2" v-if="give.description">
-                <fa icon="comment" class="fa-fw text-slate-400"></fa>
-                <span>{{ give.description }}</span>
-              </div>
+    <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>
+            <div v-if="give.description" class="text-slate-500">
+              <fa icon="comment" class="fa-fw text-slate-400"></fa>
+              {{ give.description }}
+            </div>
+          </li>
+        </ul>
       </div>
-      <div class="w-1/2">
-        <div v-for="give in givesByThis" :key="give.id">
-          <div class="flex justify-between">
-            <div class="flex gap-3">
-              <div class="flex gap-2">
-                <fa icon="user" class="fa-fw text-slate-400"></fa>
-                <span>{{
-                  didInfo(give.agentDid, activeDid, allMyDids, allContacts)
-                }}</span>
-              </div>
-              <div class="flex gap-2" v-if="give.amount">
-                <fa icon="coins" class="fa-fw text-slate-400"></fa>
-                <span>{{ give.amount }}</span>
-              </div>
-              <div class="flex gap-2">
-                <fa icon="comment" class="fa-fw text-slate-400"></fa>
-                <span>{{ give.description }}</span>
-              </div>
+
+      <div class="bg-slate-100 px-4 py-3 rounded-md">
+        <h3 class="text-sm uppercase font-semibold mb-3">
+          &hellip;and from this Project
+        </h3>
+
+        <ul class="text-sm border-t border-slate-300">
+          <li
+            v-for="give in givesByThis"
+            :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>
+            <div v-if="give.description" class="text-slate-500">
+              <fa icon="comment" class="fa-fw text-slate-400"></fa>
+              {{ give.description }}
+            </div>
+          </li>
+        </ul>
       </div>
     </div>
+
     <GiftedDialog
       ref="customDialog"
       @dialog-result="handleDialogResult"