feat: add donation goal progressbar

This commit is contained in:
Ash Monty 2022-07-09 15:23:30 +02:00
parent af778faac3
commit 72b0a24734
No known key found for this signature in database
GPG Key ID: 740B7C88251D49B6
3 changed files with 55 additions and 3 deletions

View File

@ -791,6 +791,43 @@ section.update-signup div.circle {
}
/* Progress */
.donation-progress {
padding: 50px 20px;
border-radius: 10px;
background: #151934;
grid-column: span 2;
}
.donation-progress h1 {
display: inline-block;
margin: 0;
}
.donation-progress span {
font-weight: bold;
}
.donation-progress a {
color: #9d6ff3;
text-decoration: none;
font-weight: bold;
}
.donation-progress a:hover {
text-decoration: underline;
}
.donation-progress .progress-bar {
position: relative;
display: block;
width: 100%;
height: 12px;
margin: 1rem 0;
border-radius: 6px;
background: var(--btn-secondary);
overflow: hidden;
}
.donation-progress .progress-bar-inner {
height: 100%;
background-color: var(--theme);
}
.all-progress-lists {
margin-top: 50px;
display: grid;
@ -1026,6 +1063,9 @@ footer div.discord-server-card svg {
.feature-list-wrapper {
grid-template-columns: 100%;
}
.donation-progress {
grid-column: span 1;
}
header nav a:not(.keep-on-mobile) {
/* You don't really need it on mobile IMO */

View File

@ -3,7 +3,7 @@ const util = require('../util');
const { boards } = require('../../boards/boards.json');
const router = new Router();
const { getTrelloCache } = require('../cache');
const { getTrelloCache, getStripeDonationCache } = require('../cache');
router.get('/', async (request, response) => {
const renderData = {
@ -20,8 +20,10 @@ router.get('/', async (request, response) => {
renderData.account = account;
}
const cache = await getTrelloCache();
renderData.cache = cache;
const trelloCache = await getTrelloCache();
renderData.progressLists = trelloCache;
const stripeDonationCache = await getStripeDonationCache();
renderData.donation = stripeDonationCache;
response.render('progress', renderData);
});

View File

@ -10,7 +10,17 @@
</div>
</div>
<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: {{ donation.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>
</div>
{{#each progressLists.sections}}
<div class="purple-card">
{{> progress-list data=this boards=@root.boards }}