forked from jsnbuchanan/crowd-funder-for-time-pwa
WIP: sticky tabs
This commit is contained in:
Jose Olarte III
@@ -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="mb-6">
|
<div class="bg-slate-200 rounded-lg overflow-hidden p-3 pt-2.5">
|
||||||
<div class="flex gap-2 items-center mb-2">
|
<div class="flex gap-2 items-center mb-2">
|
||||||
<h2 class="text-xl font-bold">Record something given by:</h2>
|
<h2 class="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-2 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-1.5 rounded-full"
|
||||||
@click="openGiftedPrompts()"
|
@click="openGiftedPrompts()"
|
||||||
>
|
>
|
||||||
<font-awesome
|
<font-awesome
|
||||||
icon="lightbulb"
|
icon="lightbulb"
|
||||||
class="block text-center w-[1em]"
|
class="block text-center text-sm 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-lg"
|
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()"
|
@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-lg"
|
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()"
|
@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
|
||||||
|
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
|
<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-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" />
|
<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"
|
||||||
|
|||||||
Reference in New Issue
Block a user