Homeview changes

- Moved activity image further up the frame
- Added placeholder icon for projects
- Minor fixes

src/components/ActivityListItem.vue

@@ -29,6 +29,25 @@
           </p> -->
         </div>
       </div>
+
+      <!-- Record Image -->
+      <div
+        v-if="record.image"
+        class="bg-cover mb-6 -mx-3 sm:-mx-4"
+        :style="`background-image: url(${record.image});`"
+      >
+        <a
+          class="block bg-slate-100/50 backdrop-blur-md px-6 py-4 cursor-pointer"
+          @click="$emit('viewImage', record.image)"
+        >
+          <img
+            class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
+            :src="record.image"
+            @load="$emit('cacheImage', $event, record.image)"
+          />
+        </a>
+      </div>
+
       <div class="relative flex justify-between gap-4 mb-5">
         <!-- Source -->
         <a
@@ -36,16 +55,23 @@
           class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
         >
           <div class="relative w-fit mx-auto">
+            <!--
+              If unknown user, icon="person-circle-question"
+              If project with no photo, icon="image"
+            -->
             <fa
               v-if="!record.giver.profileImageUrl"
-              icon="circle-question"
+              icon="person-circle-question"
               class="text-slate-300 text-5xl sm:text-8xl"
             />
             <EntityIcon
               v-else
-              :icon-size="record.giver.known ? 64 : 32"
               :profile-image-url="record.giver.profileImageUrl"
-              :class="record.giver.known ? 'rounded-full' : 'rounded'"
+              :class="
+                record.giver.known
+                  ? 'rounded-full size-12 sm:size-24 object-cover'
+                  : 'rounded size-12 sm:size-24 object-cover'
+              "
             />
             <!--
             <span
@@ -83,10 +109,23 @@
           class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
         >
           <div class="relative w-fit mx-auto">
+            <!--
+              If unknown user, icon="person-circle-question"
+              If project with no photo, icon="image"
+            -->
+            <fa
+              v-if="!record.receiver.profileImageUrl"
+              icon="image"
+              class="text-slate-300 text-5xl sm:text-8xl"
+            />
             <EntityIcon
-              :icon-size="record.receiver.known ? 64 : 32"
+              v-else
               :profile-image-url="record.receiver.profileImageUrl"
-              :class="record.receiver.known ? 'rounded-full' : 'rounded'"
+              :class="
+                record.receiver.known
+                  ? 'rounded-full size-12 sm:size-24 object-cover'
+                  : 'rounded size-12 sm:size-24 object-cover'
+              "
             />
             <!--
             <span
@@ -118,24 +157,6 @@
       <p class="text-sm">{{ subDescription }}</p>
     </div>
 
-    <!-- Record Image -->
-    <div
-      v-if="record.image"
-      class="bg-cover"
-      :style="`background-image: url(${record.image});`"
-    >
-      <a
-        class="block bg-slate-100/50 backdrop-blur-md px-6 py-4 cursor-pointer"
-        @click="$emit('viewImage', record.image)"
-      >
-        <img
-          class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
-          :src="record.image"
-          @load="$emit('cacheImage', $event, record.image)"
-        />
-      </a>
-    </div>
-
     <div
       class="flex items-center gap-2 text-lg bg-slate-300 rounded-b-md px-3 sm:px-4 py-1 sm:py-2"
     >

src/main.ts

@@ -58,6 +58,7 @@ import {
   faHandHoldingDollar,
   faHandHoldingHeart,
   faHouseChimney,
+  faImage,
   faImagePortrait,
   faLeftRight,
   faLightbulb,
@@ -137,6 +138,7 @@ library.add(
   faHandHoldingDollar,
   faHandHoldingHeart,
   faHouseChimney,
+  faImage,
   faImagePortrait,
   faLeftRight,
   faLightbulb,