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

Merge pull request 'Rework Thanks Button' (#234) from thanks-button-rework into master

Browse Source 
Reviewed-on: #234
This commit was merged in pull request #234.
This commit is contained in:
Jose Olarte 3
2026-06-19 07:21:37 +00:00
parent 6c0907d905 903047f13b
commit fe97dff752
2 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/EntitySelectionStep.vue
View File

@@ -8,14 +8,14 @@ notifications for conflicted entities * - Template streamlined with computed CSS
properties * * @author Matthew Raymer */ properties * * @author Matthew Raymer */
<template> <template>
<div id="sectionGiftedGiver"> <div id="sectionGiftedGiver">
<label class="block font-bold mb-1"> <label class="block font-semibold text-lg capitalize text-center">
{{ stepLabel }} {{ stepLabel }}
</label> </label>
<!-- Toggle link for entity type selection --> <!-- Toggle link for entity type selection -->
<div class="text-right mb-4"> <div class="text-center mb-4">
<button <button
type="button" type="button"
class="text-sm text-blue-600 hover:text-blue-800 underline font-medium" class="text-xs text-blue-600 hover:underline uppercase"
@click="handleToggleEntityType" @click="handleToggleEntityType"
> >
{{ toggleLinkText }} {{ toggleLinkText }}

42
src/views/HomeView.vue
View File

@@ -109,12 +109,14 @@ Raymer * @version 1.0.0 */
<div v-if="isUserRegistered" id="sectionRecordSomethingGiven"> <div v-if="isUserRegistered" id="sectionRecordSomethingGiven">
<!-- Record Quick-Action --> <!-- Record Quick-Action -->
<div class="mb-6"> <div
<div class="flex gap-2 items-center mb-2"> class="bg-slate-100 border border-slate-300 rounded-md px-4 py-2.5 mb-4"
>
<div class="flex gap-2 justify-between items-center ps-8">
<!-- Thank button - always visible and unchanged --> <!-- Thank button - always visible and unchanged -->
<button <button
type="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 px-4 py-3 rounded-full" class="text-center text-xl uppercase font-bold 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 mx-auto px-6 py-2 rounded-lg"
@click="openPersonDialog()" @click="openPersonDialog()"
> >
<font-awesome icon="plus" /> <font-awesome icon="plus" />
@@ -122,25 +124,29 @@ Raymer * @version 1.0.0 */
</button> </button>
<!-- Plus button - appears when scrolled, positioned over house-chimney icon --> <!-- Plus button - appears when scrolled, positioned over house-chimney icon -->
<transition <transition
enter-active-class="transition-all duration-1000 ease-out" enter-active-class="transition-all duration-500 ease-out"
leave-active-class="transition-all duration-1000 ease-in" leave-active-class="transition-all duration-500 ease-in"
enter-from-class="scale-0" enter-from-class="opacity-0"
enter-to-class="scale-100" enter-to-class="opacity-100"
leave-from-class="scale-100" leave-from-class="opacity-100"
leave-to-class="scale-0" leave-to-class="opacity-0"
> >
<button <div
v-if="isScrolled" v-if="isScrolled"
type="button" class="bg-gradient-to-t from-white to-transparent fixed inset-x-0 bottom-[calc(4.75rem+max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px)))] px-4 pb-3 w-full z-[49]"
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
</button> type="button"
class="text-center text-xl uppercase font-bold 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 mx-auto px-6 py-2 rounded-lg drop-shadow-[0_0_10px_rgba(255,255,255,1)]"
@click="openPersonDialog()"
>
<font-awesome icon="plus" />
<span>Thank</span>
</button>
</div>
</transition> </transition>
<button <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" class="block 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()" @click="openGiftedPrompts()"
> >
<font-awesome <font-awesome
@@ -559,7 +565,7 @@ export default class HomeView extends Vue {
const scrollTop = appElement const scrollTop = appElement
? appElement.scrollTop ? appElement.scrollTop
: window.pageYOffset || document.documentElement.scrollTop || 0; : window.pageYOffset || document.documentElement.scrollTop || 0;
const shouldBeScrolled = scrollTop > 100; const shouldBeScrolled = scrollTop > 120;
if (this.isScrolled !== shouldBeScrolled) { if (this.isScrolled !== shouldBeScrolled) {
this.isScrolled = shouldBeScrolled; this.isScrolled = shouldBeScrolled;
} }