Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-04-25 16:09:59 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: add donation goal overflow

Browse Source
This commit is contained in:
Ash Gray 2023-04-15 23:00:44 +02:00
parent 27feb7f9c4
commit c90fa18062
No known key found for this signature in database
GPG Key ID: 740B7C88251D49B6
5 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/assets/css/main.css
View File

@ -649,7 +649,7 @@ section.update-signup div.circle {
/* Progress */ /* Progress */
.donation-progress { .donation-progress {
padding: 50px 20px; padding: 72px 72px;
border-radius: 10px; border-radius: 10px;
background: var(--bg-shade-0); background: var(--bg-shade-0);
grid-column: span 2; grid-column: span 2;
@ -670,6 +670,11 @@ section.update-signup div.circle {
text-decoration: underline; text-decoration: underline;
} }
.donation-progress .cucui-dance {
height: 2em;
margin-bottom: -0.6em;
}
.progress-bar { .progress-bar {
position: relative; position: relative;
display: block; display: block;
@ -678,11 +683,20 @@ section.update-signup div.circle {
margin: 1rem 0; margin: 1rem 0;
border-radius: 6px; border-radius: 6px;
background: var(--bg-shade-3); background: var(--bg-shade-3);
overflow: hidden;
} }
.progress-bar-inner { .progress-bar-real,
.progress-bar-capped {
position: absolute;
height: 100%; height: 100%;
border-radius: 6px;
width: var(--progress-bar-width);
}
.progress-bar-capped {
background-color: var(--accent-shade-0); background-color: var(--accent-shade-0);
max-width: 100%;
}
.progress-bar-real {
background-color: var(--green-shade-1);
} }
.all-progress-lists { .all-progress-lists {

BIN
public/assets/images/ganon.apng Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 338 KiB

3
src/server.js
View File

@ -150,6 +150,9 @@ app.engine('handlebars', handlebars({
neq(value1, value2) { neq(value1, value2) {
return value1 !== value2; return value1 !== value2;
}, },
greaterThan(value1, value2) {
return value1 > value2;
},
slug(string) { slug(string) {
return string.toLowerCase().replaceAll(/ /g, '-'); return string.toLowerCase().replaceAll(/ /g, '-');
}, },

5
views/account/upgrade.handlebars
View File

@ -38,8 +38,9 @@
<p class="caption">{{ locale.upgrade.description }}</p> <p class="caption">{{ locale.upgrade.description }}</p>
<div class="progress-bar-wrapper"> <div class="progress-bar-wrapper">
<div class="progress-bar"> <div class="progress-bar" style="--progress-bar-width: {{ donationCache.completed_real }}%;">
<div class="progress-bar-inner" style="width: {{ donationCache.completed_capped }}%;" ></div> <div class="progress-bar-real"></div>
<div class="progress-bar-capped"></div>
</div> </div>
<p class="localeReplace"> <p class="localeReplace">
{{{ locale.donation.progress }}} {{{ locale.donation.progress }}}

7
views/progress.handlebars
View File

@ -16,9 +16,10 @@
<div class="all-progress-lists"> <div class="all-progress-lists">
<div class="donation-progress"> <div class="donation-progress">
<h1 class="title dot">Donation goal</h1> <h1 class="title dot">Donation goal {{#if (greaterThan donationCache.completed_real 100) }}<img src="/assets/images/ganon.apng" alt="An animated image of Cucuí Ganon dancing" class="cucui-dance" />{{/if}}</h1>
<div class="progress-bar"> <div class="progress-bar" style="--progress-bar-width: {{ donationCache.completed_real }}%;">
<div class="progress-bar-inner" style="width: {{ donationCache.completed_capped }}%;" ></div> <div class="progress-bar-real"></div>
<div class="progress-bar-capped"></div>
</div> </div>
<p class="localeReplace">{{{ locale.donation.progress }}} {{{ locale.donation.upgradePush }}}</p> <p class="localeReplace">{{{ locale.donation.progress }}} {{{ locale.donation.upgradePush }}}</p>
</div> </div>