From 5f50fe4ed1319403d8f28dfe80220de85ca27fe3 Mon Sep 17 00:00:00 2001 From: Jip Fr Date: Sun, 11 Apr 2021 15:50:53 +0200 Subject: [PATCH] Redesign progress page with jvs' design --- locales/US_en.json | 2 +- progress-lists.json | 28 ++++++++-- public/charts.js | 12 ++++- public/main.css | 66 ++++++++++++++++++++--- src/index.js | 18 +++++++ src/progress-lists.js | 13 +++++ src/routers/home.js | 2 +- src/routers/progress.js | 2 +- views/layouts/main.handlebars | 3 +- views/partials/custom-checkbox.handlebars | 8 +-- views/partials/progress-list.handlebars | 26 +++++---- views/progress.handlebars | 3 +- 12 files changed, 148 insertions(+), 35 deletions(-) create mode 100644 src/progress-lists.js diff --git a/locales/US_en.json b/locales/US_en.json index 1706ad4..2b1a158 100644 --- a/locales/US_en.json +++ b/locales/US_en.json @@ -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." } } diff --git a/progress-lists.json b/progress-lists.json index 0728fce..230cf30 100644 --- a/progress-lists.json +++ b/progress-lists.json @@ -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" } ] } diff --git a/public/charts.js b/public/charts.js index 75ab70b..500584e 100644 --- a/public/charts.js +++ b/public/charts.js @@ -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%' } }); }); diff --git a/public/main.css b/public/main.css index 347ad52..199c39c 100644 --- a/public/main.css +++ b/public/main.css @@ -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; diff --git a/src/index.js b/src/index.js index 92ec506..e51280b 100644 --- a/src/index.js +++ b/src/index.js @@ -44,6 +44,24 @@ app.engine('handlebars', handlebars({ ${htmlRight} `; + }, + customCheckbox(type) { + switch(type) { + case 'done': + return ` +
+ +
+ `; + case 'ongoing': + return ` +
+
+
+ `; + default: + return '
'; + } } } })); diff --git a/src/progress-lists.js b/src/progress-lists.js new file mode 100644 index 0000000..db5f44a --- /dev/null +++ b/src/progress-lists.js @@ -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; \ No newline at end of file diff --git a/src/routers/home.js b/src/routers/home.js index 0d9a7a4..9960363 100644 --- a/src/routers/home.js +++ b/src/routers/home.js @@ -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'); diff --git a/src/routers/progress.js b/src/routers/progress.js index 21253ce..2a9e499 100644 --- a/src/routers/progress.js +++ b/src/routers/progress.js @@ -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'); diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars index 3001abd..d62c384 100644 --- a/views/layouts/main.handlebars +++ b/views/layouts/main.handlebars @@ -31,7 +31,8 @@ - + + {{{ body }}} diff --git a/views/partials/custom-checkbox.handlebars b/views/partials/custom-checkbox.handlebars index 984c79f..1f749bc 100644 --- a/views/partials/custom-checkbox.handlebars +++ b/views/partials/custom-checkbox.handlebars @@ -1,7 +1 @@ -{{altBg}} -
- {{#if checked}} - {{!-- Icon --}} - - {{/if}} -
\ No newline at end of file +{{{ customCheckbox status }}} \ No newline at end of file diff --git a/views/partials/progress-list.handlebars b/views/partials/progress-list.handlebars index 9819912..ce64362 100644 --- a/views/partials/progress-list.handlebars +++ b/views/partials/progress-list.handlebars @@ -1,20 +1,24 @@
-
-

- +
+
+

+ +
+
+
+

{{ data.title }}

-
-
-
- {{#each data.features}} -
- {{> custom-checkbox checked=checked }} - {{ name }} +
+ {{#each data.features}} +
+ {{> custom-checkbox status=status }} + {{ name }} +
+ {{/each}}
- {{/each}}
\ No newline at end of file diff --git a/views/progress.handlebars b/views/progress.handlebars index e1e425a..0ef50fb 100644 --- a/views/progress.handlebars +++ b/views/progress.handlebars @@ -2,8 +2,9 @@ {{> header}} -
+
+

{{ locale.progressPage.title }}

{{ locale.progressPage.description }}