Browse Source

WIP: sticky tabs

notification-system
Jose Olarte III 4 weeks ago
parent
commit
e655082af6
  1. 158
      src/views/HomeView.vue

158
src/views/HomeView.vue

@ -80,53 +80,51 @@ Raymer * @version 1.0.0 */
</router-link> </router-link>
</div> </div>
<div class="mb-8"> <!--
<!-- They should have an identifier, even if it's an auto-generated one that they'll never use.
They should have an identifier, even if it's an auto-generated one that they'll never use. Identity creation is now handled by router navigation guard.
Identity creation is now handled by router navigation guard. -->
--> <div class="mb-6">
<div class="mb-4"> <RegistrationNotice
<RegistrationNotice v-if="!isUserRegistered"
v-if="!isUserRegistered" :passkeys-enabled="PASSKEYS_ENABLED"
:passkeys-enabled="PASSKEYS_ENABLED" :given-name="givenName"
:given-name="givenName" message="To share, someone must register you."
message="To share, someone must register you." />
/>
<div v-if="isUserRegistered" id="sectionRecordSomethingGiven">
<div v-if="isUserRegistered" id="sectionRecordSomethingGiven"> <!-- Record Quick-Action -->
<!-- Record Quick-Action --> <div class="bg-slate-200 rounded-lg overflow-hidden p-3 pt-2.5">
<div class="mb-6"> <div class="flex gap-2 items-center mb-2">
<div class="flex gap-2 items-center mb-2"> <h2 class="font-bold">Record something given by:</h2>
<h2 class="text-xl font-bold">Record something given by:</h2> <button
<button class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full" @click="openGiftedPrompts()"
@click="openGiftedPrompts()" >
> <font-awesome
<font-awesome icon="lightbulb"
icon="lightbulb" class="block text-center text-sm w-[1em]"
class="block text-center w-[1em]" />
/> </button>
</button> </div>
</div>
<div class="grid grid-cols-2 gap-2">
<div class="grid grid-cols-2 gap-2"> <button
<button type="button"
type="button" class="text-center text-base uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-2 rounded-md"
class="text-center text-base uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-2 rounded-lg" @click="openPersonDialog()"
@click="openPersonDialog()" >
> <font-awesome icon="user" />
<font-awesome icon="user" /> Person
Person </button>
</button> <button
<button type="button"
type="button" class="text-center text-base uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-2 rounded-md"
class="text-center text-base uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-2 rounded-lg" @click="openProjectDialog()"
@click="openProjectDialog()" >
> <font-awesome icon="folder-open" />
<font-awesome icon="folder-open" /> Project
Project </button>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -138,36 +136,11 @@ Raymer * @version 1.0.0 */
:recipient-entity-type="'person'" :recipient-entity-type="'person'"
/> />
<GiftedPrompts ref="giftedPrompts" /> <GiftedPrompts ref="giftedPrompts" />
<FeedFilters ref="feedFilters" />
<!-- Results List --> <!-- Results List -->
<div class="mt-4 mb-4"> <div class="mt-4 mb-4">
<div class="flex gap-2 items-center mb-3">
<h2 class="text-xl font-bold">Latest Activity</h2>
<button
v-if="resultsAreFiltered()"
class="block ms-auto text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
@click="openFeedFilters()"
>
<font-awesome
icon="filter"
class="block text-center w-[1em] translate-y-[0.05em]"
/>
</button>
<button
v-else
class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
@click="openFeedFilters()"
>
<font-awesome
icon="filter"
class="block text-center w-[1em] translate-y-[0.05em]"
/>
</button>
</div>
<!-- ALTERNATIVE UI: Feed + Notification Accordion --> <!-- ALTERNATIVE UI: Feed + Notification Accordion -->
<div class="text-lg font-semibold border-t border-slate-300"> <div v-if="false" class="text-lg font-semibold border-t border-slate-300">
<button <button
class="w-full flex justify-between items-center gap-1 border-b border-slate-300 py-2 leading-none" class="w-full flex justify-between items-center gap-1 border-b border-slate-300 py-2 leading-none"
> >
@ -248,18 +221,20 @@ Raymer * @version 1.0.0 */
</div> </div>
<!-- ALTERNATIVE UI: Feed + Notification Tabs --> <!-- ALTERNATIVE UI: Feed + Notification Tabs -->
<div v-if="false" class="grid grid-cols-5 text-xl"> <div
class="sticky top-0 z-50 grid grid-cols-5 text-xl sm:text-2xl pt-4 pb-1 px-1 -mt-3 -mx-1 mb-4 bg-white rounded-b-[10px]"
>
<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" class="relative text-center bg-slate-400 text-white 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" /> <font-awesome icon="scroll" />
<div class="text-xs mt-1">feed</div> <div class="text-xs sm:text-sm mt-1">activity</div>
</button> </button>
<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" 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="hand-holding-heart" /> <font-awesome icon="hand-holding-heart" />
<div class="text-xs mt-1">offers</div> <div class="text-xs sm:text-sm mt-1">offers</div>
<!-- Unread count --> <!-- Unread count -->
<span <span
@ -271,7 +246,7 @@ Raymer * @version 1.0.0 */
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" 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" /> <font-awesome icon="folder-open" />
<div class="text-xs mt-1">projects</div> <div class="text-xs sm:text-sm mt-1">projects</div>
<!-- Unread count --> <!-- Unread count -->
<span <span
@ -283,7 +258,7 @@ Raymer * @version 1.0.0 */
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" 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" /> <font-awesome icon="users" />
<div class="text-xs mt-1">people</div> <div class="text-xs sm:text-sm mt-1">people</div>
<!-- Unread count --> <!-- Unread count -->
<span <span
@ -295,7 +270,7 @@ Raymer * @version 1.0.0 */
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" 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" /> <font-awesome icon="image" />
<div class="text-xs mt-1">items</div> <div class="text-xs sm:text-sm mt-1">items</div>
<!-- Unread count --> <!-- Unread count -->
<span <span
@ -305,6 +280,27 @@ Raymer * @version 1.0.0 */
</button> </button>
</div> </div>
<div class="flex gap-2 items-center justify-between mb-2 text-sm">
<h2 class="text-base font-bold">Latest Activity</h2>
<button
v-if="resultsAreFiltered()"
class="flex items-center justify-end gap-2 bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1 rounded"
@click="openFeedFilters()"
>
Filter
<font-awesome icon="filter"></font-awesome>
</button>
<button
v-else
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"
@click="openFeedFilters()"
>
Filter
<font-awesome icon="filter"></font-awesome>
</button>
</div>
<FeedFilters ref="feedFilters" />
<!-- Notification Counts --> <!-- Notification Counts -->
<div <div
v-if="false" v-if="false"

Loading…
Cancel
Save