trentlarson/crowd-funder-from-jason
1
0
Fork 0
forked from jsnbuchanan/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

feat: make it so there's no jump when scrolling down on home feed, and the new "+" slowly appears

Browse Source
This commit is contained in:
Trent Larson
2025-12-18 08:46:36 -07:00
parent 0697b14411
commit 7ef5889185
1 changed files with 22 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/views/HomeView.vue
View File

@@ -111,24 +111,34 @@ Raymer * @version 1.0.0 */
<!-- Record Quick-Action -->
<div class="mb-6">
<div class="flex gap-2 items-center mb-2">
<!-- eslint-disable prettier/prettier max-len -->
<!-- Thank button - always visible and unchanged -->
<button
type="button"
:class="[
'text-center text-base uppercase bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white flex items-center justify-center gap-2 transition-all duration-300 rounded-full',
isScrolled
? 'fixed bottom-10 p-4 w-14 h-14 z-50'
: 'px-4 py-3',
]"
:style="isScrolled ? getButtonPosition() : {}"
class="text-center text-base uppercase bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white flex items-center justify-center gap-2 px-4 py-3 rounded-full"
@click="openPersonDialog()"
>
<font-awesome icon="plus" />
<span v-if="!isScrolled" class="transition-opacity duration-300"
>Thank</span
>
<span>Thank</span>
</button>
<!-- eslint-enable prettier/prettier -->
<!-- Plus button - appears when scrolled, positioned over house-chimney icon -->
<transition
enter-active-class="transition-all duration-1000 ease-out"
leave-active-class="transition-all duration-1000 ease-in"
enter-from-class="scale-0"
enter-to-class="scale-100"
leave-from-class="scale-100"
leave-to-class="scale-0"
>
<button
v-if="isScrolled"
type="button"
class="fixed bottom-10 p-4 w-14 h-14 z-50 text-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-full flex items-center justify-center"
:style="getButtonPosition()"
@click="openPersonDialog()"
>
<font-awesome icon="plus" />
</button>
</transition>
<button
class="block ms-auto text-sm 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()"