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

Secret (devs don't share) progress list with ETA + feature list on website

Browse Source
This commit is contained in:
Jip Fr
2021-04-09 13:19:47 +02:00
parent 8d70d89618
commit f3829e3bcb
5 changed files with 146 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
public/charts.js Normal file
View File

@@ -0,0 +1,35 @@
/* eslint-disable no-undef */
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 progressPercentage = Math.round(Math.min((allDoneFeatureNodes.length / allFeatureNodes.length) * 100, 100));
const remainingPercentage = 100 - progressPercentage;
// Set inner paragraph
wrapper.querySelectorAll('.percentage-label').forEach(p => {
p.innerText = progressPercentage.toString().padStart(2, '0') + '%';
});
// Create chart
const data = [progressPercentage, remainingPercentage];
Chart.defaults.plugins.legend = {
display: false
};
new Chart(wrapper.querySelector('canvas'), {
type: 'doughnut',
data: {
labels: ['Done', 'Todo'],
datasets: [
{
data,
backgroundColor: ['white', 'transparent']
}
]
}
});
});
}
loadAllCharts();

61
public/main.css
View File

@@ -353,7 +353,68 @@ section.team {
color: var(--text-secondary);
}
/* Progress */
.feature-list-wrapper h3 {
margin: 0;
}
.feature-list-wrapper hr {
border: 0;
width: 100%;
height: 1px;
margin: 20px 0;
background: rgba(255, 255, 255, 0.1);
}
.feature-list-wrapper .feature-list-top {
display: grid;
align-items: center;
grid-template-columns: auto 1fr;
grid-gap: 20px;
}
.feature-list-wrapper canvas {
width: 100px;
height: 100px;
}
.feature-progress-chart {
position: relative;
}
.feature-progress-chart p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
/* Progress: Feature list */
.feature-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.feature {
display: grid;
align-items: center;
grid-template-columns: auto 1fr;
grid-gap: 10px;
}
/* Custom checkboxes */
.custom-checkbox {
width: 1.5rem;
height: 1.5rem;
background: var(--background);
/* border: 1px solid var(--text-secondary); */
color: var(--text);
border-radius: 4px;
}
.custom-checkbox svg {
width: 100%;
height: 100%;
}
/* Footer */
footer {
text-align: center;
color: var(--text-secondary);

45
views/home.handlebars
View File

@@ -98,9 +98,48 @@
</div>
<div class="right sect">
<h2 class="title">{{ locale.progress.title }}</h2>
{{#each locale.progress.paragraphs}}
<p class="text">{{ this }}</p>
{{/each}}
<div class="feature-list-wrapper">
<div class="feature-list-top">
<div class="feature-progress-chart">
<canvas></canvas>
<p class="percentage-label"></p>
</div>
<div class="progress-title">
<h3>Miiverse (Juxt)</h3>
</div>
</div>
<hr />
<div class="feature-list">
<div class="feature">
{{> custom-checkbox checked=true }}
<span>Feature A</span>
</div>
<div class="feature">
{{> custom-checkbox }}
<span>Feature A</span>
</div>
<div class="feature">
{{> custom-checkbox checked=true }}
<span>Feature A</span>
</div>
<div class="feature">
{{> custom-checkbox }}
<span>Feature A</span>
</div>
<div class="feature">
{{> custom-checkbox checked=true }}
<span>Feature A</span>
</div>
<div class="feature">
{{> custom-checkbox }}
<span>Feature A</span>
</div>
<div class="feature">
{{> custom-checkbox }}
<span>Feature A</span>
</div>
</div>
</div>
</div>
</section>

2
views/layouts/main.handlebars
View File

@@ -35,5 +35,7 @@
</head>
<body>
{{{ body }}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js"></script>
<script src="/charts.js"></script>
</body>
</html>

6
views/partials/custom-checkbox.handlebars Normal file
View File

@@ -0,0 +1,6 @@
<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>