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

WIP: alternative notification UI

notification-system
Jose Olarte III 4 weeks ago
parent
39dbbb08f7
commit
ea2fa30903
2 changed files with 143 additions and 1 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. 2
      src/libs/fontawesome.ts
  2. 142
      src/views/HomeView.vue

2
src/libs/fontawesome.ts
View File

@ -80,6 +80,7 @@ import {
faQuestion,
faRightFromBracket,
faRotate,
faScroll,
faShareNodes,
faSpinner,
faSquare,
@ -169,6 +170,7 @@ library.add(
faQrcode,
faQuestion,
faRotate,
faScroll,
faRightFromBracket,
faShareNodes,
faSpinner,

142
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-2">
<div class="flex gap-2 items-center mb-3">
<h2 class="text-xl font-bold">Latest Activity</h2>
<button
v-if="resultsAreFiltered()"
@ -166,8 +166,148 @@ Raymer * @version 1.0.0 */
</button>
</div>
<!-- ALTERNATIVE UI: Feed + Notification Accordion -->
<div class="text-lg font-semibold border-t border-slate-300">
<button
class="w-full flex justify-between items-center gap-1 border-b border-slate-300 py-2 leading-none"
>
<font-awesome
icon="chevron-right"
class="fa-fw text-xs text-slate-500"
/>
<font-awesome icon="scroll" class="fa-fw text-slate-500" />
<div class="me-auto text-base">Feed</div>
</button>
<button
class="w-full flex justify-between items-center gap-1 border-b border-slate-300 py-2 leading-none"
>
<font-awesome
icon="chevron-right"
class="fa-fw text-xs text-slate-500"
/>
<font-awesome
icon="hand-holding-heart"
class="fa-fw text-slate-500"
/>
<div class="me-auto text-base">Offers</div>
<!-- Unread count -->
<span
class="bg-rose-500 text-white text-sm font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
>2</span
>
</button>
<button
class="w-full flex justify-between items-center gap-1 border-b border-slate-300 py-2 leading-none"
>
<font-awesome
icon="chevron-right"
class="fa-fw text-xs text-slate-500"
/>
<font-awesome icon="folder-open" class="fa-fw text-slate-500" />
<div class="me-auto text-base">Projects</div>
<!-- Unread count -->
<span
class="bg-rose-500 text-white text-sm font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
>50+</span
>
</button>
<button
class="w-full flex justify-between items-center gap-1 border-b border-slate-300 py-2 leading-none"
>
<font-awesome
icon="chevron-right"
class="fa-fw text-xs text-slate-500"
/>
<font-awesome icon="users" class="fa-fw text-slate-500" />
<div class="me-auto text-base">People</div>
<!-- Unread count -->
<span
class="bg-rose-500 text-white text-sm font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
>4</span
>
</button>
<button
class="w-full flex justify-between items-center gap-1 border-b border-slate-300 py-2 leading-none"
>
<font-awesome
icon="chevron-right"
class="fa-fw text-xs text-slate-500"
/>
<font-awesome icon="image" class="fa-fw text-slate-500" />
<div class="me-auto text-base">Items</div>
<!-- Unread count -->
<span
class="bg-rose-500 text-white text-sm font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
>7</span
>
</button>
</div>
<!-- ALTERNATIVE UI: Feed + Notification Tabs -->
<div v-if="false" class="grid grid-cols-5 text-xl">
<button
class="relative text-center bg-slate-200 text-slate-500 px-1 pt-3 pb-2 first:rounded-s-md last:rounded-e-md border-r border-slate-300 last:border-r-0 leading-none"
>
<font-awesome icon="scroll" />
<div class="text-xs mt-1">feed</div>
</button>
<button
class="relative text-center px-1 bg-slate-400 text-white pt-3 pb-2 first:rounded-s-md last:rounded-e-md border-r border-slate-300 last:border-r-0 leading-none"
>
<font-awesome icon="hand-holding-heart" />
<div class="text-xs mt-1">offers</div>
<!-- Unread count -->
<span
class="absolute -top-2 -translate-x-1/2 bg-rose-500 text-white border border-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
>2</span
>
</button>
<button
class="relative text-center bg-slate-200 text-slate-500 px-1 pt-3 pb-2 first:rounded-s-md last:rounded-e-md border-r border-slate-300 last:border-r-0 leading-none"
>
<font-awesome icon="folder-open" />
<div class="text-xs mt-1">projects</div>
<!-- Unread count -->
<span
class="absolute -top-2 -translate-x-1/2 bg-rose-500 text-white border border-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
>50+</span
>
</button>
<button
class="relative text-center bg-slate-200 text-slate-500 px-1 pt-3 pb-2 first:rounded-s-md last:rounded-e-md border-r border-slate-300 last:border-r-0 leading-none"
>
<font-awesome icon="users" />
<div class="text-xs mt-1">people</div>
<!-- Unread count -->
<span
class="absolute -top-2 -translate-x-1/2 bg-rose-500 text-white border border-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
>4</span
>
</button>
<button
class="relative text-center bg-slate-200 text-slate-500 px-1 pt-3 pb-2 first:rounded-s-md last:rounded-e-md border-r border-slate-300 last:border-r-0 leading-none"
>
<font-awesome icon="image" />
<div class="text-xs mt-1">items</div>
<!-- Unread count -->
<span
class="absolute -top-2 -translate-x-1/2 bg-rose-500 text-white border border-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
>7</span
>
</button>
</div>
<!-- Notification Counts -->
<div
v-if="false"
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()"
>

Write Preview
Loading…
Cancel
Save