Skip to content

Commit 0b6f2d1

Browse files
bajrangCoderbajrangCoder
authored
feat: improved donation page (#1188)
1 parent 3d6a16c commit 0b6f2d1

File tree

5 files changed

+93
-59
lines changed

5 files changed

+93
-59
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
* updated ssh lib to `v3.1.2`
4141
* removed deprecated apis
4242
* experimental saving of native logs in acode logger
43+
* tweaked donation page
4344

4445
## v1.10.7 (955)
4546

‎src/pages/donate/donate.hbs‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<div id="donate-page" class="main">
2-
<div class="products">
3-
<div class="col">{{{col1}}}</div>
4-
<div class="col">{{{col2}}}</div>
2+
<div class="products" id="productsGrid">
3+
{{{card}}}
54
</div>
6-
</div>
5+
</div>

‎src/pages/donate/donate.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -134,25 +134,25 @@ export default function DonateInclude() {
134134

135135
products = products.map((product) => {
136136
product.image = `${BASE_URL}${product.productId === "bronze" ? "1.jpeg" : "2.jpeg"}`;
137+
product.isCoffee = product.productId === "bronze" ? true : false;
137138
product.donate = strings.donate.replace("{amount}", product.price);
139+
if (product.description && product.description.includes("-")) {
140+
[product.description, product.author] = product.description
141+
.split("-")
142+
.map((s) => s.trim());
143+
}
138144
return product;
139145
});
140146

141147
const col1 = [];
142-
const col2 = [];
143148
products.forEach((product, i) => {
144149
const html = mustache.render(productHBS, product);
145-
if (i % 2 === 0) {
146-
col1.push(html);
147-
return;
148-
}
149-
col2.push(html);
150+
col1.push(html);
150151
});
151152

152153
$page.body = helpers.parseHTML(
153154
mustache.render(bodyHBS, {
154-
col1: col1.join(""),
155-
col2: col2.join(""),
155+
card: col1.join(""),
156156
}),
157157
);
158158
helpers.showAd();

‎src/pages/donate/donate.scss‎

Lines changed: 63 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,77 @@
11
#donate-page {
22
overflow: auto;
3+
padding: 2rem;
34

45
.products {
5-
display: flex;
6-
justify-content: center;
7-
margin: 0 auto;
6+
display: grid;
7+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
8+
gap: 1.5rem;
89

9-
.col {
10+
.support-card {
11+
background: var(--primary-color);
12+
border-radius: 16px;
13+
padding: 2rem;
14+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
15+
transition:
16+
transform 0.2s,
17+
box-shadow 0.2s;
1018
display: flex;
1119
flex-direction: column;
12-
width: 42.5%;
13-
max-width: 450px;
14-
margin: 10px 5% 10px 2.5%;
15-
16-
&:nth-child(2n+1) {
17-
margin: 10px 2.5% 10px 5%;
20+
align-items: center;
21+
text-align: center;
22+
&:hover {
23+
transform: translateY(-4px);
24+
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
1825
}
19-
}
20-
21-
.product {
22-
width: 100%;
23-
margin-bottom: 10%;
24-
border-radius: 4px;
25-
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
26-
background-color: rgb(51, 153, 255);
27-
background-color: var(--primary-color);
28-
overflow: hidden;
29-
height: fit-content;
30-
min-height: 200px;
31-
32-
33-
img {
34-
width: 100%;
35-
min-height: 167px;
36-
height: auto;
26+
.support-icon {
27+
width: 120px;
28+
height: 120px;
29+
margin-bottom: 1.5rem;
30+
img {
31+
width: 100%;
32+
min-height: 167px;
33+
height: auto;
34+
}
35+
svg {
36+
width: 100%;
37+
height: 100%;
38+
}
39+
}
40+
.support-info {
41+
font-size: 1.1rem;
42+
line-height: 1.5;
43+
color: color-mix(in oklch, var(--primary-text-color), black 20%);
44+
margin-bottom: 1.5rem;
45+
flex-grow: 1;
46+
}
47+
.author {
48+
font-size: 0.9rem;
49+
color: color-mix(in oklch, var(--primary-text-color), black 40%);
50+
margin-bottom: 1.5rem;
3751
}
3852

39-
.product-info {
40-
margin-top: -4px;
41-
42-
p {
43-
padding: 10px;
44-
box-sizing: border-box;
45-
font-size: 0.8em;
46-
color: rgb(37, 37, 37);
47-
color: var(--secondary-text-color);
53+
.donate-button {
54+
background: var(--button-background-color);
55+
color: var(--button-text-color);
56+
border: none;
57+
padding: 0.75rem 2rem;
58+
border-radius: 8px;
59+
font-weight: 500;
60+
cursor: pointer;
61+
transition: all 0.2s;
62+
width: 100%;
63+
&:hover {
64+
background: var(--button-active-color);
65+
transform: translateY(-2px);
4866
}
4967
}
5068
}
51-
}
69+
.coffee .donate-button {
70+
background: #bb7d3d;
71+
}
5272

53-
}
73+
.coffee .donate-button:hover {
74+
background: #d3934f;
75+
}
76+
}
77+
}

‎src/pages/donate/product.hbs‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
1-
<div class="product">
2-
<img src="{{image}}" alt="{{id}}">
3-
<div class="product-info">
4-
<p>{{description}}</p>
5-
<div class="button-container primary">
6-
<button action="donate" value="{{json}}">{{donate}}</button>
1+
<div class="support-card {{#isCoffee}}coffee{{/isCoffee}}">
2+
<div class="support-icon">
3+
{{#isCoffee}}
4+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#bb7d3d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2v2"/><path d="M14 2v2"/><path d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1"/><path d="M6 2v2"/></svg>
5+
{{/isCoffee}}
6+
{{^isCoffee}}
7+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
8+
<path d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
9+
</svg>
10+
{{/isCoffee}}
711
</div>
8-
</div>
9-
</div>
12+
<p class="support-info">{{description}}</p>
13+
{{#author}}
14+
<p class="author">- {{author}}</p>
15+
{{/author}}
16+
<button class="donate-button" action="donate" value="{{json}}">
17+
{{donate}}
18+
</button>
19+
</div>

0 commit comments

Comments
 (0)