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

WIP: notification view improvements

Browse Source 
- Notification count badge per tab
- "Unread only" filter toggle
- Notification dot size adjustment
This commit is contained in:
Jose Olarte III
2025-09-17 22:13:34 +08:00
parent 106cefab51
commit 2db2c39830
1 changed files with 46 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/views/NewActivityView.vue
View File

@@ -4,11 +4,11 @@
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
<!-- Breadcrumb -->
<div class="mb-2">
<h1 class="text-xl text-center font-semibold relative px-7">
<h1 class="text-2xl text-center font-semibold relative px-7">
<!-- Back -->
<font-awesome
icon="chevron-left"
class="fa-fw text-lg text-center px-2 py-1 absolute -left-2"
class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 top-[0.2em]"
@click="$router.back()"
/>
@@ -19,23 +19,35 @@
<!-- Main Tabs -->
<div class="text-center text-slate-500 border-b border-slate-300 mt-4 mb-2">
<ul class="flex flex-wrap justify-center gap-4 -mb-px">
<li>
<li class="flex items-center gap-1">
<a
href="#"
class="inline-block py-2 rounded-t-lg border-b-2 active text-black border-black font-semibold"
>
Offers
</a>
<!-- Unread count -->
<span
class="inline-block bg-rose-500 text-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
>3</span
>
</li>
<li>
<li class="flex items-center gap-1">
<a
href="#"
class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400"
>
Projects
</a>
<!-- Unread count -->
<span
class="inline-block bg-rose-500 text-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.2em]"
>10+</span
>
</li>
<li>
<li class="flex items-center gap-1">
<a
href="#"
class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400"
@@ -49,15 +61,21 @@
<!-- Sub Tabs - Offers -->
<div class="text-center text-slate-500 border-b border-slate-300 mb-2">
<ul class="flex flex-wrap justify-center gap-4 -mb-px">
<li>
<li class="flex items-center gap-1">
<a
href="#"
class="inline-block py-2 rounded-t-lg border-b-2 active text-black border-black font-semibold"
>
To You
</a>
<!-- Unread count -->
<span
class="inline-block bg-rose-500 text-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
>3</span
>
</li>
<li>
<li class="flex items-center gap-1">
<a
href="#"
class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400"
@@ -70,10 +88,26 @@
<!-- Offers to You -->
<div v-if="showOffersDetails" class="mt-4">
<div class="flex justify-end mb-2">
<div class="flex justify-between items-center text-sm mb-2">
<label class="flex items-center justify-between gap-1.5 cursor-pointer">
<!-- toggle -->
<div class="relative">
<!-- input -->
<input type="checkbox" class="sr-only" />
<!-- line -->
<div class="block bg-slate-500 w-10 h-6 rounded-full"></div>
<!-- dot -->
<div
class="dot absolute left-1 top-1 bg-slate-400 w-4 h-4 rounded-full transition"
></div>
</div>
<!-- label -->
<span class="sm:hidden">Unread only</span>
<span class="hidden sm:block">Show unread only</span>
</label>
<a
href="#"
class="flex items-center justify-end gap-2 text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1 rounded"
class="flex items-center justify-end gap-2 bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1 rounded"
>
Mark all as read
<font-awesome icon="check"></font-awesome>
@@ -98,7 +132,7 @@
<!-- Unread indicator -->
<font-awesome
icon="circle"
class="text-rose-500 text-[10px] border border-rose-500 rounded-full"
class="text-rose-500 text-[8px] border border-rose-500 rounded-full"
></font-awesome>
</li>
@@ -120,7 +154,7 @@
<!-- Read indicator -->
<font-awesome
icon="circle"
class="text-transparent text-[10px] border border-slate-300 rounded-full"
class="text-transparent text-[8px] border border-slate-300 rounded-full"
></font-awesome>
</li>
<li
@@ -149,7 +183,7 @@
<!-- Unread indicator -->
<font-awesome
icon="circle"
class="text-rose-500 text-[10px] border border-rose-500 rounded-full"
class="text-rose-500 text-[8px] border border-rose-500 rounded-full"
></font-awesome>
</li>
</ul>