Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-06-14 04:40:50 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Redesign progress page with jvs' design

Browse Source
This commit is contained in:
Jip Fr 2021-04-11 15:50:53 +02:00
parent 97892f5bc7
commit 5f50fe4ed1
12 changed files with 148 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
locales/US_en.json
View File

@ -133,7 +133,7 @@
]
},
"progressPage": {
"title": "Progress",
"title": "Our progress",
"description": "This is text. Text can go here. This is a spot for text. A paragraph holds text. It's all true."
}
}

28
progress-lists.json
View File

@ -4,11 +4,31 @@
"features": [
{
"name": "Feature A",
"checked": true
"status": "done"
},
{
"name": "Feature B",
"checked": false
"status": "ongoing"
},
{
"name": "Feature B",
"status": "ongoing"
},
{
"name": "Feature B",
"status": "done"
},
{
"name": "Feature B",
"status": "ongoing"
},
{
"name": "Feature A",
"status": "todo"
},
{
"name": "Feature A",
"status": "todo"
}
]
},
@ -17,11 +37,11 @@
"features": [
{
"name": "Some other A",
"checked": true
"status": "todo"
},
{
"name": "Feature B",
"checked": false
"status": "done"
}
]
}

12
public/charts.js
View File

@ -3,7 +3,7 @@ function loadAllCharts() {
document.querySelectorAll('.feature-list-wrapper').forEach(wrapper => {
// Find and generate all relevant data
const allFeatureNodes = wrapper.querySelectorAll('.feature');
const allDoneFeatureNodes = wrapper.querySelectorAll('.feature [checked]');
const allDoneFeatureNodes = wrapper.querySelectorAll('.feature .done');
const progressPercentage = Math.round(Math.min((allDoneFeatureNodes.length / allFeatureNodes.length) * 100, 100));
const remainingPercentage = 100 - progressPercentage;
@ -29,9 +29,17 @@ function loadAllCharts() {
datasets: [
{
data,
backgroundColor: ['white', 'transparent']
backgroundColor: ['#9D6FF3', '#4C5174']
}
]
},
options: {
elements: {
arc: {
borderWidth: 0
}
},
cutout: '70%'
}
});
});

66
public/main.css
View File

@ -132,11 +132,32 @@ header nav a {
align-items: center;
grid-template-columns: 1fr 1fr;
}
.progress-hero {
width: 100%;
display: flex;
justify-items: center;
align-items: center;
text-align: center;
}
.progress-hero svg {
width: 3rem;
height: 3rem;
}
.progress-hero .text {
max-width: 423px;
}
.hero-meta {
margin-top: 25vh;
}
.hero-meta.reduced-margin {
margin-top: 10vh;
margin: 10vh 0;
width: 100%;
}
.hero-meta.reduced-margin h1 {
width: 100%;
}
.hero-meta.reduced-margin p {
margin: 0 auto;
}
.hero-image {
position: relative;
@ -153,7 +174,7 @@ header nav a {
.hero .title {
font-size: 4rem;
}
.hero .text {
.text {
font-size: 1rem;
color: var(--text-secondary);
width: 63%;
@ -369,6 +390,11 @@ section.team {
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
grid-gap: 20px;
}
.feature-list-wrapper {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 20px;
}
.feature-list-wrapper h3 {
margin: 0;
}
@ -381,10 +407,12 @@ section.team {
}
.feature-list-wrapper .feature-list-top {
display: grid;
align-items: center;
grid-template-columns: auto 1fr;
grid-gap: 20px;
}
.progress-title {
margin-bottom: 20px;
}
.feature-list-wrapper canvas {
width: 100px;
height: 100px;
@ -399,6 +427,8 @@ section.team {
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
font-weight: bolder;
font-size: 1.3rem;
}
/* Progress: Feature list */
@ -418,20 +448,35 @@ section.team {
.custom-checkbox {
width: 1.5rem;
height: 1.5rem;
background: var(--background);
background: #31365A;
color: var(--text);
border-radius: 4px;
border-radius: 2px;
display: flex;
justify-content: center;
align-items: center;
}
.custom-checkbox.done {
background: #50AC75;
}
.custom-checkbox.ongoing {
background: #DBAC5B;
}
.custom-checkbox svg {
width: 100%;
height: 100%;
}
.custom-checkbox .small-dot {
width: 0.5rem;
height: 0.5rem;
background: white;
border-radius: 50%;
}
/* Bright purple cards */
.purple-card {
padding: 50px 20px;
border-radius: 10px;
background: #502d91;
background: #151934;
}
/* Footer */
@ -458,6 +503,8 @@ footer {
right: auto;
left: 60vw;
}
}
@media screen and (max-width: 900px) {
@ -467,6 +514,13 @@ footer {
height: 0.5rem;
}
.all-progress-lists {
grid-template-columns: 100%;
}
.feature-list-wrapper {
grid-template-columns: 100%;
}
header nav a:not(.keep-on-mobile) {
/* You don't really need it on mobile IMO */
display: none;

18
src/index.js
View File

@ -44,6 +44,24 @@ app.engine('handlebars', handlebars({
${htmlRight}
</div>
`;
},
customCheckbox(type) {
switch(type) {
case 'done':
return `
<div class="custom-checkbox done">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
`;
case 'ongoing':
return `
<div class="custom-checkbox ongoing">
<div class="small-dot"></div>
</div>
`;
default:
return '<div class="custom-checkbox incomplete"></div>';
}
}
}
}));

13
src/progress-lists.js Normal file
View File

@ -0,0 +1,13 @@
const progressLists = require('../progress-lists.json');
const statusPriorityOrder = ['done', 'ongoing', 'todo'];
// Sort by status
for(const list of progressLists) {
list.features = list.features.sort((a, b) => {
return statusPriorityOrder.indexOf(a.status) - statusPriorityOrder.indexOf(b.status);
});
}
module.exports = progressLists;

2
src/routers/home.js
View File

@ -2,7 +2,7 @@ const getLocale = require('../../util/getLocale');
const { Router } = require('express');
const router = new Router();
const pgoressLists = require('../../progress-lists.json');
const pgoressLists = require('../progress-lists');
router.get('/', (req, res) => {
const tmpLocale = getLocale('US', 'en');

2
src/routers/progress.js
View File

@ -2,7 +2,7 @@ const getLocale = require('../../util/getLocale');
const { Router } = require('express');
const router = new Router();
const progressLists = require('../../progress-lists.json');
const progressLists = require('../progress-lists');
router.get('/', (req, res) => {
const tmpLocale = getLocale('US', 'en');

3
views/layouts/main.handlebars
View File

@ -31,7 +31,8 @@
<!-- favicon -->
<link rel="shortcut icon" href="/assets/images/favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
{{{ body }}}

8
views/partials/custom-checkbox.handlebars
View File

@ -1,7 +1 @@
{{altBg}}
<div class="custom-checkbox" {{#if checked}}checked{{/if}}>
{{#if checked}}
{{!-- Icon --}}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
{{/if}}
</div>
{{{ customCheckbox status }}}

26
views/partials/progress-list.handlebars
View File

@ -1,20 +1,24 @@
<div class="feature-list-wrapper">
<div class="feature-list-top">
<div class="feature-progress-chart">
<p class="percentage-label"></p>
<canvas></canvas>
<div>
<div class="feature-progress-chart">
<p class="percentage-label"></p>
<canvas></canvas>
</div>
</div>
</div>
<div class="core">
<div class="progress-title">
<h3>{{ data.title }}</h3>
</div>
</div>
<hr />
<div class="feature-list">
{{#each data.features}}
<div class="feature">
{{> custom-checkbox checked=checked }}
<span>{{ name }}</span>
<div class="feature-list">
{{#each data.features}}
<div class="feature">
{{> custom-checkbox status=status }}
<span>{{ name }}</span>
</div>
{{/each}}
</div>
{{/each}}
</div>
</div>

3
views/progress.handlebars
View File

@ -2,8 +2,9 @@
{{> header}}
<div class="hero">
<div class="progress-hero">
<div class="hero-meta reduced-margin">
<svg xmlns="http://www.w3.org/2000/svg" width="48.87" height="71.093" viewBox="0 0 48.87 71.093"><g id="XMLID_6_" transform="translate(0)"><path id="XMLID_15_" d="M69.581,29.593c-2.029,1.068-.249,4.129,1.78,3.061,5.162-2.67,11.463-2.6,16.981-1.1,4.735,1.282,9.5,3.845,12.246,8.045,1.246,1.922,4.307.142,3.061-1.78C96.921,27.386,80.3,24.04,69.581,29.593Z" transform="translate(-60.112 -20.086)" fill="#9d6ff3"/><path id="XMLID_14_" d="M103.359,21.045c-3.951-6.159-10.751-10-17.657-11.89C77.763,6.948,68.721,7.019,61.281,10.9c-2.029,1.068-.249,4.129,1.78,3.061,6.586-3.453,14.667-3.311,21.644-1.388,5.981,1.638,12.1,4.913,15.521,10.252C101.507,24.783,104.569,23,103.359,21.045Z" transform="translate(-54.766 -7.693)" fill="#9d6ff3"/><path id="XMLID_9_" d="M65.995,47.8a20.7,20.7,0,0,0-12.958,4.45H47.27a2.579,2.579,0,0,0-2.67,2.456v47.239a2.763,2.763,0,0,0,2.67,2.67h5.838a2.639,2.639,0,0,0,2.528-2.67V87.564A21.228,21.228,0,1,0,65.995,47.8Zm0,33.178a12,12,0,1,1,12-12A12,12,0,0,1,65.995,80.978Z" transform="translate(-44.6 -33.522)" fill="#9d6ff3"/></g></svg>
<h1 class="title dot">{{ locale.progressPage.title }}</h1>
<p class="text">{{ locale.progressPage.description }}</p>
</div>