From 8d3553c50f4294422679204fc9ef9efe6056b1a2 Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Tue, 10 Jun 2025 21:09:15 +0200 Subject: [PATCH 01/13] Progress component --- .../support-us/BecomeSupportingMember.astro | 42 +++----- .../support-us/DonationMethods.astro | 2 +- .../support-us/FundraisingProgress.svelte | 96 +++++++++++++++++++ 3 files changed, 110 insertions(+), 30 deletions(-) create mode 100644 src/components/support-us/FundraisingProgress.svelte diff --git a/src/components/support-us/BecomeSupportingMember.astro b/src/components/support-us/BecomeSupportingMember.astro index 55073ec2..46b0b0e1 100644 --- a/src/components/support-us/BecomeSupportingMember.astro +++ b/src/components/support-us/BecomeSupportingMember.astro @@ -1,44 +1,28 @@ --- -import Background from '@assets/support-us/background-supporting-member.png'; import Button from '@components/Button.astro'; -import { getImage } from 'astro:assets'; -import Disclosure from './Disclosure.svelte'; - -const backgroundImage = await getImage({ height: 1080, src: Background, width: 1920 }); +import FundraisingProgress from './FundraisingProgress.svelte'; --- -
+

Werde Fördermitglied

Deine Chance uns zu unterstützen und mehr über uns zu erfahren!

+

+ +

Du willst junge Menschen auf ihrer Reise zur persönlichen Entwicklung und zur aktiven - Gestaltung unserer Gesellschaft begleiten? Erfahre hier, wie du uns unterstützen kannst! + Gestaltung unserer Gesellschaft begleiten?

-
- - diff --git a/src/components/support-us/DonationMethods.astro b/src/components/support-us/DonationMethods.astro index a49f69a4..f61c68e6 100644 --- a/src/components/support-us/DonationMethods.astro +++ b/src/components/support-us/DonationMethods.astro @@ -10,7 +10,7 @@ import DonationMethodTabs from './DonationMethodTabs.svelte'; const possibilities = await getDonationMethods(); --- -
+

Weitere Möglichkeiten, uns zu unterstützen

diff --git a/src/components/support-us/FundraisingProgress.svelte b/src/components/support-us/FundraisingProgress.svelte new file mode 100644 index 00000000..2ecac9ca --- /dev/null +++ b/src/components/support-us/FundraisingProgress.svelte @@ -0,0 +1,96 @@ + + +

+ + + + + + + + + + + + + {currentProgress}€ + +
+ +
+
+ + + {currentProgress} +
+
+ + + {targetProgress} +
+
+ + + {middleProgress} +
+
From cb783173529c5e8ee3db3260eb1b34af879716ff Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Wed, 11 Jun 2025 09:27:40 +0200 Subject: [PATCH 02/13] Wavy progress --- .../support-us/FundraisingProgress.svelte | 46 ++++++++++++++++++- 1 file changed, 44 insertions(+), 2 deletions(-) diff --git a/src/components/support-us/FundraisingProgress.svelte b/src/components/support-us/FundraisingProgress.svelte index 2ecac9ca..5cb802cc 100644 --- a/src/components/support-us/FundraisingProgress.svelte +++ b/src/components/support-us/FundraisingProgress.svelte @@ -1,7 +1,14 @@ @@ -28,7 +55,22 @@ > - + From a2783ed370ba8a5bd6b03ecfc42c1f7437e755fb Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Wed, 11 Jun 2025 17:06:01 +0200 Subject: [PATCH 03/13] Store pure YV logo as component --- src/assets/icons/YoungVisionLogoOnly.svelte | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 src/assets/icons/YoungVisionLogoOnly.svelte diff --git a/src/assets/icons/YoungVisionLogoOnly.svelte b/src/assets/icons/YoungVisionLogoOnly.svelte new file mode 100644 index 00000000..b9a58a8a --- /dev/null +++ b/src/assets/icons/YoungVisionLogoOnly.svelte @@ -0,0 +1,14 @@ + + + + + + + From 058d225d7adf6df6f03bf4d048108933f7dd8131 Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Wed, 11 Jun 2025 17:06:23 +0200 Subject: [PATCH 04/13] Clean up --- src/components/support-us/FundraisingProgress.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/support-us/FundraisingProgress.svelte b/src/components/support-us/FundraisingProgress.svelte index 5cb802cc..d3aeeb72 100644 --- a/src/components/support-us/FundraisingProgress.svelte +++ b/src/components/support-us/FundraisingProgress.svelte @@ -1,7 +1,7 @@ -
- - - - +
+ + + + + + + + + + + + + {#if currentProgress <= middleProgress} + + - - - - - - - - - {currentProgress}€{middleProgress}€ + {/if} + {currentProgress}€ + +
+ +
= middleProgress ? 'flex-col-reverse' : 'flex-col', // Show next unfulfilled target first + ]} + > +
= middleProgress && 'text-dark-green', + 'lg:absolute lg:top-[88px] lg:right-1/3 lg:w-48', + ]} + > +

+ {middleProgress}€ / Monat + {#if currentProgress >= middleProgress} + + + {/if} +

+

Rebecca kann ihren Job aufhören um ihre Zeit YV zu widmen.

+
+
= targetProgress && 'text-dark-green', + 'lg:absolute lg:top-1/8 lg:right-0 lg:w-48', + ]} > - +

+ {targetProgress}€ / Monat + {#if currentProgress >= targetProgress} + + + {/if} +

+

Hiermit muss Rebecca keinen Minijob nebenbei machen.

+
+
@@ -125,14 +219,4 @@ {currentProgress}
-
- - - {targetProgress} -
-
- - - {middleProgress} -
From 12792304a5a0ba486eecccf4c1e749fca9fedc38 Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Thu, 12 Jun 2025 17:32:18 +0200 Subject: [PATCH 07/13] Simulate progress --- .../support-us/BecomeSupportingMember.astro | 2 +- .../support-us/FundraisingProgress.svelte | 18 +++++++++++++++--- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/components/support-us/BecomeSupportingMember.astro b/src/components/support-us/BecomeSupportingMember.astro index 45386021..a4cffee5 100644 --- a/src/components/support-us/BecomeSupportingMember.astro +++ b/src/components/support-us/BecomeSupportingMember.astro @@ -11,7 +11,7 @@ import FundraisingProgress from './FundraisingProgress.svelte'; Deine Chance uns zu unterstützen und mehr über uns zu erfahren!

- +

Du willst junge Menschen auf ihrer Reise zur persönlichen Entwicklung und zur aktiven diff --git a/src/components/support-us/FundraisingProgress.svelte b/src/components/support-us/FundraisingProgress.svelte index 29c83a15..b9c769ab 100644 --- a/src/components/support-us/FundraisingProgress.svelte +++ b/src/components/support-us/FundraisingProgress.svelte @@ -4,12 +4,10 @@ import { Tween } from 'svelte/motion'; let currentProgress = $state(236); - let targetProgress = $state(1325); - let middleProgress = $state(965); + const { targetProgress, middleProgress } = $props(); let waveOffset = $state(0); let animationFrame: number; - // const relativeProgress = $derived(currentProgress / targetProgress); const relativeProgress = $derived.by(() => { if (currentProgress <= middleProgress) { // the yellow triangle ends at around a height of 72 @@ -219,4 +217,18 @@ {currentProgress} + From 83ae3b34437c6065eaac4af643320660fde6184b Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Thu, 12 Jun 2025 15:35:09 +0000 Subject: [PATCH 08/13] [autofix.ci] apply automated fixes --- src/components/support-us/FundraisingProgress.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/support-us/FundraisingProgress.svelte b/src/components/support-us/FundraisingProgress.svelte index b9c769ab..52e2b790 100644 --- a/src/components/support-us/FundraisingProgress.svelte +++ b/src/components/support-us/FundraisingProgress.svelte @@ -4,7 +4,7 @@ import { Tween } from 'svelte/motion'; let currentProgress = $state(236); - const { targetProgress, middleProgress } = $props(); + const { middleProgress, targetProgress } = $props(); let waveOffset = $state(0); let animationFrame: number; From bc0fdfea553bd991bab91f187c046b3f9f85fbe4 Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Thu, 12 Jun 2025 18:10:41 +0200 Subject: [PATCH 09/13] Fix duplicate svelte rendering --- src/components/support-us/BecomeSupportingMember.astro | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/support-us/BecomeSupportingMember.astro b/src/components/support-us/BecomeSupportingMember.astro index a4cffee5..bdf73cae 100644 --- a/src/components/support-us/BecomeSupportingMember.astro +++ b/src/components/support-us/BecomeSupportingMember.astro @@ -10,9 +10,9 @@ import FundraisingProgress from './FundraisingProgress.svelte';

Deine Chance uns zu unterstützen und mehr über uns zu erfahren!

-

- -

+
+ +

Du willst junge Menschen auf ihrer Reise zur persönlichen Entwicklung und zur aktiven Gestaltung unserer Gesellschaft begleiten? From 24c2cda6ca517c91c0b358d780bd8e7754b96cd2 Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Thu, 12 Jun 2025 18:10:52 +0200 Subject: [PATCH 10/13] Code cleanup --- .../support-us/FundraisingProgress.svelte | 30 +++++++------------ 1 file changed, 10 insertions(+), 20 deletions(-) diff --git a/src/components/support-us/FundraisingProgress.svelte b/src/components/support-us/FundraisingProgress.svelte index 52e2b790..c90db9ac 100644 --- a/src/components/support-us/FundraisingProgress.svelte +++ b/src/components/support-us/FundraisingProgress.svelte @@ -1,12 +1,9 @@ @@ -56,7 +46,7 @@ From 5a371737f265f05b7eadd1bb0778bcf7e600e9cc Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Fri, 13 Jun 2025 19:31:15 +0200 Subject: [PATCH 11/13] Make progress always visible --- src/components/support-us/FundraisingProgress.svelte | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/support-us/FundraisingProgress.svelte b/src/components/support-us/FundraisingProgress.svelte index c90db9ac..df955dcd 100644 --- a/src/components/support-us/FundraisingProgress.svelte +++ b/src/components/support-us/FundraisingProgress.svelte @@ -5,6 +5,8 @@ const { middleProgress, targetProgress } = $props(); let waveOffset = $state(0); + let finished = $derived(currentProgress >= targetProgress); + const relativeProgress = $derived.by(() => { if (currentProgress <= middleProgress) { // the yellow triangle ends at around a height of 72 @@ -15,6 +17,9 @@ }); onMount(() => { + if (finished) { + return; + } let animationFrame: number; const animateWave = (timestamp: number) => { @@ -46,7 +51,7 @@ Date: Fri, 13 Jun 2025 20:00:03 +0200 Subject: [PATCH 12/13] Small optimizations --- .../support-us/BecomeSupportingMember.astro | 2 +- .../support-us/FundraisingProgress.svelte | 59 ++++++++++--------- 2 files changed, 32 insertions(+), 29 deletions(-) diff --git a/src/components/support-us/BecomeSupportingMember.astro b/src/components/support-us/BecomeSupportingMember.astro index bdf73cae..4c949e26 100644 --- a/src/components/support-us/BecomeSupportingMember.astro +++ b/src/components/support-us/BecomeSupportingMember.astro @@ -11,7 +11,7 @@ import FundraisingProgress from './FundraisingProgress.svelte'; Deine Chance uns zu unterstützen und mehr über uns zu erfahren!

- +

Du willst junge Menschen auf ihrer Reise zur persönlichen Entwicklung und zur aktiven diff --git a/src/components/support-us/FundraisingProgress.svelte b/src/components/support-us/FundraisingProgress.svelte index df955dcd..5d4094a0 100644 --- a/src/components/support-us/FundraisingProgress.svelte +++ b/src/components/support-us/FundraisingProgress.svelte @@ -47,10 +47,11 @@ xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 117 100" > - - - + + - - - - - - - + transform={`translate(${waveOffset}, 0)`} + /> + + + + + + + + + {/if}

-
+
- {middleProgress}€{middleProgress}€ {/if} - {currentProgress}€{currentProgress}€ +

+ Dank {peopleCount} Menschen +

= middleProgress ? 'flex-col-reverse' : 'flex-col', // Show next unfulfilled target first ]} > @@ -209,12 +224,17 @@
-
+
{currentProgress}
+
+ + + {peopleCount} +