From 005f45ae1bf86f674d04256f9f4f9a9bbeb9181c Mon Sep 17 00:00:00 2001 From: Lucas Cumsille M Date: Wed, 15 Oct 2025 12:03:33 +0000 Subject: [PATCH 1/3] Fixed Vertical Aligment for comment-teaser__avatar --- www/docs/style/sass/pages/_section.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/www/docs/style/sass/pages/_section.scss b/www/docs/style/sass/pages/_section.scss index ea87717778..fd9144adb0 100644 --- a/www/docs/style/sass/pages/_section.scss +++ b/www/docs/style/sass/pages/_section.scss @@ -574,16 +574,16 @@ span.hi { .comment-teaser__avatar { background-color: #a94ca6; display: inline-block; - @include radius(emCalc(24)); + @include radius(24px); color: #fff; text-align: center; - width: emCalc(24); - height: emCalc(24); + width: 24px; + height: 24px; float: left; .initial { font-size: emCalc(14); vertical-align: middle; - line-height: 1em; + line-height: 24px; font-weight: 600; } } From 36c09b1a47f3db7f39edfd1a72ace4a03f63413f Mon Sep 17 00:00:00 2001 From: Lucas Cumsille M Date: Wed, 15 Oct 2025 12:33:16 +0000 Subject: [PATCH 2/3] Fixed elbow icon contrast accessibility --- www/docs/style/img/elbow.svg | 1 + www/docs/style/sass/pages/_section.scss | 7 ++----- 2 files changed, 3 insertions(+), 5 deletions(-) create mode 100644 www/docs/style/img/elbow.svg diff --git a/www/docs/style/img/elbow.svg b/www/docs/style/img/elbow.svg new file mode 100644 index 0000000000..d38694d48d --- /dev/null +++ b/www/docs/style/img/elbow.svg @@ -0,0 +1 @@ + diff --git a/www/docs/style/sass/pages/_section.scss b/www/docs/style/sass/pages/_section.scss index fd9144adb0..6b91fbb9e3 100644 --- a/www/docs/style/sass/pages/_section.scss +++ b/www/docs/style/sass/pages/_section.scss @@ -548,13 +548,10 @@ span.hi { @media (min-width: $medium-screen) { margin-left: 70px; padding-left: 26px; - background-image: url('../img/elbow.png'); - background-position: 0 3px; + background-image: url('../img/elbow.svg'); + background-position: 0 0; background-repeat: no-repeat; background-size: 24px; - @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { - background-image: url('../img/elbow@2.png'); - } } .morecomments { From 2c069130e5f628b6de663454a0873f3a26e17a12 Mon Sep 17 00:00:00 2001 From: Lucas Cumsille M Date: Wed, 15 Oct 2025 13:04:09 +0000 Subject: [PATCH 3/3] Add toggle for "show/hide" annotations --- www/docs/js/main.js | 55 ++++++++++++ www/docs/style/sass/app.scss | 1 + www/docs/style/sass/parts/_annotation.scss | 83 +++++++++++++++++++ .../html/section/_section_content.php | 2 +- .../html/section/_section_footer.php | 12 +++ .../templates/html/section/_section_nav.php | 7 ++ 6 files changed, 159 insertions(+), 1 deletion(-) create mode 100644 www/docs/style/sass/parts/_annotation.scss diff --git a/www/docs/js/main.js b/www/docs/js/main.js index d222beb887..3120783393 100644 --- a/www/docs/js/main.js +++ b/www/docs/js/main.js @@ -782,3 +782,58 @@ function toggleDetails() { $(document).ready(function() { initRegisterToggles(); }); + +// Annotations Toggle +document.addEventListener('DOMContentLoaded', function() { + const commentTeasers = document.querySelectorAll('.js-comment-teaser'); + if (commentTeasers.length > 0) { + document.body.classList.add('js-annotations-enabled'); + } + + // There are two switches, one in the footer and one in the header + const toggles = document.querySelectorAll('.js-annotation-toggle input[type="checkbox"]'); + if (toggles.length === 0) return; + + function updateVisibility(isChecked) { + const isHidden = !isChecked; + commentTeasers.forEach((teaser, index) => { + setTimeout(() => { + if (isHidden) { + teaser.setAttribute('aria-hidden', 'true'); + teaser.classList.add('is-hidden'); + } else { + teaser.removeAttribute('aria-hidden'); + teaser.classList.remove('is-hidden'); + } + }, index * 50); + }); + + const statusElements = document.querySelectorAll('#annotation-status'); + statusElements.forEach(status => { + status.textContent = isHidden + ? 'Annotations are hidden' + : 'Annotations are visible'; + }); + } + + function syncToggles(changedToggle) { + const newState = changedToggle.checked; + toggles.forEach(toggle => { + if (toggle !== changedToggle) { + toggle.checked = newState; + } + }); + updateVisibility(newState); + } + + toggles.forEach(toggle => { + toggle.addEventListener('change', function() { + syncToggles(this); + }); + }); + + toggles.forEach(toggle => { + toggle.checked = true; + }); + updateVisibility(true); +}); \ No newline at end of file diff --git a/www/docs/style/sass/app.scss b/www/docs/style/sass/app.scss index 9897f11fec..d3196496f2 100644 --- a/www/docs/style/sass/app.scss +++ b/www/docs/style/sass/app.scss @@ -308,6 +308,7 @@ form { @import "parts/sidebar_right"; @import "parts/dataframe"; @import "parts/accordion"; +@import "parts/annotation"; @import "parts/table-of-contents"; @import "print"; diff --git a/www/docs/style/sass/parts/_annotation.scss b/www/docs/style/sass/parts/_annotation.scss new file mode 100644 index 0000000000..6ef0cbc8a1 --- /dev/null +++ b/www/docs/style/sass/parts/_annotation.scss @@ -0,0 +1,83 @@ +.js-comment-teaser { + max-height: 1000px; + opacity: 1; + transform: translateY(0); + transition: max-height 0.6s ease, opacity 0.6s ease, transform 0.6s ease, margin 0.6s ease; + overflow: hidden; + + &.is-hidden { + max-height: 0; + opacity: 0; + transform: translateY(-10px); + } +} + +.annotations-toggle-switch { + // Hide when JS is disabled + display: none; +} + +body.js-annotations-enabled { + .annotations-toggle-switch { + display: inline-block; + margin-top: 0.5rem; + label { + display: inline-flex; + align-items: center; + gap: 0.5rem; + margin: 0 1rem 0 1rem; + vertical-align: middle; + cursor: pointer; + } + + input[type="checkbox"] { + position: relative; + appearance: none; + width: 52px; + height: 28px; + background: $primary-color-100; + border-radius: 28px; + transition: background 0.3s ease; + flex-shrink: 0; + margin: 0; + cursor: pointer; + + &::before { + content: ''; + position: absolute; + top: 2px; + left: 2px; + width: 24px; + height: 24px; + background: #fff; + border-radius: 50%; + transition: transform 0.3s ease; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + } + + &:checked { + background: $primary-color; + + &::before { + transform: translateX(24px); + } + } + + &:focus { + outline: none; + box-shadow: 0 0 0 3px $primary-color-300; + } + } + } + + @media (min-width: $large-screen) { + .annotations-toggle-switch { + margin-top: 0; + } + .debate-navigation--footer { + position: sticky; + bottom: 0; + } + } +} + diff --git a/www/includes/easyparliament/templates/html/section/_section_content.php b/www/includes/easyparliament/templates/html/section/_section_content.php index 56d9c90241..a26e9ad3b3 100644 --- a/www/includes/easyparliament/templates/html/section/_section_content.php +++ b/www/includes/easyparliament/templates/html/section/_section_content.php @@ -243,7 +243,7 @@ function ($matches) { } # End of voting HTML if (isset($speech['commentteaser'])) { ?> -
+
diff --git a/www/includes/easyparliament/templates/html/section/_section_footer.php b/www/includes/easyparliament/templates/html/section/_section_footer.php index 62944dc96b..a16562feca 100644 --- a/www/includes/easyparliament/templates/html/section/_section_footer.php +++ b/www/includes/easyparliament/templates/html/section/_section_footer.php @@ -1,6 +1,18 @@