Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-03-21 17:24:28 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: add progressbar to upgrade page, text tweaks

Browse Source
This commit is contained in:
Ash Monty 2022-07-09 17:57:24 +02:00
parent 72b0a24734
commit 1feecdc4cc
No known key found for this signature in database
GPG Key ID: 740B7C88251D49B6
6 changed files with 45 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -813,7 +813,8 @@ section.update-signup div.circle {
.donation-progress a:hover {
text-decoration: underline;
}
.donation-progress .progress-bar {
.progress-bar {
position: relative;
display: block;
width: 100%;
@ -823,7 +824,7 @@ section.update-signup div.circle {
background: var(--btn-secondary);
overflow: hidden;
}
.donation-progress .progress-bar-inner {
.progress-bar-inner {
height: 100%;
background-color: var(--theme);
}

24
public/assets/css/upgrade.css
View File

@ -57,8 +57,32 @@ h1.title {
color: var(--text);
}
p.caption {
width: min(100%, 500px);
margin: 0 auto 36px;
}
.account-form-wrapper .progress-bar-wrapper {
justify-content: center;
width: min(100%, 500px);
margin: 0 auto 72px;
padding: 24px;
border-radius: 6px;
background: #1b1f3b;
box-sizing: border-box;
}
.account-form-wrapper .progress-bar-wrapper p {
text-align: left;
margin-bottom: 0;
}
.account-form-wrapper .progress-bar-wrapper p span {
color: var(--text);
font-weight: 600;
}
.account-form-wrapper .progress-bar {
height: 8px;
border-radius: 4px;
margin-top: 0;
}
form {

3
src/cache.js
View File

@ -137,6 +137,9 @@ async function updateStripeDonationCache() {
hasMore = has_more;
}
donationCache.goal_dollars = donationCache.goal / 100;
donationCache.total_dollars = donationCache.total / 100;
donationCache.completed_real = Math.floor((donationCache.total / donationCache.goal) * 100); // real completion amount
donationCache.completed_capped = Math.max(0, Math.min(donationCache.completed_real, 100)); // capped at 100

2
src/routers/progress.js
View File

@ -23,7 +23,7 @@ router.get('/', async (request, response) => {
const trelloCache = await getTrelloCache();
renderData.progressLists = trelloCache;
const stripeDonationCache = await getStripeDonationCache();
renderData.donation = stripeDonationCache;
renderData.donationCache = stripeDonationCache;
response.render('progress', renderData);
});

14
views/account/upgrade.handlebars
View File

@ -33,8 +33,18 @@
</a>
<h1 class="title dot">Upgrade</h1>
<p class="caption">Subscribing to a tier gives you access to our developer chats and, depending on the tier,
to our beta servers. Please someone reword this, it sucks. No fr.</p>
<p class="caption">
Reaching the monthly goal will make Pretendo a full time job, providing better quality updates at a faster rate.
</p>
<div class="progress-bar-wrapper">
<div class="progress-bar">
<div class="progress-bar-inner" style="width: {{ donationCache.completed_capped }}%;" ></div>
</div>
<p>
<span>${{donationCache.total_dollars}}</span> of <span>${{donationCache.goal_dollars}}</span>/month, <span>${{donationCache.completed_real}}%</span> of the monthly goal.
</p>
</div>
<form method="post" data-current-tier="{{currentTier}}">
{{#each tiers}}
<input type="radio" class="tier-radio" data-tier-name="{{this.name}}" name="tier" value="{{this.price_id}}" id="{{this.price_id}}" />

4
views/progress.handlebars
View File

@ -16,9 +16,9 @@
<div class="donation-progress">
<h1 class="title dot">Donation goal</h1>
<div class="progress-bar">
<div class="progress-bar-inner" style="width: {{ donation.completed_capped }}%;" ></div>
<div class="progress-bar-inner" style="width: {{ donationCache.completed_capped }}%;" ></div>
</div>
<p>Raised <span class="amount">{{ donation.completed_capped }}%</span> of the monthly goal, thanks to <span class="amount">{{ donation.donators }}</span> donators! To become a subscriber and gain access to cool perks, visit the <a href="/account/upgrade">upgrade page</a>.</p>
<p><span>${{donationCache.total_dollars}}</span> of <span>${{donationCache.goal_dollars}}</span>/month, <span>${{donationCache.completed_real}}%</span> of the monthly goal. To become a subscriber and gain access to cool perks, visit the <a href="/account/upgrade">upgrade page</a>.</p>
</div>
{{#each progressLists.sections}}