Skip to content

Commit fed844c

Browse files
conradolandiaconradolandia
committed
Improve layout of buttons
1 parent ec68712 commit fed844c

File tree

2 files changed

+25
-157
lines changed

2 files changed

+25
-157
lines changed

‎src/lib/components/ProjectCard.svelte‎

Lines changed: 3 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,156 +1,23 @@
11
<script>
2-
import { browser } from "$app/environment";
32
import Button from "$lib/components/Button.svelte";
43
import Loader from "$lib/components/Loader.svelte";
54
import ProgressBar from "$lib/components/ProgressBar.svelte";
6-
import { colourScheme } from "$lib/store";
75
import { checkImageExists } from "$lib/utils";
8-
import { afterUpdate, onMount } from "svelte";
96
import { locale } from "svelte-i18n";
107
118
export let project;
129
export let href;
1310
1411
let currencyOptions = { style: "currency", currency: "USD", maximumFractionDigits: 0 };
15-
let cardImageContainer;
16-
let canvasWidth = 0;
17-
let canvasHeight = 0;
18-
let isMobile = false;
19-
let redrawKey = 0; // To force component redraw
20-
21-
/**
22-
* Predefined Color Palettes
23-
*
24-
* Instead of dynamically generating colors, we use curated lists of pastel colors
25-
* that provide consistent, aesthetically pleasing visuals:
26-
*
27-
* - darkPastels: Used as backgrounds in light mode
28-
* - lightPastels: Used as backgrounds in dark mode
29-
*
30-
* Foreground colors are simplified:
31-
* - Light mode: White with 0.5 alpha
32-
* - Dark mode: Black with 0.5 alpha
33-
*/
34-
35-
// List of 12 dark pastel colors for light mode backgrounds - in RGB format
36-
const darkPastels = [
37-
[142, 85, 114], // Dark mauve
38-
[76, 109, 129], // Slate blue
39-
[110, 76, 125], // Plum
40-
[84, 120, 108], // Pine
41-
[87, 125, 90], // Forest green
42-
[138, 97, 65], // Cinnamon
43-
[93, 93, 105], // Pewter
44-
[125, 90, 60], // Russet
45-
[120, 71, 80], // Rusty rose
46-
[72, 99, 118], // Steel blue
47-
[117, 96, 54], // Bronze
48-
[95, 83, 121] // Dusty purple
49-
];
50-
51-
// List of 12 light pastel colors for dark mode backgrounds - in RGB format
52-
const lightPastels = [
53-
[245, 213, 226], // Light pink
54-
[209, 231, 245], // Baby blue
55-
[215, 241, 217], // Mint
56-
[245, 226, 204], // Peach
57-
[230, 213, 245], // Lavender
58-
[225, 225, 235], // Platinum
59-
[241, 227, 207], // Cream
60-
[209, 238, 230], // Seafoam
61-
[245, 215, 219], // Blush
62-
[217, 233, 244], // Powder blue
63-
[238, 232, 205], // Beige
64-
[226, 219, 241] // Periwinkle
65-
];
66-
67-
// Foreground colors will always be white/black with alpha
68-
const fgColors = {
69-
light: [0, 0, 0],
70-
dark: [255, 255, 255]
71-
};
72-
73-
// Select a random index for the color palettes (0-11)
74-
const colorIndex = Math.floor(Math.random() * 12);
75-
76-
// Create effect parameters (keeping some of the existing logic for visual variety)
77-
const effectParams = {
78-
linesCount: 10,
79-
stroke: 1,
80-
strokeAlpha: 50,
81-
};
82-
83-
// Background colors based on the randomly selected index
84-
const bgColors = {
85-
light: lightPastels[colorIndex],
86-
dark: darkPastels[colorIndex]
87-
};
88-
89-
// Calculate dimensions based on container width and device size
90-
const calculateDimensions = () => {
91-
if (!cardImageContainer || !browser) return;
92-
93-
// Get the container width
94-
const containerWidth = cardImageContainer.clientWidth;
95-
const newIsMobile = window.innerWidth < 768; // Matches the md: breakpoint in Tailwind
96-
97-
// Only update if dimensions actually changed
98-
if (canvasWidth !== containerWidth || isMobile !== newIsMobile) {
99-
canvasWidth = containerWidth;
100-
isMobile = newIsMobile;
101-
102-
// Set height based on aspect ratio
103-
if (isMobile) {
104-
// Square aspect ratio (1:1) for mobile
105-
canvasHeight = containerWidth;
106-
} else {
107-
// Video aspect ratio (16:9) for larger screens
108-
canvasHeight = containerWidth * (9 / 16);
109-
}
110-
111-
// Increment redraw key to force DynamicBg to reinitialize
112-
redrawKey++;
113-
}
114-
}
11512
11613
const imageExists = async () => await checkImageExists(project.image) ? true : false;
11714
118-
onMount(() => {
119-
if (browser) {
120-
calculateDimensions();
121-
window.addEventListener("resize", calculateDimensions);
122-
123-
return () => {
124-
window.removeEventListener("resize", calculateDimensions);
125-
};
126-
}
127-
});
128-
129-
afterUpdate(() => {
130-
if (browser) {
131-
calculateDimensions();
132-
}
133-
});
134-
135-
console.log(project);
136-
137-
$: progress = Math.min(project.donations.progress, 100);
138-
139-
// Recalculate dimensions when the window resizes
140-
$: if (browser && typeof window !== "undefined") {
141-
window.innerWidth; // This creates a dependency on window.innerWidth
142-
setTimeout(calculateDimensions, 0); // Schedule recalculation
143-
}
144-
145-
// Trigger redraw when color scheme changes
146-
$: if ($colourScheme) {
147-
redrawKey++; // Force redraw when color scheme changes
148-
}
15+
$: progress = Math.min(project.donations?.progress || 0, 100);
14916
</script>
15017
15118
<div class="group">
15219
<div class="card">
153-
<div class="card-image" bind:this={cardImageContainer}>
20+
<div class="card-image">
15421
{#await project.image && imageExists()}
15522
<Loader />
15623
{:then}
@@ -186,7 +53,7 @@
18653
{/if}
18754
{#if project.button && href}
18855
<div class="button-container">
189-
<Button text={project.button.text} highlight={true} icon="donate" iconSize={24} textSize="lg" {href} />
56+
<Button text={project.button.text} highlight={true} icon="info" iconSize={20} textSize="md" {href} />
19057
</div>
19158
{/if}
19259
</div>

‎src/routes/donate/+page.svelte‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -135,28 +135,29 @@
135135
{#if spyderProject.intro}
136136
<div class="card-content-large">{spyderProject.intro}</div>
137137
{/if}
138-
{#if spyderProject.secondaryButton}
139-
<div class="button-container">
140-
<Button
141-
text={spyderProject.secondaryButton.text}
142-
icon="more"
143-
textSize="sm"
144-
href={`/donate/${spyderProject.slug.toLowerCase()}`}
145-
/>
146-
</div>
147-
{/if}
148138
{#if spyderProject.button}
149-
<div class="button-container">
150-
<Button
151-
text={spyderProject.button.text}
152-
highlight={true}
153-
icon="donate"
154-
iconSize={24}
155-
textSize="lg"
156-
isLink={false}
157-
fullwidth={true}
158-
on:click={() => openDonationModal(spyderProject.donationLinkID)}
159-
/>
139+
<div class="button-container flex flex-col gap-4 md:flex-row">
140+
{#if spyderProject.button && spyderProject.button.text && spyderProject.donationLinkID}
141+
<Button
142+
text={spyderProject.button.text}
143+
highlight={true}
144+
icon="donate"
145+
iconSize={24}
146+
textSize="lg"
147+
isLink={false}
148+
fullwidth={true}
149+
on:click={() => openDonationModal(spyderProject.donationLinkID)}
150+
/>
151+
{/if}
152+
{#if spyderProject.secondaryButton && spyderProject.secondaryButton.text}
153+
<Button
154+
text={spyderProject.secondaryButton.text}
155+
icon="more"
156+
textSize="lg"
157+
fullwidth={true}
158+
href={`/donate/${spyderProject.slug.toLowerCase()}`}
159+
/>
160+
{/if}
160161
</div>
161162
{/if}
162163
</div>

0 commit comments

Comments
 (0)