mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-03-22 01:34:44 -05:00
feat: add donation goal overflow
This commit is contained in:
parent
27feb7f9c4
commit
c90fa18062
|
|
@ -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 {
|
||||
|
|
|
|||
BIN
public/assets/images/ganon.apng
Normal file
BIN
public/assets/images/ganon.apng
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 338 KiB |
|
|
@ -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, '-');
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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 }}}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user