WIP: sticky tabs
This commit is contained in:
Jose Olarte III
@@ -80,53 +80,51 @@ Raymer * @version 1.0.0 */
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<!--
|
||||
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.
|
||||
-->
|
||||
<div class="mb-4">
|
||||
<RegistrationNotice
|
||||
v-if="!isUserRegistered"
|
||||
:passkeys-enabled="PASSKEYS_ENABLED"
|
||||
:given-name="givenName"
|
||||
message="To share, someone must register you."
|
||||
/>
|
||||
<!--
|
||||
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.
|
||||
-->
|
||||
<div class="mb-6">
|
||||
<RegistrationNotice
|
||||
v-if="!isUserRegistered"
|
||||
:passkeys-enabled="PASSKEYS_ENABLED"
|
||||
:given-name="givenName"
|
||||
message="To share, someone must register you."
|
||||
/>
|
||||
|
||||
<div v-if="isUserRegistered" id="sectionRecordSomethingGiven">
|
||||
<!-- Record Quick-Action -->
|
||||
<div class="mb-6">
|
||||
<div class="flex gap-2 items-center mb-2">
|
||||
<h2 class="text-xl font-bold">Record something given by:</h2>
|
||||
<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-2 rounded-full"
|
||||
@click="openGiftedPrompts()"
|
||||
>
|
||||
<font-awesome
|
||||
icon="lightbulb"
|
||||
class="block text-center w-[1em]"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="isUserRegistered" id="sectionRecordSomethingGiven">
|
||||
<!-- Record Quick-Action -->
|
||||
<div class="bg-slate-200 rounded-lg overflow-hidden p-3 pt-2.5">
|
||||
<div class="flex gap-2 items-center mb-2">
|
||||
<h2 class="font-bold">Record something given by:</h2>
|
||||
<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"
|
||||
@click="openGiftedPrompts()"
|
||||
>
|
||||
<font-awesome
|
||||
icon="lightbulb"
|
||||
class="block text-center text-sm w-[1em]"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<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-lg"
|
||||
@click="openPersonDialog()"
|
||||
>
|
||||
<font-awesome icon="user" />
|
||||
Person
|
||||
</button>
|
||||
<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-lg"
|
||||
@click="openProjectDialog()"
|
||||
>
|
||||
<font-awesome icon="folder-open" />
|
||||
Project
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<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"
|
||||
@click="openPersonDialog()"
|
||||
>
|
||||
<font-awesome icon="user" />
|
||||
Person
|
||||
</button>
|
||||
<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"
|
||||
@click="openProjectDialog()"
|
||||
>
|
||||
<font-awesome icon="folder-open" />
|
||||
Project
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -138,36 +136,11 @@ Raymer * @version 1.0.0 */
|
||||
:recipient-entity-type="'person'"
|
||||
/>
|
||||
<GiftedPrompts ref="giftedPrompts" />
|
||||
<FeedFilters ref="feedFilters" />
|
||||
|
||||
<!-- Results List -->
|
||||
<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 -->
|
||||
<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
|
||||
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>
|
||||
|
||||
<!-- 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
|
||||
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" />
|
||||
<div class="text-xs sm:text-sm mt-1">activity</div>
|
||||
</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="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>
|
||||
<div class="text-xs sm:text-sm mt-1">offers</div>
|
||||
|
||||
<!-- Unread count -->
|
||||
<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"
|
||||
>
|
||||
<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 -->
|
||||
<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"
|
||||
>
|
||||
<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 -->
|
||||
<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"
|
||||
>
|
||||
<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 -->
|
||||
<span
|
||||
@@ -305,6 +280,27 @@ Raymer * @version 1.0.0 */
|
||||
</button>
|
||||
</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 -->
|
||||
<div
|
||||
v-if="false"
|
||||
|
||||
Reference in New Issue
Block a user