From 218fdcf7c48144ee082c373cb1ddb95802ed3484 Mon Sep 17 00:00:00 2001 From: Andrea Vos Date: Tue, 11 Oct 2022 18:33:13 +0200 Subject: [PATCH 1/3] #325 [profile] custom opinions --- assets/dark.scss | 616 +++++++++++++------------- assets/fonts.scss | 2 +- assets/style.scss | 15 + assets/variables.scss | 11 + components/CookieConsent.vue | 2 +- components/IconSelector.vue | 63 +++ components/LegendOpinionListInput.vue | 108 +++++ components/ListInput.vue | 16 +- components/Opinion.vue | 70 ++- components/OpinionLegend.vue | 61 +-- components/OpinionListInput.vue | 103 +++-- components/Profile.vue | 8 +- components/ReducedColoursSwitch.vue | 27 ++ components/Tooltip.vue | 1 + locale/_base/translations.suml | 25 ++ locale/en/translations.suml | 25 ++ locale/expectedTranslations.js | 21 + locale/pl/translations.suml | 25 ++ migrations/061-profile-opinions.sql | 6 + nuxt.config.js | 5 + package.json | 1 + routes/profile.vue | 3 + routes/profileEditor.vue | 31 +- server/routes/profile.js | 25 +- src/icons.js | 15 + src/opinions.js | 10 +- src/styling.js | 2 + yarn.lock | 19 + 28 files changed, 879 insertions(+), 437 deletions(-) create mode 100644 components/IconSelector.vue create mode 100644 components/LegendOpinionListInput.vue create mode 100644 components/ReducedColoursSwitch.vue create mode 100644 migrations/061-profile-opinions.sql create mode 100644 src/icons.js create mode 100644 src/styling.js diff --git a/assets/dark.scss b/assets/dark.scss index 1cbf34af4..5b7f36876 100644 --- a/assets/dark.scss +++ b/assets/dark.scss @@ -3,333 +3,339 @@ @import "variables"; *:hover > .hover-invertible { - filter: invert(1); + filter: invert(1); } body[data-theme="dark"] { - $primary-dark: #ff95bb; - - background: initial !important; - background-color: $dark !important; - color: $light; - - a { color: $primary-dark; } - a:hover { color: lighten($primary-dark, 10%); } - .text-dark { color: $light !important; } - .btn-primary { color: $light; } - .btn-outline-primary { color: $light; &:hover {color: $light;}} - .btn-outline-success { color: lighten($success, 20%); &:hover {color: $light;} } - .alert-info { background-color: darken($info, 35%); border-color: darken($info, 25%); color: $light; } - - /* BUTTONS */ - - .btn-link { color: #fff; } - .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } - .btn-dark { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; } - .btn-dark:hover { color: #000; background-color: #f9fafb; border-color: #f9fafb; } - .btn-check:focus + .btn-dark, - .btn-dark:focus { color: #000; background-color: #f9fafb; border-color: #f9fafb; box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); } - .btn-check:checked + .btn-dark, - .btn-check:active + .btn-dark, - .btn-dark:active, - .btn-dark.active, - .show > .btn-dark.dropdown-toggle { color: #000; background-color: #f9fafb; border-color: #f9fafb; } - .btn-check:checked + .btn-dark:focus, - .btn-check:active + .btn-dark:focus, - .btn-dark:active:focus, - .btn-dark.active:focus, - .show > .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); } - .btn-dark:disabled, - .btn-dark.disabled { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; } - .btn-light { color: #fff; background-color: #212529; border-color: #212529; } - .btn-light:hover { color: #fff; background-color: #1c1f23; border-color: #1a1e21; } - .btn-check:focus + .btn-light, - .btn-light:focus { color: #fff; background-color: #1c1f23; border-color: #1a1e21; box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } - .btn-check:checked + .btn-light, - .btn-check:active + .btn-light, - .btn-light:active, - .btn-light.active, - .show > .btn-light.dropdown-toggle { color: #fff; background-color: #1a1e21; border-color: #191c1f; } - .btn-check:checked + .btn-light:focus, - .btn-check:active + .btn-light:focus, - .btn-light:active:focus, - .btn-light.active:focus, - .show > .btn-light.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } - .btn-light:disabled, - .btn-light.disabled { color: #fff; background-color: #212529; border-color: #212529; } - .btn-outline-dark { color: #f8f9fa; border-color: #f8f9fa; } - .btn-outline-dark:hover { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; } - .btn-check:focus + .btn-outline-dark, - .btn-outline-dark:focus { box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); } - .btn-check:checked + .btn-outline-dark, - .btn-check:active + .btn-outline-dark, - .btn-outline-dark:active, - .btn-outline-dark.active, - .btn-outline-dark.dropdown-toggle.show { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; } - .btn-check:checked + .btn-outline-dark:focus, - .btn-check:active + .btn-outline-dark:focus, - .btn-outline-dark:active:focus, - .btn-outline-dark.active:focus, - .btn-outline-dark.dropdown-toggle.show:focus { box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); } - .btn-outline-dark:disabled, - .btn-outline-dark.disabled { color: #f8f9fa; background-color: transparent; } - .btn-outline-light { color: #212529; border-color: #212529; } - .btn-outline-light:hover { color: #fff; background-color: #212529; border-color: #212529; } - .btn-check:focus + .btn-outline-light, - .btn-outline-light:focus { box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); } - .btn-check:checked + .btn-outline-light, - .btn-check:active + .btn-outline-light, - .btn-outline-light:active, - .btn-outline-light.active, - .btn-outline-light.dropdown-toggle.show { color: #fff; background-color: #212529; border-color: #212529; } - .btn-check:checked + .btn-outline-light:focus, - .btn-check:active + .btn-outline-light:focus, - .btn-outline-light:active:focus, - .btn-outline-light.active:focus, - .btn-outline-light.dropdown-toggle.show:focus { box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); } - .btn-outline-light:disabled, - .btn-outline-light.disabled { color: #212529; background-color: transparent; } - - /* DROPDOWNS */ - - .dropdown-menu { color: #dee2e6; background-color: #343a40; border-color: rgba(0, 0, 0, 0.15); } - .dropdown-menu .dropdown-item { color: #dee2e6; } - .dropdown-menu .dropdown-item:hover, - .dropdown-menu .dropdown-item:focus { color: #fff; background-color: rgba(255, 255, 255, 0.15); } - .dropdown-menu .dropdown-item.active, - .dropdown-menu .dropdown-item:active { color: #fff; background-color: #0d6efd; } - .dropdown-menu .dropdown-item.disabled, - .dropdown-menu .dropdown-item:disabled { color: #adb5bd; } - .dropdown-menu .dropdown-divider { border-color: rgba(0, 0, 0, 0.15); } - .dropdown-menu .dropdown-item-text { color: #dee2e6; } - .dropdown-menu .dropdown-header { color: #adb5bd; } - - /* LIST GROUPS */ - - .list-group-item-action { color: #fff; } - .list-group-item-action:hover, - .list-group-item-action:focus { color: #fff; background-color: #333; } - .list-group-item-action:active { color: #212529; background-color: #e9ecef; } - .list-group-item { color: #eee; background-color: #111; border: 1px solid #333; } - .list-group-item:not(:first-child) { border-top: none; } - .list-group-item.disabled, - .list-group-item:disabled { color: #fff; background-color: #000; } - .list-group-item.active { color: #fff; background-color: #0d6efd; border-color: #0d6efd; } - - /* TABS */ - - .nav-tabs { border-bottom: 1px solid #000; } - .nav-tabs .nav-link:hover, - [data-theme="dark"].nav-tabs .nav-link:focus { border-color: #212529 #212529 #000; } - .nav-tabs .nav-link.disabled { color: #333; } - .nav-tabs .nav-link.active, - .nav-tabs .nav-item.show .nav-link { color: #fff; background-color: #000; border-color: #212529 #212529 #000; } - - /* PAGINATION */ - - .page-link { color: #fff; background-color: #111; border: 1px solid #333; } - .page-link:hover { color: #fff; background-color: #333; border-color: #333; } - .page-link:focus { color: #fff; background-color: #000; } - .page-item.active .page-link { color: #fff; background-color: #0d6efd; border-color: #0d6efd; } - .page-item.disabled .page-link { color: #fff; background-color: #000; border-color: #333; } - - /* BACKGROUNDS */ - - .bg-light { background-color: #212529 !important; } - .bg-dark { background-color: #f8f9fa !important; } - .bg-white { background-color: #000 !important; } - .bg-white.text-white, - .bg-dark.text-white, - .bg-warning.text-dark, - .bg-info.text-dark { color: #212529 !important; } - - /* BORDERS */ - - .border, - .border-top, - .border-end, - .border-bottom, - .border-start { border-color: rgba(66, 70, 73, 0.5) !important; } - - /* BREADCRUMB */ - - .breadcrumb.border { border-color: #333 !important; } - - /* SHADOWS */ - - .shadow { box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.15) !important; } - .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.075) !important; } - .shadow-lg { box-shadow: 0 1rem 3rem rgba(255, 255, 255, 0.175) !important; } - - .cookie-consent { box-shadow: 0 -0.5rem 1rem rgba(255, 255, 255, 0.15) !important; } - - /* CARDS */ - - .card { background-color: #000; border: 1px solid rgba(255, 255, 255, 0.125); } - - /* MODALS */ - - .modal-content { background-color: #000; border: 1px solid rgba(255, 255, 255, 0.2); } - .modal-header { border-bottom: 1px solid #212529; } - .modal-footer { border-top: 1px solid #212529; } - .modal-backdrop.show { opacity: 0.75; } - - /* ACCORDIONS */ - - .accordion:not(.accordion-flush) { border-top: 1px solid #333; border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; } - .accordion-button { color: #fff; background-color: #000; border: 1px solid #333; border-top: none; } - .accordion-button:not(.collapsed) { color: #fff; background-color: #111; border-bottom: none; } - .accordion-button::after { filter: invert(1) grayscale(100%) brightness(200%); } - .accordion-collapse { border: 1px solid #333; } - .accordion-flush .accordion-button { border-right: 0; border-left: 0; border-radius: 0; } - .accordion-flush .accordion-collapse { border-width: 0; } - .accordion-flush .accordion-item:first-of-type .accordion-button { border-top-width: 0; border-top-left-radius: 0; border-top-right-radius: 0; } - .accordion-flush .accordion-item:last-of-type .accordion-button.collapsed { border-bottom-width: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } - - /* PROGRESS BARS */ - - .progress { background-color: #333; } - - /* FORMS */ - - .form-control::-webkit-input-placeholder, - .form-control::-moz-placeholder, - .form-control::placeholder { color: $light; } - .form-control-plaintext { color: $light; } - .form-control { color: #fff; background-color: #333; border: 1px solid #111; } - .form-select { color: #fff; border-color: #111 !important; background: #333 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px; border: 1px solid #111; } - .form-select:focus { border-color: #dc3545; box-shadow: 0 0 0 0.2rem #dc3545; background-color: rgba(255,0,0,0.1); } - .form-select:focus::-ms-value { color: #495057; background-color: #fff; } - .form-select option { color: #000; } - .form-select:disabled { color: #6c757d; background-color: #e9ecef; } - .form-select:-moz-focusring { text-shadow: 0 0 0 #495057; } - - /* CUSTOM */ - .separator { - > .mask { - &:after { - box-shadow: 0 0 10px $light; - } - } - > span { - box-shadow:0 2px 4px $light; - background: tint-color($light, 80%); - color: $dark; - } - } - - .invertible { - filter: invert(1); - } - - mark { - background-color: #848171; + background: initial !important; + background-color: $dark !important; color: $light; - } - .table, .table-striped { - > tbody > tr, > thead > tr, > tfoot > tr { - td, th { + a { color: $primary-dark; } + a:hover { color: lighten($primary-dark, 10%); } + .text-dark { color: $light !important; } + .btn-primary { color: $light; } + .btn-outline-primary { color: $light; &:hover {color: $light;}} + .btn-outline-success { color: lighten($success, 20%); &:hover {color: $light;} } + .alert-info { background-color: darken($info, 35%); border-color: darken($info, 25%); color: $light; } + + /* BUTTONS */ + + .btn-link { color: #fff; } + .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } + .btn-dark { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; } + .btn-dark:hover { color: #000; background-color: #f9fafb; border-color: #f9fafb; } + .btn-check:focus + .btn-dark, + .btn-dark:focus { color: #000; background-color: #f9fafb; border-color: #f9fafb; box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); } + .btn-check:checked + .btn-dark, + .btn-check:active + .btn-dark, + .btn-dark:active, + .btn-dark.active, + .show > .btn-dark.dropdown-toggle { color: #000; background-color: #f9fafb; border-color: #f9fafb; } + .btn-check:checked + .btn-dark:focus, + .btn-check:active + .btn-dark:focus, + .btn-dark:active:focus, + .btn-dark.active:focus, + .show > .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); } + .btn-dark:disabled, + .btn-dark.disabled { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; } + .btn-light { color: #fff; background-color: #212529; border-color: #212529; } + .btn-light:hover { color: #fff; background-color: #1c1f23; border-color: #1a1e21; } + .btn-check:focus + .btn-light, + .btn-light:focus { color: #fff; background-color: #1c1f23; border-color: #1a1e21; box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } + .btn-check:checked + .btn-light, + .btn-check:active + .btn-light, + .btn-light:active, + .btn-light.active, + .show > .btn-light.dropdown-toggle { color: #fff; background-color: #1a1e21; border-color: #191c1f; } + .btn-check:checked + .btn-light:focus, + .btn-check:active + .btn-light:focus, + .btn-light:active:focus, + .btn-light.active:focus, + .show > .btn-light.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } + .btn-light:disabled, + .btn-light.disabled { color: #fff; background-color: #212529; border-color: #212529; } + .btn-outline-dark { color: #f8f9fa; border-color: #f8f9fa; } + .btn-outline-dark:hover { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; } + .btn-check:focus + .btn-outline-dark, + .btn-outline-dark:focus { box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); } + .btn-check:checked + .btn-outline-dark, + .btn-check:active + .btn-outline-dark, + .btn-outline-dark:active, + .btn-outline-dark.active, + .btn-outline-dark.dropdown-toggle.show { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; } + .btn-check:checked + .btn-outline-dark:focus, + .btn-check:active + .btn-outline-dark:focus, + .btn-outline-dark:active:focus, + .btn-outline-dark.active:focus, + .btn-outline-dark.dropdown-toggle.show:focus { box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); } + .btn-outline-dark:disabled, + .btn-outline-dark.disabled { color: #f8f9fa; background-color: transparent; } + .btn-outline-light { color: #212529; border-color: #212529; } + .btn-outline-light:hover { color: #fff; background-color: #212529; border-color: #212529; } + .btn-check:focus + .btn-outline-light, + .btn-outline-light:focus { box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); } + .btn-check:checked + .btn-outline-light, + .btn-check:active + .btn-outline-light, + .btn-outline-light:active, + .btn-outline-light.active, + .btn-outline-light.dropdown-toggle.show { color: #fff; background-color: #212529; border-color: #212529; } + .btn-check:checked + .btn-outline-light:focus, + .btn-check:active + .btn-outline-light:focus, + .btn-outline-light:active:focus, + .btn-outline-light.active:focus, + .btn-outline-light.dropdown-toggle.show:focus { box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); } + .btn-outline-light:disabled, + .btn-outline-light.disabled { color: #212529; background-color: transparent; } + + /* DROPDOWNS */ + + .dropdown-menu { color: #dee2e6; background-color: #343a40; border-color: rgba(0, 0, 0, 0.15); } + .dropdown-menu .dropdown-item { color: #dee2e6; } + .dropdown-menu .dropdown-item:hover, + .dropdown-menu .dropdown-item:focus { color: #fff; background-color: rgba(255, 255, 255, 0.15); } + .dropdown-menu .dropdown-item.active, + .dropdown-menu .dropdown-item:active { color: #fff; background-color: #0d6efd; } + .dropdown-menu .dropdown-item.disabled, + .dropdown-menu .dropdown-item:disabled { color: #adb5bd; } + .dropdown-menu .dropdown-divider { border-color: rgba(0, 0, 0, 0.15); } + .dropdown-menu .dropdown-item-text { color: #dee2e6; } + .dropdown-menu .dropdown-header { color: #adb5bd; } + + /* LIST GROUPS */ + + .list-group-item-action { color: #fff; } + .list-group-item-action:hover, + .list-group-item-action:focus { color: #fff; background-color: #333; } + .list-group-item-action:active { color: #212529; background-color: #e9ecef; } + .list-group-item { color: #eee; background-color: #111; border: 1px solid #333; } + .list-group-item:not(:first-child) { border-top: none; } + .list-group-item.disabled, + .list-group-item:disabled { color: #fff; background-color: #000; } + .list-group-item.active { color: #fff; background-color: #0d6efd; border-color: #0d6efd; } + + /* TABS */ + + .nav-tabs { border-bottom: 1px solid #000; } + .nav-tabs .nav-link:hover, + [data-theme="dark"].nav-tabs .nav-link:focus { border-color: #212529 #212529 #000; } + .nav-tabs .nav-link.disabled { color: #333; } + .nav-tabs .nav-link.active, + .nav-tabs .nav-item.show .nav-link { color: #fff; background-color: #000; border-color: #212529 #212529 #000; } + + /* PAGINATION */ + + .page-link { color: #fff; background-color: #111; border: 1px solid #333; } + .page-link:hover { color: #fff; background-color: #333; border-color: #333; } + .page-link:focus { color: #fff; background-color: #000; } + .page-item.active .page-link { color: #fff; background-color: #0d6efd; border-color: #0d6efd; } + .page-item.disabled .page-link { color: #fff; background-color: #000; border-color: #333; } + + /* BACKGROUNDS */ + + .bg-light { background-color: #212529 !important; } + .bg-dark { background-color: #f8f9fa !important; } + .bg-white { background-color: #000 !important; } + .bg-white.text-white, + .bg-dark.text-white, + .bg-warning.text-dark, + .bg-info.text-dark { color: #212529 !important; } + + /* BORDERS */ + + .border, + .border-top, + .border-end, + .border-bottom, + .border-start { border-color: rgba(66, 70, 73, 0.5) !important; } + + /* BREADCRUMB */ + + .breadcrumb.border { border-color: #333 !important; } + + /* SHADOWS */ + + .shadow { box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.15) !important; } + .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.075) !important; } + .shadow-lg { box-shadow: 0 1rem 3rem rgba(255, 255, 255, 0.175) !important; } + + .cookie-consent { box-shadow: 0 -0.5rem 1rem rgba(255, 255, 255, 0.15) !important; } + + /* CARDS */ + + .card { background-color: #000; border: 1px solid rgba(255, 255, 255, 0.125); } + + /* MODALS */ + + .modal-content { background-color: #000; border: 1px solid rgba(255, 255, 255, 0.2); } + .modal-header { border-bottom: 1px solid #212529; } + .modal-footer { border-top: 1px solid #212529; } + .modal-backdrop.show { opacity: 0.75; } + + /* ACCORDIONS */ + + .accordion:not(.accordion-flush) { border-top: 1px solid #333; border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; } + .accordion-button { color: #fff; background-color: #000; border: 1px solid #333; border-top: none; } + .accordion-button:not(.collapsed) { color: #fff; background-color: #111; border-bottom: none; } + .accordion-button::after { filter: invert(1) grayscale(100%) brightness(200%); } + .accordion-collapse { border: 1px solid #333; } + .accordion-flush .accordion-button { border-right: 0; border-left: 0; border-radius: 0; } + .accordion-flush .accordion-collapse { border-width: 0; } + .accordion-flush .accordion-item:first-of-type .accordion-button { border-top-width: 0; border-top-left-radius: 0; border-top-right-radius: 0; } + .accordion-flush .accordion-item:last-of-type .accordion-button.collapsed { border-bottom-width: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } + + /* PROGRESS BARS */ + + .progress { background-color: #333; } + + /* FORMS */ + + .form-control::-webkit-input-placeholder, + .form-control::-moz-placeholder, + .form-control::placeholder { color: $light; } + .form-control-plaintext { color: $light; } + .form-control { color: #fff; background-color: #333; border: 1px solid #111; } + .form-select { color: #fff; border-color: #111 !important; background: #333 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px; border: 1px solid #111; } + .form-select:focus { border-color: #dc3545; box-shadow: 0 0 0 0.2rem #dc3545; background-color: rgba(255,0,0,0.1); } + .form-select:focus::-ms-value { color: #495057; background-color: #fff; } + .form-select option { color: #000; } + .form-select:disabled { color: #6c757d; background-color: #e9ecef; } + .form-select:-moz-focusring { text-shadow: 0 0 0 #495057; } + + /* CUSTOM */ + .separator { + > .mask { + &:after { + box-shadow: 0 0 10px $light; + } + } + > span { + box-shadow:0 2px 4px $light; + background: tint-color($light, 80%); + color: $dark; + } + } + + .invertible { + filter: invert(1); + } + + mark { + background-color: #848171; color: $light; - } } - } - .alert { .table, .table-striped { - > tbody > tr, > thead > tr, > tfoot > tr { - td, th { - color: $dark; + > tbody > tr, > thead > tr, > tfoot > tr { + td, th { + color: $light; + } } - } } - } - header { - .nav-item { - color: $light; - &.active, &:hover { - color: $primary-dark !important; - } - } - } - - @include media-breakpoint-down('lg', $grid-breakpoints) { - .nav-custom { - .btn { - &:hover, &:focus, &.active { - border-inline-start: 3px solid $primary-dark !important; + .alert { + .table, .table-striped { + > tbody > tr, > thead > tr, > tfoot > tr { + td, th { + color: $dark; + } + } } - } } - } - .nav-custom-start { - .btn { - &:hover, &:focus, &.active { - border-inline-start: 3px solid $primary-dark !important; - } - } - } - - @include media-breakpoint-up('lg', $grid-breakpoints) { - .nav-custom:not(.nav-custom-start) { - .nav-item { - &.btn { - &:hover, &:focus, &.active { - border-bottom: 3px solid $primary-dark !important; - } - } - } - } - } - - @include media-breakpoint-up('lg', $grid-breakpoints) { header { - @supports not (backdrop-filter: blur(12px)) { + .nav-item { + color: $light; + &.active, &:hover { + color: $primary-dark !important; + } + } + } + + @include media-breakpoint-down('lg', $grid-breakpoints) { + .nav-custom { + .btn { + &:hover, &:focus, &.active { + border-inline-start: 3px solid $primary-dark !important; + } + } + } + } + + .nav-custom-start { + .btn { + &:hover, &:focus, &.active { + border-inline-start: 3px solid $primary-dark !important; + } + } + } + + @include media-breakpoint-up('lg', $grid-breakpoints) { + .nav-custom:not(.nav-custom-start) { + .nav-item { + &.btn { + &:hover, &:focus, &.active { + border-bottom: 3px solid $primary-dark !important; + } + } + } + } + } + + @include media-breakpoint-up('lg', $grid-breakpoints) { + header { + @supports not (backdrop-filter: blur(12px)) { + background-color: $dark; + } + } + } + + .alert-primary, .alert-success, .alert-warning, .alert-danger { + a { + color: $primary-dark; + } + } + + .alert-warning a.btn-primary { + color: $white; + } + + .alert-light { + background-color: $gray-800; + color: $white; + } + + .badge.bg-dark { + color: $black; + } + + .vdp-datepicker__calendar { background-color: $dark; - } } - } - .alert-primary, .alert-success, .alert-warning, .alert-danger { - a { - color: $primary-dark; + .day-event-0 { + color: $black; } - } - .alert-warning a.btn-primary { - color: $white; - } + .profile-current { + border-inline-start: 3px solid $primary-dark !important; + } - .alert-light { - background-color: $gray-800; - color: $white; - } + .list-group-flare > :first-child { + border-top: 3px solid $primary-dark !important; + } - .badge.bg-dark { - color: $black; - } + code { + color: lighten($code-color, 45%); + background-color: darken($code-color, 30%); + border: 1px solid lighten($code-color, 30%); + } - .vdp-datepicker__calendar { - background-color: $dark; - } - - .day-event-0 { - color: $black; - } - - .profile-current { - border-inline-start: 3px solid $primary-dark !important; - } - - .list-group-flare > :first-child { - border-top: 3px solid $primary-dark !important; - } - - code { - color: lighten($code-color, 45%); - background-color: darken($code-color, 30%); - border: 1px solid lighten($code-color, 30%); - } + &:not(.reduced-colours) { + @each $name, $value in $colours { + .colour-#{$name} { + color: map-get($value, 'dark') !important; + } + } + } } diff --git a/assets/fonts.scss b/assets/fonts.scss index 89c29e4c8..034c53073 100644 --- a/assets/fonts.scss +++ b/assets/fonts.scss @@ -1,6 +1,6 @@ @use "sass:list"; -@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji:wght@700&display=swap'); @if list.index($fonts, 'Quicksand') { /* quicksand-regular - latin-ext_latin */ diff --git a/assets/style.scss b/assets/style.scss index 103c10bc3..0e3bced60 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -246,3 +246,18 @@ form[disabled] { border-inline-start: 3px solid $primary; padding-inline-start: calc(#{$list-group-item-padding-x} - 2px); } + +.bold { + font-weight: bold; +} +.italics { + font-style: italic; +} + +body:not(.reduced-colours) { + @each $name, $value in $colours { + .colour-#{$name} { + color: map-get($value, 'light') !important; + } + } +} diff --git a/assets/variables.scss b/assets/variables.scss index b5fae8967..7e4d2d58a 100644 --- a/assets/variables.scss +++ b/assets/variables.scss @@ -33,3 +33,14 @@ $square-button-size: 2.2rem; @import "~bootstrap/scss/utilities"; @import '~@fortawesome/fontawesome-pro/scss/variables'; + +$primary-dark: #ff95bb; + +$colours: ( + 'pink': ('light': $primary, 'dark': $primary-dark), + 'red': ('light': $red, 'dark': $red-200), + 'orange': ('light': $orange-600, 'dark': $orange-300), + 'green': ('light': $green, 'dark': $green-300), + 'blue': ('light': $blue-700, 'dark': $blue-200), + 'grey': ('light': $gray-600, 'dark': $gray-300), +); diff --git a/components/CookieConsent.vue b/components/CookieConsent.vue index 7e0b9e696..5e7e7a1c1 100644 --- a/components/CookieConsent.vue +++ b/components/CookieConsent.vue @@ -54,7 +54,7 @@ export default { }, computed: { enabled() { - return this.config.ads?.enabled; + return this.config.ads?.enabled && process.env.NODE_ENV !== 'development'; }, visible() { return this.enabled && this.consent === undefined; diff --git a/components/IconSelector.vue b/components/IconSelector.vue new file mode 100644 index 000000000..d52e1e4b9 --- /dev/null +++ b/components/IconSelector.vue @@ -0,0 +1,63 @@ + + + + + diff --git a/components/LegendOpinionListInput.vue b/components/LegendOpinionListInput.vue new file mode 100644 index 000000000..1b2f96e5e --- /dev/null +++ b/components/LegendOpinionListInput.vue @@ -0,0 +1,108 @@ + + + + + + diff --git a/components/ListInput.vue b/components/ListInput.vue index 2e49c1e6b..3480d51f5 100644 --- a/components/ListInput.vue +++ b/components/ListInput.vue @@ -3,22 +3,24 @@
  • - - - + + -
    - +
  • -
    • @@ -37,6 +39,8 @@ value: {}, prototype: { 'default': '' }, group: {}, + readonly: { type: Boolean }, + maxlength: { 'default': null }, }, data() { return { diff --git a/components/Opinion.vue b/components/Opinion.vue index 24c6c95e0..d12b88764 100644 --- a/components/Opinion.vue +++ b/components/Opinion.vue @@ -1,52 +1,48 @@ diff --git a/components/OpinionLegend.vue b/components/OpinionLegend.vue index e689671f4..a817ba720 100644 --- a/components/OpinionLegend.vue +++ b/components/OpinionLegend.vue @@ -1,29 +1,36 @@ + + diff --git a/components/OpinionListInput.vue b/components/OpinionListInput.vue index e555ffbaf..b455cccb4 100644 --- a/components/OpinionListInput.vue +++ b/components/OpinionListInput.vue @@ -1,62 +1,55 @@ - diff --git a/components/Profile.vue b/components/Profile.vue index e5cbeca4a..799284c67 100644 --- a/components/Profile.vue +++ b/components/Profile.vue @@ -64,7 +64,7 @@
    @@ -75,7 +75,7 @@
    @@ -103,14 +103,14 @@

    {{ column.header }}

    - +
    diff --git a/components/ReducedColoursSwitch.vue b/components/ReducedColoursSwitch.vue new file mode 100644 index 000000000..685330e62 --- /dev/null +++ b/components/ReducedColoursSwitch.vue @@ -0,0 +1,27 @@ + + + diff --git a/components/Tooltip.vue b/components/Tooltip.vue index 163e3c1eb..46a5ee40e 100644 --- a/components/Tooltip.vue +++ b/components/Tooltip.vue @@ -24,6 +24,7 @@ top: -2.2rem; left: -50%; font-weight: normal; + font-style: normal; font-size: .85rem; white-space: nowrap; } diff --git a/locale/_base/translations.suml b/locale/_base/translations.suml index 73a4178c7..34f0baf70 100644 --- a/locale/_base/translations.suml +++ b/locale/_base/translations.suml @@ -609,6 +609,29 @@ profile: or (under construction) by a rel="me" tag pointing back to the card. Our links also include a rel="me" tag, so that external websites can verify your card the other way round too. column: 'Column' + opinions: + header: 'Legend/opinions' + description: 'Description…' + colours: + _: '(Font colour…)' + pink: 'Pink' + red: 'Red' + orange: 'Orange' + green: 'Green' + blue: 'Blue' + grey: 'Grey' + styles: + _: '(Style…)' + bold: 'Bold' + italics: 'Italics' + small: 'Small' + validation: + missingIcon: 'Icon is required' + missingDescription: 'Description is required' + duplicateIcon: 'Icon must be unique' + duplicateDescription: 'Description must be unique' + invalidOpinion: 'Selected icon was not found in the legend above' + custom: 'custom, added by the user:' header: 'Cards' list: 'Your cards' @@ -660,6 +683,7 @@ crud: loginRequired: '{/account=Log in} to submit an entry' copy: 'Copy link' download: 'Download' + loadAll: 'Load all…' footer: license: > @@ -895,6 +919,7 @@ mode: light: 'Light mode' automatic: 'Automatic' dark: 'Dark mode' + reducedColours: 'Reduced colours' ban: reason: 'Ban reason' diff --git a/locale/en/translations.suml b/locale/en/translations.suml index 854484b59..9f81a0588 100644 --- a/locale/en/translations.suml +++ b/locale/en/translations.suml @@ -702,6 +702,29 @@ profile: or (under construction) by a rel="me" tag pointing back to the card. Our links also include a rel="me" tag, so that external websites can verify your card the other way round too. column: 'Column' + opinions: + header: 'Legend/opinions' + description: 'Description…' + colours: + _: '(Font colour…)' + pink: 'Pink' + red: 'Red' + orange: 'Orange' + green: 'Green' + blue: 'Blue' + grey: 'Grey' + styles: + _: '(Style…)' + bold: 'Bold' + italics: 'Italics' + small: 'Small' + validation: + missingIcon: 'Icon is required' + missingDescription: 'Description is required' + duplicateIcon: 'Icon must be unique' + duplicateDescription: 'Description must be unique' + invalidOpinion: 'Selected icon was not found in the legend above' + custom: 'custom, added by the user:' header: 'Cards' list: 'Your cards' @@ -756,6 +779,7 @@ crud: loginRequired: '{/account=Log in} to submit an entry' copy: 'Copy link' download: 'Download' + loadAll: 'Load all…' footer: license: > @@ -1007,6 +1031,7 @@ mode: light: 'Light mode' automatic: 'Automatic' dark: 'Dark mode' + reducedColours: 'Reduced colours' ban: reason: 'Ban reason' diff --git a/locale/expectedTranslations.js b/locale/expectedTranslations.js index 7fdf9b8a8..5a0611db1 100644 --- a/locale/expectedTranslations.js +++ b/locale/expectedTranslations.js @@ -52,4 +52,25 @@ export default [ 'user.qr.download', 'footer.stats.month', 'profile.wordsColumnHeader', + 'profile.opinions.header', + 'profile.opinions.description', + 'profile.opinions.colours._', + 'profile.opinions.colours.pink', + 'profile.opinions.colours.red', + 'profile.opinions.colours.orange', + 'profile.opinions.colours.green', + 'profile.opinions.colours.blue', + 'profile.opinions.colours.grey', + 'profile.opinions.styles._', + 'profile.opinions.styles.bold', + 'profile.opinions.styles.italics', + 'profile.opinions.styles.small', + 'profile.opinions.validation.missingIcon', + 'profile.opinions.validation.missingDescription', + 'profile.opinions.validation.duplicateIcon', + 'profile.opinions.validation.duplicateDescription', + 'profile.opinions.validation.invalidOpinion', + 'profile.opinions.custom', + 'mode.reducedColours', + 'crud.loadAll', ]; diff --git a/locale/pl/translations.suml b/locale/pl/translations.suml index 4d7e40422..545aeb95a 100644 --- a/locale/pl/translations.suml +++ b/locale/pl/translations.suml @@ -1343,6 +1343,29 @@ profile: albo (ficzer w budowie) poprzez umieszczenie tagu rel="me" wskazującego z powrotem na wizytówkę. Nasze linki również umieszczają rel="me", aby zewnętrzne strony mogły potwierdzić wizytówkę również w odwrotną stronę. column: 'Kolumna' + opinions: + header: 'Legenda/opinie' + description: 'Opis…' + colours: + _: '(Kolor fontu…)' + pink: 'Różowy' + red: 'Czerwony' + orange: 'Pomarańczowy' + green: 'Zielony' + blue: 'Niebieski' + grey: 'Szary' + styles: + _: '(Styl tekstu…)' + bold: 'Pogrubiony' + italics: 'Kursywa' + small: 'Mały' + validation: + missingIcon: 'Ikona jest wymagana' + missingDescription: 'Opis jest wymagany' + duplicateIcon: 'Ikony muszą być unikalne' + duplicateDescription: 'Opishy muszą być unikalne' + invalidOpinion: 'Wybrana ikona nie jest dostępna w legendzie powyżej' + custom: 'dodane ręcznie:' header: 'Wizytówki' list: 'Twoje wizytówki' @@ -1463,6 +1486,7 @@ crud: loginRequired: '{/konto=Zaloguj się}, aby zgłosić wpis' copy: 'Skopiuj link' download: 'Ściągnij' + loadAll: 'Załaduj wszystko…' footer: license: > @@ -1679,6 +1703,7 @@ mode: light: 'Tryb dzienny' automatic: 'Auto' dark: 'Tryb nocny' + reducedColours: 'Zredukowane kolory' ban: reason: 'Powód blokady' diff --git a/migrations/061-profile-opinions.sql b/migrations/061-profile-opinions.sql new file mode 100644 index 000000000..3c7223b44 --- /dev/null +++ b/migrations/061-profile-opinions.sql @@ -0,0 +1,6 @@ +-- Up + +ALTER TABLE profiles ADD COLUMN opinions TEXT NOT NULL DEFAULT '{}'; + +-- Down + diff --git a/nuxt.config.js b/nuxt.config.js index 5269b8726..37bacaeb0 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -202,10 +202,15 @@ export default { config.module.rules.push({ test: /\.md$/, use: ['html-loader', 'markdown-loader'] + }); + config.module.rules.push({ + test: /\.ya?ml$/, + use: 'yaml-loader', }) }, }, env: { + ENV: process.env.ENV, BASE_URL: process.env.BASE_URL, HOME_URL: process.env.HOME_URL || 'https://pronouns.page', TITLE: title, diff --git a/package.json b/package.json index 91d887845..3ed3fa547 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "vuedraggable": "^2.24.3", "vuejs-datepicker": "^1.6.2", "webpack": "^5.0", + "yaml-loader": "^0.8.0", "zh_cn_zh_tw": "^1.0.7" }, "devDependencies": { diff --git a/routes/profile.vue b/routes/profile.vue index d8e56d674..be383f4c9 100644 --- a/routes/profile.vue +++ b/routes/profile.vue @@ -135,6 +135,9 @@ +
    + +
    diff --git a/routes/profileEditor.vue b/routes/profileEditor.vue index 6d0d54ca7..a6fde3ce3 100644 --- a/routes/profileEditor.vue +++ b/routes/profileEditor.vue @@ -92,7 +92,12 @@
    - +

    + + profile.opinions.header +

    + +
    @@ -103,7 +108,7 @@

    profile.namesInfo

    - +
    @@ -120,7 +125,7 @@ profile.pronounsInfo

    - + @@ -229,7 +234,7 @@ profile.column {{i + 1}} - + @@ -254,6 +259,7 @@ import link from '../plugins/link'; import {minBirthdate, maxBirthdate, formatDate} from '../src/birthdate'; import opinions from '../src/opinions'; + import t from '../src/translator';`` const defaultWords = config.profile.defaultWords.map(({header, values}) => { return { @@ -276,6 +282,18 @@ return Array.isArray(arrayObject) ? arrayObject : Object.values(arrayObject); } + const opinionsToForm = (opinions) => buildList(function*() { + for (let [key, options] of Object.entries(opinions)) { + yield { + key, + icon: options.icon, + description: options.description || t.get(`profile.opinion.${key}`), + colour: options.colour || '', + style: options.style || '', + }; + } + }) + const buildProfile = (profiles, currentLocale) => { for (let locale in profiles) { if (!profiles.hasOwnProperty(locale)) { @@ -298,6 +316,7 @@ credentials: profile.credentials, credentialsLevel: profile.credentialsLevel, credentialsName: profile.credentialsName, + opinions: opinionsToForm(profile.opinions || {}), }; } } @@ -322,6 +341,7 @@ credentials: [], credentialsLevel: null, credentialsName: null, + opinions: opinionsToForm(profile.opinions || {}), }; } @@ -340,6 +360,7 @@ credentials: [], credentialsLevel: null, credentialsName: null, + opinions: {}, }; }; @@ -354,6 +375,7 @@ }, propagate: [], flagsAsterisk: process.env.FLAGS_ASTERISK, + defaultOpinions: opinionsToForm(opinions), }; }, async asyncData({ app, store }) { @@ -384,6 +406,7 @@ this.saving = true; try { await this.$post(`/profile/save`, { + opinions: this.opinions, names: this.names, pronouns: this.pronouns, description: this.description, diff --git a/server/routes/profile.js b/server/routes/profile.js index f362d0a09..3d258be38 100644 --- a/server/routes/profile.js +++ b/server/routes/profile.js @@ -9,6 +9,7 @@ import fs from 'fs'; import { minBirthdate, maxBirthdate, formatDate, parseDate } from '../../src/birthdate'; import {socialProviders} from "../../src/socialProviders"; import {downgradeToV1, upgradeToV2} from "../profileV2"; +import { colours, styles } from '../../src/styling'; const normalise = s => s.trim().toLowerCase(); @@ -66,6 +67,7 @@ const fetchProfiles = async (db, username, self) => { for (let profile of profiles) { const links = JSON.parse(profile.links); p[profile.locale] = { + opinions: JSON.parse(profile.opinions), names: JSON.parse(profile.names), pronouns: JSON.parse(profile.pronouns), description: profile.description, @@ -173,6 +175,22 @@ const sanitiseBirthday = (bd) => { return formatDate(bd); } +const cleanupOpinions = (opinions) => { + const cleanOpinions = {} + let i = 0; + for (let opinion of opinions) { + if (!opinion.icon || !opinion.description || i >= 5) { continue; } + cleanOpinions[opinion.icon] = { + icon: opinion.icon, + description: opinion.description.substring(0, 24), + colour: opinion.colour && colours.includes(opinion.colour) ? opinion.colour : undefined, + style: opinion.style && styles.includes(opinion.style) ? opinion.style : undefined, + } + i++; + } + return cleanOpinions; +} + router.post('/profile/save', handleErrorAsync(async (req, res) => { if (!req.user) { return res.status(401).json({error: 'Unauthorised'}); @@ -188,11 +206,14 @@ router.post('/profile/save', handleErrorAsync(async (req, res) => { req.body.customFlags = Object.values(req.body.customFlags); } + const opinions = cleanupOpinions(req.body.opinions); + // TODO just make it a transaction... const ids = (await req.db.all(SQL`SELECT * FROM profiles WHERE userId = ${req.user.id} AND locale = ${global.config.locale}`)).map(row => row.id); if (ids.length) { await req.db.get(SQL`UPDATE profiles SET + opinions = ${JSON.stringify(opinions)}, names = ${JSON.stringify(req.body.names)}, pronouns = ${JSON.stringify(req.body.pronouns)}, description = ${req.body.description}, @@ -212,8 +233,8 @@ router.post('/profile/save', handleErrorAsync(async (req, res) => { WHERE id = ${ids[0]} `); } else { - await req.db.get(SQL`INSERT INTO profiles (id, userId, locale, names, pronouns, description, birthday, links, flags, customFlags, words, active, teamName, footerName, footerAreas) - VALUES (${ulid()}, ${req.user.id}, ${global.config.locale}, ${JSON.stringify(req.body.names)}, ${JSON.stringify(req.body.pronouns)}, + await req.db.get(SQL`INSERT INTO profiles (id, userId, locale, opinions, names, pronouns, description, birthday, links, flags, customFlags, words, active, teamName, footerName, footerAreas) + VALUES (${ulid()}, ${req.user.id}, ${global.config.locale}, ${JSON.stringify(opinions)}, ${JSON.stringify(req.body.names)}, ${JSON.stringify(req.body.pronouns)}, ${req.body.description}, ${sanitiseBirthday(req.body.birthday || null)}, ${JSON.stringify(req.body.links.filter(x => !!x))}, ${JSON.stringify(req.body.flags)}, ${JSON.stringify(req.body.customFlags)}, ${JSON.stringify(req.body.words)}, 1, ${req.isGranted() ? req.body.teamName || null : ''}, diff --git a/src/icons.js b/src/icons.js new file mode 100644 index 000000000..03bc4f76d --- /dev/null +++ b/src/icons.js @@ -0,0 +1,15 @@ +import iconsMetadata from '@fortawesome/fontawesome-pro/metadata/icons.yml'; + +const icons = []; +for (let [iconName, iconMetadata] of Object.entries(iconsMetadata)) { + icons.push({ + name: iconName, + styles: iconMetadata.styles, + searchTerms: [ + ...iconMetadata.search.terms.map(t => (t + '').toLowerCase()), + iconName.toLowerCase(), + iconMetadata.label.toLowerCase(), + ], + }); +} +export default icons; diff --git a/src/opinions.js b/src/opinions.js index 08eeb2cb9..cd2269ef2 100644 --- a/src/opinions.js +++ b/src/opinions.js @@ -1,7 +1,7 @@ export default { - yes: { value: 3, bold: true }, - jokingly: { value: 1 }, - close: { value: 1 }, - meh: { value: 0 }, - no: { value: -3, small: true, color: 'muted' }, + yes: { value: 3, icon: 's:heart', emoji: '❤️', colour: 'pink', style: 'bold' }, + jokingly: { value: 1, icon: 'grin-tongue', emoji: '😜', colour: 'orange' }, + close: { value: 1, icon: 'user-friends', emoji: '🫂', colour: 'red' }, + meh: { value: 0, icon: 'thumbs-up', emoji: '👍' }, + no: { value: -3, icon: 'thumbs-down', emoji: '👎', colour: 'grey', style: 'small' }, }; diff --git a/src/styling.js b/src/styling.js new file mode 100644 index 000000000..a9989286d --- /dev/null +++ b/src/styling.js @@ -0,0 +1,2 @@ +export const colours = ['', 'pink', 'red', 'orange', 'green', 'blue', 'grey']; +export const styles = ['', 'bold', 'italics', 'small']; diff --git a/yarn.lock b/yarn.lock index 8aea36bf6..f99e535fb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5714,6 +5714,11 @@ isstream@~0.1.2: resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a" integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo= +javascript-stringify@^2.0.1: + version "2.1.0" + resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-2.1.0.tgz#27c76539be14d8bd128219a2d731b09337904e79" + integrity sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg== + jest-worker@^26.5.0, jest-worker@^26.6.2: version "26.6.2" resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed" @@ -10870,11 +10875,25 @@ yallist@^4.0.0: resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72" integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A== +yaml-loader@^0.8.0: + version "0.8.0" + resolved "https://registry.yarnpkg.com/yaml-loader/-/yaml-loader-0.8.0.tgz#c839325e3fdee082b3768b2a21fe34fde5d96f61" + integrity sha512-LjeKnTzVBKWiQBeE2L9ssl6WprqaUIxCSNs5tle8PaDydgu3wVFXTbMfsvF2MSErpy9TDVa092n4q6adYwJaWg== + dependencies: + javascript-stringify "^2.0.1" + loader-utils "^2.0.0" + yaml "^2.0.0" + yaml@^1.10.0: version "1.10.0" resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e" integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg== +yaml@^2.0.0: + version "2.1.3" + resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.1.3.tgz#9b3a4c8aff9821b696275c79a8bee8399d945207" + integrity sha512-AacA8nRULjKMX2DvWvOAdBZMOfQlypSFkjcOcu9FalllIDJ1kvlREzcdIZmidQUqqeMv7jorHjq2HlLv/+c2lg== + yargs-parser@^11.1.1: version "11.1.1" resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-11.1.1.tgz#879a0865973bca9f6bab5cbdf3b1c67ec7d3bcf4" From af50cf41f96d01c9b8c952f212e0779600a0b020 Mon Sep 17 00:00:00 2001 From: Andrea Vos Date: Tue, 11 Oct 2022 19:37:22 +0200 Subject: [PATCH 2/3] #325 [profile] custom opinions - fix --- routes/profileEditor.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/routes/profileEditor.vue b/routes/profileEditor.vue index a6fde3ce3..fccb2895a 100644 --- a/routes/profileEditor.vue +++ b/routes/profileEditor.vue @@ -97,7 +97,7 @@ profile.opinions.header - +
    @@ -360,7 +360,7 @@ credentials: [], credentialsLevel: null, credentialsName: null, - opinions: {}, + opinions: [], }; }; From 3ed247f3f61271c2af5d54f6ab63c86428fdfe52 Mon Sep 17 00:00:00 2001 From: Andrea Vos Date: Wed, 12 Oct 2022 18:07:56 +0200 Subject: [PATCH 3/3] #328 [bug] Reduced Colours is always on when refresh on test env (and other fixes from testing) --- components/LegendOpinionListInput.vue | 2 +- components/ReducedColoursSwitch.vue | 2 +- server/routes/profile.js | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/components/LegendOpinionListInput.vue b/components/LegendOpinionListInput.vue index 1b2f96e5e..e8626e078 100644 --- a/components/LegendOpinionListInput.vue +++ b/components/LegendOpinionListInput.vue @@ -48,7 +48,7 @@ export default { showIconSelector: false, colours, styles, - skipIcons: [...Object.values(opinions).map(op => op.icon), 'ad'], + skipIcons: [...Object.values(opinions).map(op => op.icon), 'ad', 'helicopter'], } }, watch: { diff --git a/components/ReducedColoursSwitch.vue b/components/ReducedColoursSwitch.vue index 685330e62..929739a61 100644 --- a/components/ReducedColoursSwitch.vue +++ b/components/ReducedColoursSwitch.vue @@ -15,7 +15,7 @@ mounted() { if (!process.client) { return; } - this.reducedColours = !!(localStorage.getItem('reducedColours') || false); + this.reducedColours = localStorage.getItem('reducedColours') === 'true'; }, watch: { reducedColours(v) { diff --git a/server/routes/profile.js b/server/routes/profile.js index 3d258be38..dd10551ec 100644 --- a/server/routes/profile.js +++ b/server/routes/profile.js @@ -104,6 +104,7 @@ function* isSuspicious(profile) { JSON.stringify(profile.pronouns), JSON.stringify(profile.names), JSON.stringify(profile.words), + JSON.stringify(profile.opinions), ]) { s = s.toLowerCase().replace(/\s+/g, ' '); for (let sus of susRegexes) {