feat: add donation goal overflow

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

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 338 KiB

View File

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

View File

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

View File

@ -16,9 +16,10 @@
<div class="all-progress-lists">
<div class="donation-progress">
<h1 class="title dot">Donation goal</h1>
<div class="progress-bar">
<div class="progress-bar-inner" style="width: {{ donationCache.completed_capped }}%;" ></div>
<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" style="--progress-bar-width: {{ donationCache.completed_real }}%;">
<div class="progress-bar-real"></div>
<div class="progress-bar-capped"></div>
</div>
<p class="localeReplace">{{{ locale.donation.progress }}} {{{ locale.donation.upgradePush }}}</p>
</div>