trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 23 Releases 5 Wiki Activity

WIP: HomeView notification badge

Browse Source
This commit is contained in:
Jose Olarte III
2025-09-22 22:25:38 +08:00
parent eb21d3c247
commit 39dbbb08f7
1 changed files with 37 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/views/HomeView.vue
View File

@@ -142,7 +142,7 @@ Raymer * @version 1.0.0 */
<!-- Results List -->
<div class="mt-4 mb-4">
<div class="flex gap-2 items-center mb-3">
<div class="flex gap-2 items-center mb-2">
<h2 class="text-xl font-bold">Latest Activity</h2>
<button
v-if="resultsAreFiltered()"
@@ -166,44 +166,63 @@ Raymer * @version 1.0.0 */
</button>
</div>
<!-- Notification Counts -->
<div
class="border-t p-2 border-slate-300"
class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-2 rounded-lg text-white cursor-pointer"
@click="goToActivityToUserPage()"
>
<div class="flex justify-center">
<div class="flex items-center justify-center gap-0.5">
<!-- Offers -->
<div
v-if="numNewOffersToUser"
class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] m-1 px-4 py-4 rounded-md text-white"
class="flex items-baseline gap-1 bg-black/20 px-3 py-1 first:rounded-s last:rounded-e"
>
<span
class="block text-center text-6xl"
class="text-2xl sm:text-3xl font-bold leading-none"
data-testId="newDirectOffersActivityNumber"
>
{{ numNewOffersToUser }}{{ newOffersToUserHitLimit ? "+" : "" }}
{{ numNewOffersToUser
}}<span class="font-normal text-xl leading-none">{{
newOffersToUserHitLimit ? "+" : ""
}}</span>
</span>
<p class="text-center">
new offer{{ numNewOffersToUser === 1 ? "" : "s" }} to you
</p>
<font-awesome icon="hand-holding-heart" class="text-xs" />
</div>
<!-- Project Activity -->
<div
v-if="numNewOffersToUserProjects"
class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] m-1 px-4 py-4 rounded-md text-white"
class="flex items-baseline gap-1 bg-black/20 px-3 py-1 first:rounded-s last:rounded-e"
>
<span
class="block text-center text-6xl"
class="text-2xl sm:text-3xl font-bold leading-none"
data-testId="newOffersToUserProjectsActivityNumber"
>
{{ numNewOffersToUserProjects
}}{{ newOffersToUserProjectsHitLimit ? "+" : "" }}
}}<span class="font-normal text-xl leading-none">{{
newOffersToUserProjectsHitLimit ? "+" : ""
}}</span>
</span>
<p class="text-center">
new offer{{ numNewOffersToUserProjects === 1 ? "" : "s" }} to your
projects
</p>
<font-awesome icon="folder-open" class="text-xs" />
</div>
<!-- Contact Activity -->
<div
class="flex items-baseline gap-1 bg-black/20 px-3 py-1 first:rounded-s last:rounded-e"
>
<span class="text-2xl sm:text-3xl font-bold leading-none"> 4 </span>
<font-awesome icon="user" class="text-xs" />
</div>
<!-- Item Activity -->
<div
class="flex items-baseline gap-1 bg-black/20 px-3 py-1 first:rounded-s last:rounded-e"
>
<span class="text-2xl sm:text-3xl font-bold leading-none"> 7 </span>
<font-awesome icon="image" class="text-xs" />
</div>
</div>
<div class="flex justify-end mt-2">
<button class="text-blue-500">View All New Activity For You</button>
<div
class="text-center mt-1.5 leading-none text-xs sm:text-sm uppercase"
>
View Notifications
</div>
</div>
<InfiniteScroll @reached-bottom="loadMoreGives">