From 1cf14461884080b25e950c844ce552b68785ec2d Mon Sep 17 00:00:00 2001 From: Christian Medders - Bixal <88721460+clmedders@users.noreply.github.com> Date: Tue, 24 Sep 2024 17:31:55 -0400 Subject: [PATCH 01/21] VOTE-2823 Update French string translation (#1003) --- web/modules/custom/vote_utility/translations/fr.po | 3 +++ 1 file changed, 3 insertions(+) diff --git a/web/modules/custom/vote_utility/translations/fr.po b/web/modules/custom/vote_utility/translations/fr.po index 528eb1e4e..ad5bcdf58 100644 --- a/web/modules/custom/vote_utility/translations/fr.po +++ b/web/modules/custom/vote_utility/translations/fr.po @@ -370,3 +370,6 @@ msgstr "vendredi" # data.translations.days.saturday msgid "Saturday" msgstr "samedi" + +msgid "Know your voting rights" +msgstr "Connaissez vos droits de vote" \ No newline at end of file From e4285d8226961b7bab0b7cb7124b543f57d4892a Mon Sep 17 00:00:00 2001 From: Christian Medders - Bixal <88721460+clmedders@users.noreply.github.com> Date: Tue, 24 Sep 2024 17:36:34 -0400 Subject: [PATCH 02/21] Vote-2841: apply hover style to usa-form links (#989) --- web/themes/custom/votegov/src/sass/base/link.scss | 4 +++- .../custom/votegov/src/sass/uswds-overrides/usa-form.scss | 1 - 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/web/themes/custom/votegov/src/sass/base/link.scss b/web/themes/custom/votegov/src/sass/base/link.scss index d39615dbc..cb9a5286e 100644 --- a/web/themes/custom/votegov/src/sass/base/link.scss +++ b/web/themes/custom/votegov/src/sass/base/link.scss @@ -2,7 +2,9 @@ @use "mixins" as *; a { - main & { + main &, + // targeting links within NVRF form + .usa-form & { @include vote-link-bg; } } diff --git a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-form.scss b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-form.scss index 0d26a1307..e7f8195dd 100644 --- a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-form.scss +++ b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-form.scss @@ -24,7 +24,6 @@ } } - ::placeholder { --input-placeholder--text: inherit; color: var(--input-placeholder--text); From c0433c8292e27ce2c922a66ad99f5c9e1561bb45 Mon Sep 17 00:00:00 2001 From: Mandy Lloyd Date: Tue, 24 Sep 2024 18:39:56 -0400 Subject: [PATCH 03/21] VOTE-2571: Add "back to top" button (#962) --- .../custom/votegov/img/svg/arrow-default.svg | 4 ++ .../custom/votegov/img/svg/arrow-upward.svg | 3 + web/themes/custom/votegov/src/js/to-top.js | 26 +++++++++ .../votegov/src/sass/components/_index.scss | 1 + .../votegov/src/sass/components/to-top.scss | 57 +++++++++++++++++++ .../templates/component/to-top.html.twig | 2 + .../votegov/templates/layout/page.html.twig | 2 + .../custom/votegov/votegov.libraries.yml | 8 +++ 8 files changed, 103 insertions(+) create mode 100644 web/themes/custom/votegov/img/svg/arrow-default.svg create mode 100644 web/themes/custom/votegov/img/svg/arrow-upward.svg create mode 100644 web/themes/custom/votegov/src/js/to-top.js create mode 100644 web/themes/custom/votegov/src/sass/components/to-top.scss create mode 100644 web/themes/custom/votegov/templates/component/to-top.html.twig diff --git a/web/themes/custom/votegov/img/svg/arrow-default.svg b/web/themes/custom/votegov/img/svg/arrow-default.svg new file mode 100644 index 000000000..e43830c7c --- /dev/null +++ b/web/themes/custom/votegov/img/svg/arrow-default.svg @@ -0,0 +1,4 @@ + + + + diff --git a/web/themes/custom/votegov/img/svg/arrow-upward.svg b/web/themes/custom/votegov/img/svg/arrow-upward.svg new file mode 100644 index 000000000..3781feab3 --- /dev/null +++ b/web/themes/custom/votegov/img/svg/arrow-upward.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/themes/custom/votegov/src/js/to-top.js b/web/themes/custom/votegov/src/js/to-top.js new file mode 100644 index 000000000..f2911b239 --- /dev/null +++ b/web/themes/custom/votegov/src/js/to-top.js @@ -0,0 +1,26 @@ +const backToTop = document.querySelector('.back-to-top'); +const topOffset = 60; +let lastKnownScrollPosition = 0; +let ticking = false; + +const scrollFunction = (inverted) => { + if (inverted) { + backToTop.classList.add('js-scrolled'); + } else { + backToTop.classList.remove('js-scrolled'); + } +} + +document.addEventListener('scroll', (e) => { + scrollCompare = window.scrollY <= lastKnownScrollPosition; + lastKnownScrollPosition = window.scrollY; + + if (!ticking) { + window.requestAnimationFrame(function() { + scrollFunction(scrollCompare && window.scrollY > topOffset); + ticking = false; + }); + + ticking = true; + } +}); diff --git a/web/themes/custom/votegov/src/sass/components/_index.scss b/web/themes/custom/votegov/src/sass/components/_index.scss index 917ccd8fe..7af9b12c1 100644 --- a/web/themes/custom/votegov/src/sass/components/_index.scss +++ b/web/themes/custom/votegov/src/sass/components/_index.scss @@ -24,3 +24,4 @@ @forward "usagov-partner"; @forward "a11y-toolbar"; @forward "double-deck-card"; +@forward "to-top"; diff --git a/web/themes/custom/votegov/src/sass/components/to-top.scss b/web/themes/custom/votegov/src/sass/components/to-top.scss new file mode 100644 index 000000000..cbb1280e4 --- /dev/null +++ b/web/themes/custom/votegov/src/sass/components/to-top.scss @@ -0,0 +1,57 @@ +@use "uswds-core" as *; +@use "mixins" as *; +@use "variables" as *; + +.back-to-top { + --vote-button-background: #{$base-white}; + --vote-button-border: #{$base-primary}; + --vote-button-arrow-icon: #{$base-dark}; + + [data-theme="contrast"] & { + --vote-button-border: #{$link-high-contrast}; + } + + @include hover { + --vote-button-background: #{$base-primary}; + --vote-button-arrow-icon: #{$base-white}; + + [data-theme="contrast"] & { + --vote-button-background: #{$link-high-contrast}; + --vote-button-arrow-icon: #{$base-white}; + } + } + + @include u-radius('pill'); + @include u-width(6); + @include u-height(6); + @include u-position('fixed'); + @include u-radius('pill'); + bottom: 1.25rem; + right: 2rem; + margin: auto; + background-color: var(--vote-button-background); + border: 2px solid var(--vote-button-border); + outline: 1px solid $base-white; + transition: all 200ms; + opacity: 0; + visibility: hidden; + z-index: 1000; + + @include at-media('tablet') { + bottom: 3.5rem; + } + + @include before { + @include u-display('inline-block'); + @include u-width('full'); + @include u-height('full'); + mask: url('../../img/svg/arrow-default.svg') no-repeat center; + mask-size: auto; + background-color: var(--vote-button-arrow-icon); + } + + &.js-scrolled { + opacity: 1; + visibility: visible; + } +} diff --git a/web/themes/custom/votegov/templates/component/to-top.html.twig b/web/themes/custom/votegov/templates/component/to-top.html.twig new file mode 100644 index 000000000..a11110c5c --- /dev/null +++ b/web/themes/custom/votegov/templates/component/to-top.html.twig @@ -0,0 +1,2 @@ +{{ attach_library('votegov/to_top') }} + diff --git a/web/themes/custom/votegov/templates/layout/page.html.twig b/web/themes/custom/votegov/templates/layout/page.html.twig index 13f09d300..66fe05df2 100644 --- a/web/themes/custom/votegov/templates/layout/page.html.twig +++ b/web/themes/custom/votegov/templates/layout/page.html.twig @@ -134,6 +134,8 @@ {% endif %} {% endblock %} +{% include '@votegov/component/to-top.html.twig' %} +