From b13856a29581b466623301c242441dff7e9c2c95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jordi=20Guti=C3=A9rrez=20Hermoso?= Date: Mon, 17 Oct 2022 22:16:36 -0400 Subject: [PATCH 1/2] hide/show progress bars Progress bars are very visible at a glance. If your family members happen to look over your shoulder while you're working on Christmas lists, you may accidentally reveal to them how many gifts they're getting. Additionally, parents may want to log into their children's accounts for help and may not want to see their own progress bars from their children's accounts. Both situations have already happened in my family! So, let's hide the progress bars by default and provide an easy link to show them. --- languages/cs-cz.js | 2 -- languages/de-de.js | 2 -- languages/en-us.js | 4 ++-- languages/es-es.js | 2 -- languages/fr-ca.js | 2 -- languages/fr-fr.js | 2 -- languages/ro-ro.js | 2 -- static/js/wishlists.js | 20 ++++++++++++++++++++ views/wishlists.pug | 21 ++++++++++++++------- 9 files changed, 36 insertions(+), 21 deletions(-) create mode 100644 static/js/wishlists.js diff --git a/languages/cs-cz.js b/languages/cs-cz.js index 1b4abd79..5a7a0e78 100644 --- a/languages/cs-cz.js +++ b/languages/cs-cz.js @@ -176,7 +176,5 @@ module.exports.strings = { WISHLIST_URL_LABEL: 'Jméno položky nebo odkaz na ni (odkazy na CZ obchody nefunkční) (Podporované obchody)', WISHLIST_URL_PLACEHOLDER: 'https://www.amazon.com/dp/B00ZV9RDKK', WISHLIST_URL_REQUIRED: 'Nevyplněna položka nebo odkaz na ni.', - WISHLISTS_COUNTS_SELF: name => `${name}: ???/???`, - WISHLISTS_COUNTS: (name, pledged, total) => `${name}: ${pledged}/${total}`, WISHLISTS_TITLE: `${_CC.config.siteTitle} - Seznamy přání` } diff --git a/languages/de-de.js b/languages/de-de.js index d1c70d38..671fadfa 100644 --- a/languages/de-de.js +++ b/languages/de-de.js @@ -178,7 +178,5 @@ module.exports.strings = { WISHLIST_URL_LABEL: 'URL oder Name (Unterstützte Seiten)', WISHLIST_URL_PLACEHOLDER: 'https://www.amazon.com/dp/B00ZV9RDKK', WISHLIST_URL_REQUIRED: 'URL oder Name wird benötigt', - WISHLISTS_COUNTS_SELF: name => `${name}: ???/???`, - WISHLISTS_COUNTS: (name, pledged, total) => `${name}: ${pledged}/${total}`, WISHLISTS_TITLE: `${_CC.config.siteTitle} - Wunschlisten` } diff --git a/languages/en-us.js b/languages/en-us.js index 12ac3f61..f1583cad 100644 --- a/languages/en-us.js +++ b/languages/en-us.js @@ -178,7 +178,7 @@ module.exports.strings = { WISHLIST_URL_LABEL: 'Item URL or Name (Supported Sites)', WISHLIST_URL_PLACEHOLDER: 'https://www.amazon.com/dp/B00ZV9RDKK', WISHLIST_URL_REQUIRED: 'Item URL or Name is required', - WISHLISTS_COUNTS_SELF: name => `${name}: ???/???`, - WISHLISTS_COUNTS: (name, pledged, total) => `${name}: ${pledged}/${total}`, + WISHLISTS_HIDE: 'Hide progress bars', + WISHLISTS_SHOW: 'Show progress bars (make sure nobody else is watching!)', WISHLISTS_TITLE: `${_CC.config.siteTitle} - Wishlists` } diff --git a/languages/es-es.js b/languages/es-es.js index 3d2c5d1c..c8ce584f 100644 --- a/languages/es-es.js +++ b/languages/es-es.js @@ -178,7 +178,5 @@ module.exports.strings = { WISHLIST_URL_LABEL: 'Nombre de producto o URL (Sitios web compatibles)', WISHLIST_URL_PLACEHOLDER: 'https://www.amazon.com/dp/B00ZV9RDKK', WISHLIST_URL_REQUIRED: 'Necesita un nombre de producto o URL', - WISHLISTS_COUNTS_SELF: name => `${name}: ???/???`, - WISHLISTS_COUNTS: (name, pledged, total) => `${name}: ${pledged}/${total}`, WISHLISTS_TITLE: `${_CC.config.siteTitle} - Listas de deseo` } diff --git a/languages/fr-ca.js b/languages/fr-ca.js index 7bf9dea7..ca99d39f 100644 --- a/languages/fr-ca.js +++ b/languages/fr-ca.js @@ -177,7 +177,5 @@ module.exports.strings = { WISHLIST_URL_LABEL: 'URL ou nom de l\'article (Sites supportés)', WISHLIST_URL_PLACEHOLDER: 'https://www.amazon.com/dp/B00ZV9RDKK', WISHLIST_URL_REQUIRED: "L'URL ou le nom de l'article est requis", - WISHLISTS_COUNTS_SELF: name => `${name}: ???/???`, - WISHLISTS_COUNTS: (name, pledged, total) => `${name}: ${pledged}/${total}`, WISHLISTS_TITLE: `${_CC.config.siteTitle} - Listes de souhaits`, } diff --git a/languages/fr-fr.js b/languages/fr-fr.js index 270f8ea1..745d9832 100644 --- a/languages/fr-fr.js +++ b/languages/fr-fr.js @@ -176,7 +176,5 @@ module.exports.strings = { WISHLIST_URL_LABEL: 'URL ou nom de l\'article (Sites supportés)', WISHLIST_URL_PLACEHOLDER: 'https://www.amazon.com/dp/B00ZV9RDKK', WISHLIST_URL_REQUIRED: "L'URL ou le nom de l'article est requis", - WISHLISTS_COUNTS_SELF: name => `${name}: ???/???`, - WISHLISTS_COUNTS: (name, pledged, total) => `${name}: ${pledged}/${total}`, WISHLISTS_TITLE: `${_CC.config.siteTitle} - Listes d'envies` } diff --git a/languages/ro-ro.js b/languages/ro-ro.js index 018a837f..957e0e08 100644 --- a/languages/ro-ro.js +++ b/languages/ro-ro.js @@ -178,7 +178,5 @@ module.exports.strings = { WISHLIST_URL_LABEL: 'URL-ul sau numele articolului (Site-uri Suportate)', WISHLIST_URL_PLACEHOLDER: 'https://www.amazon.com/dp/B00ZV9RDKK', WISHLIST_URL_REQUIRED: 'URL-ul sau numele articolului trebuie completat', - WISHLISTS_COUNTS_SELF: name => `${name}: ???/???`, - WISHLISTS_COUNTS: (name, pledged, total) => `${name}: ${pledged}/${total}`, WISHLISTS_TITLE: `${_CC.config.siteTitle} - Liste cu Dorințe` } diff --git a/static/js/wishlists.js b/static/js/wishlists.js new file mode 100644 index 00000000..4ee5aec4 --- /dev/null +++ b/static/js/wishlists.js @@ -0,0 +1,20 @@ +function hide() { + document.querySelectorAll('.progressbar').forEach((element) => { + element.classList.add('hidden') + }) + document.querySelector('#showButton').classList.remove('hidden') + this.classList.add('hidden') +} + +function show() { + document.querySelectorAll('.progressbar').forEach((element) => { + element.classList.remove('hidden') + }) + document.querySelector('#hideButton').classList.remove('hidden') + this.classList.add('hidden') +} + +setTimeout(() => { + document.querySelector('#hideButton').addEventListener('click', hide) + document.querySelector('#showButton').addEventListener('click', show) +}, 0) diff --git a/views/wishlists.pug b/views/wishlists.pug index 732910b9..d6ff5517 100644 --- a/views/wishlists.pug +++ b/views/wishlists.pug @@ -12,6 +12,7 @@ mixin wishlistDetails(wishlist, onlyShowAddedByUser) li= item.name block content + script(src=`${_CC.config.base}js/wishlists.js`) style. .wishlist-dropdown-container-unloaded { display: none; @@ -44,6 +45,11 @@ block content display: inline-block; } + .hidden { + display: none + } + #hideButton.button.hidden= lang('WISHLISTS_HIDE') + #showButton.button= lang('WISHLISTS_SHOW') ul.noStyle.noLeftMargin if req.user._id !== '_CCUNKNOWN' li @@ -54,9 +60,9 @@ block content .column.is-1(style='overflow: hidden; padding: 0 0.5rem 0 0;') figure.image.is-square.is-fullwidth.is-marginless(style='display: inline-block;') img.is-rounded.is-fullwidth(src=req.user.pfp, style='object-fit: cover;') - .column - span - span=lang('WISHLISTS_COUNTS_SELF', req.user._id) + .column= `${req.user._id} ` + span.progressbar.hidden + span= '???/???' progress.progress(value=1, max=1) +wishlistDetails(req.user.wishlist, req.user._id) each user in users @@ -69,9 +75,10 @@ block content .column.is-1(style='overflow: hidden; padding: 0 0.5rem 0 0;') figure.image.is-square.is-fullwidth.is-marginless(style='display: inline-block;') img.is-rounded.is-fullwidth(src=user.doc.pfp, style='object-fit: cover;') - .column - span= lang('WISHLISTS_COUNTS', user.id, totals(user.doc.wishlist).pledged, user.doc.wishlist.length) - progress.progress.is-info(value=totals(user.doc.wishlist).pledged, max=user.doc.wishlist.length) + .column= `${user.id} ` + span.progressbar.hidden + span= `${totals(user.doc.wishlist).pledged}/${user.doc.wishlist.length}` + progress.progress.is-info(value=totals(user.doc.wishlist).pledged, max=user.doc.wishlist.length) +wishlistDetails(user.doc.wishlist) script. document.querySelectorAll('.wishlist-dropdown-button') @@ -81,4 +88,4 @@ block content }) }) document.querySelectorAll('.wishlist-dropdown-container-unloaded') - .forEach(container => container.classList.remove('wishlist-dropdown-container-unloaded')) \ No newline at end of file + .forEach(container => container.classList.remove('wishlist-dropdown-container-unloaded')) From 0581171927bf4eb06a14cf90b9b391bde4efd92f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jordi=20Guti=C3=A9rrez=20Hermoso?= Date: Wed, 19 Oct 2022 21:37:46 -0400 Subject: [PATCH 2/2] Add ALWAYS_SHOW_PROGRESS_BARS envar, disabled by default This restores the previous behaviour. --- README.md | 4 +++- config/index.js | 3 ++- views/wishlists.pug | 15 ++++++++------- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 1d6d2f7f..ea2a20c7 100644 --- a/README.md +++ b/README.md @@ -91,6 +91,8 @@ BULMASWATCH=default UPDATE_CHECK=true # Set to false to disable the profile pictures feature PFP=true +# Set to true to never hide progress bars +ALWAYS_SHOW_PROGRESS_BARS=false # Language of the interface, options listed in `languages` directory LANGUAGE=en-US @@ -133,4 +135,4 @@ As of writing, there are no code contributors to the main project. However, ther * Czech: [drSchaps](https://github.com/drSchaps) * German: [PeteS4](https://github.com/PeteS4) * French: [zethis](https://github.com/zethis) -* Spanish: [CantisW](https://github.com/CantisW) \ No newline at end of file +* Spanish: [CantisW](https://github.com/CantisW) diff --git a/config/index.js b/config/index.js index 75f22bcb..287b8dc9 100644 --- a/config/index.js +++ b/config/index.js @@ -16,7 +16,8 @@ module.exports = { bulmaswatch: (process.env.BULMASWATCH || 'default').toLowerCase(), pfp: process.env.PFP !== 'false', language: process.env.LANGUAGE?.toLowerCase() || 'en-us', - guestPassword: process.env.GUEST_PASSWORD + guestPassword: process.env.GUEST_PASSWORD, + alwaysShowProgressBars: process.env.ALWAYS_SHOW_PROGRESS_BARS === 'true' } if (module.exports.guestPassword) module.exports.wishlist.public = false diff --git a/views/wishlists.pug b/views/wishlists.pug index d6ff5517..8d5aa21b 100644 --- a/views/wishlists.pug +++ b/views/wishlists.pug @@ -12,7 +12,14 @@ mixin wishlistDetails(wishlist, onlyShowAddedByUser) li= item.name block content - script(src=`${_CC.config.base}js/wishlists.js`) + unless config.alwaysShowProgressBars + style. + .hidden { + display: none + } + script(src=`${_CC.config.base}js/wishlists.js`) + #hideButton.button.hidden= lang('WISHLISTS_HIDE') + #showButton.button= lang('WISHLISTS_SHOW') style. .wishlist-dropdown-container-unloaded { display: none; @@ -44,12 +51,6 @@ block content .wishlist-dropdown-container.wishlist-dropdown-container-active .fa-chevron-down { display: inline-block; } - - .hidden { - display: none - } - #hideButton.button.hidden= lang('WISHLISTS_HIDE') - #showButton.button= lang('WISHLISTS_SHOW') ul.noStyle.noLeftMargin if req.user._id !== '_CCUNKNOWN' li