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

WIP: notification system adjustments 

- Re-organize tabs
- Remove unneeded "Unread only" toggle (limiting functionality to chronological isUnread)
- Added "read line"
notification-system
Jose Olarte III 1 day ago
parent
213f5f0555
commit
eb21d3c247
1 changed files with 71 additions and 71 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 142
      src/views/NewActivityView.vue

142
src/views/NewActivityView.vue
View File

@ -19,7 +19,7 @@
<!-- 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 class="flex items-center gap-1">
<li class="flex items-center gap-[0.175em]">
<a
href="#"
class="inline-block py-2 rounded-t-lg border-b-2 active text-black border-black font-semibold"
@ -29,11 +29,11 @@
<!-- 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]"
class="inline-block bg-rose-500 text-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em] -me-1.5"
>3</span
>
</li>
<li class="flex items-center gap-1">
<li class="flex items-center gap-[0.175em]">
<a
href="#"
class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400"
@ -43,16 +43,24 @@
<!-- 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
class="inline-block bg-rose-500 text-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em] -me-1.5"
>9+</span
>
</li>
<li class="flex items-center gap-1">
<li class="flex items-center gap-[0.175em]">
<a
href="#"
class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400"
>
Favorites
People
</a>
</li>
<li class="flex items-center gap-[0.175em]">
<a
href="#"
class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400"
>
Items
</a>
</li>
</ul>
@ -60,8 +68,8 @@
<!-- 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 class="flex items-center gap-1">
<ul class="flex flex-wrap justify-center gap-4 text-sm -mb-px">
<li class="flex items-center gap-[0.175em]">
<a
href="#"
class="inline-block py-2 rounded-t-lg border-b-2 active text-black border-black font-semibold"
@ -71,11 +79,11 @@
<!-- 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]"
class="inline-block bg-rose-500 text-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em] -me-1.5"
>3</span
>
</li>
<li class="flex items-center gap-1">
<li class="flex items-center gap-[0.175em]">
<a
href="#"
class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400"
@ -88,23 +96,7 @@
<!-- Offers to You -->
<div v-if="showOffersDetails" class="mt-4">
<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>
<div class="flex justify-end items-center text-sm mb-2">
<a
href="#"
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"
@ -114,49 +106,6 @@
</a>
</div>
<ul class="text-sm border-t border-slate-300">
<!-- Sample unread item -->
<li
class="flex justify-between items-center gap-4 border-b border-slate-300 py-2"
>
<!-- Notification details -->
<a href="#" class="block">
<span class="font-semibold">John Doe</span>
offered
<span class="font-semibold text-blue-600"
>An unbelievably amazing new offer for you!</span
>
and
<span class="font-semibold text-blue-600">100 USD</span>
</a>
<!-- Unread indicator -->
<font-awesome
icon="circle"
class="text-rose-500 text-[8px] border border-rose-500 rounded-full"
></font-awesome>
</li>
<!-- Sample read item -->
<li
class="flex justify-between items-center gap-4 border-b border-slate-300 py-2"
>
<!-- Notification details -->
<a href="#" class="block text-slate-400">
<span class="font-semibold">Michael Smith</span>
offered
<span class="font-semibold"
>An unsurprisingly mediocre old offer for you</span
>
and
<span class="font-semibold">50 USD</span>
</a>
<!-- Read indicator -->
<font-awesome
icon="circle"
class="text-transparent text-[8px] border border-slate-300 rounded-full"
></font-awesome>
</li>
<li
v-for="offer in newOffersToUser"
:key="offer.jwtId"
@ -186,6 +135,57 @@
class="text-rose-500 text-[8px] border border-rose-500 rounded-full"
></font-awesome>
</li>
<!-- Sample read item -->
<li class="border-b border-slate-300 py-2">
<!-- Last viewed separator -->
<div
class="border-t border-dashed border-slate-300 text-orange-400 mt-4 mb-2 font-bold text-sm"
>
<span class="block w-fit mx-auto -mt-2.5 bg-white px-2">
You've already seen all the following
</span>
<hr class="border-slate-300 mt-4" />
</div>
<div class="flex justify-between items-center gap-4">
<!-- Notification details -->
<a href="#" class="block text-slate-400">
<span class="font-semibold">User One</span>
offered
<span class="font-semibold">Sample read notification item</span>
and
<span class="font-semibold">50 USD</span>
</a>
<!-- Read indicator -->
<font-awesome
icon="circle"
class="text-transparent text-[8px] border border-slate-300 rounded-full"
></font-awesome>
</div>
</li>
<!-- Sample read item -->
<li class="border-b border-slate-300 py-2">
<div class="flex justify-between items-center gap-4">
<!-- Notification details -->
<a href="#" class="block text-slate-400">
<span class="font-semibold">User One</span>
offered
<span class="font-semibold">Sample read notification item</span>
and
<span class="font-semibold">50 USD</span>
</a>
<!-- Read indicator -->
<font-awesome
icon="circle"
class="text-transparent text-[8px] border border-slate-300 rounded-full"
></font-awesome>
</div>
</li>
</ul>
</div>

Write Preview
Loading…
Cancel
Save