diff --git a/CHANGELOG.md b/CHANGELOG.md index 696861b21..76d291e09 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -98,9 +98,13 @@ This project (not yet) adheres to [Semantic Versioning](https://semver.org/spec/ - Module pages: adapt layout to the new project detail grid styling; remove previous/next module cluster navigation. - Accounts: adjust login/signup button styles +- Logo: updated a+ logo. +- Footer: copyright year updated to 2026. +- Donation banner: same colour on all pages. ### Fixed +- Landing page: statistics tiles now wander automatically; two columns on tablet. - Embedded YouTube videos: set referrer policy to `strict-origin-when-cross-origin` so cross-origin embeds send the site origin. - Project insights: keep counters in sync when contributions are deleted, soft-deleted, or removed by cascade (comments, ratings, poll answers, etc.); exclude archived proposals and hidden live questions. - Dashboard forms: align radio button options with text inputs and select fields. diff --git a/adhocracy-plus/assets/images/adhocracy-short.svg b/adhocracy-plus/assets/images/adhocracy-short.svg index 959b7a519..011ee3eb9 100644 --- a/adhocracy-plus/assets/images/adhocracy-short.svg +++ b/adhocracy-plus/assets/images/adhocracy-short.svg @@ -1,12 +1,12 @@ - - - - - + + + + + - - + + diff --git a/adhocracy-plus/assets/images/logo.png b/adhocracy-plus/assets/images/logo.png index 7fa591fc9..8998ded9a 100644 Binary files a/adhocracy-plus/assets/images/logo.png and b/adhocracy-plus/assets/images/logo.png differ diff --git a/adhocracy-plus/assets/images/logo.svg b/adhocracy-plus/assets/images/logo.svg index ed700a985..0cb201cac 100644 --- a/adhocracy-plus/assets/images/logo.svg +++ b/adhocracy-plus/assets/images/logo.svg @@ -1,16 +1,13 @@ - - - - a+ logo wide - Created with Sketch. - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + diff --git a/adhocracy-plus/assets/scss/components/landing_page_statistics.scss b/adhocracy-plus/assets/scss/components/landing_page_statistics.scss index a44114e65..e3780e329 100644 --- a/adhocracy-plus/assets/scss/components/landing_page_statistics.scss +++ b/adhocracy-plus/assets/scss/components/landing_page_statistics.scss @@ -49,16 +49,9 @@ $lp-blue: blue; margin-top: -20px; // Pull it up under the fade position: relative; z-index: 1; - cursor: pointer; - transition: all 0.3s ease; } } -.lp-statistics__stats-scroller.active { - overflow-y: auto; - cursor: default; -} - .lp-statistics__stats-scroller-column { display: flex; flex-direction: column; @@ -66,6 +59,12 @@ $lp-blue: blue; will-change: transform; } +.lp-statistics__stats-scroller-column__copy { + display: flex; + flex-direction: column; + gap: 2em; +} + .lp-statistics__stat { color: $black; background-color: $lp-green; @@ -218,4 +217,38 @@ $lp-blue: blue; min-height: 300px; margin: 0; } -} \ No newline at end of file +} + +// Tablet/iPad: two columns instead of four +@media ($breakpoint <= width <= 1024px) { + .lp-statistics { + padding-left: 2rem; + padding-right: 2rem; + } + + .desktop-view { + display: grid; + } + + .mobile-view { + display: none; + } + + .lp-statistics__stats-scroller { + width: 90%; + margin: 0 auto; + padding: 1em; + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .lp-statistics__stats-scroller-column[data-direction="down"] { + margin-top: -200px; + } +} + +// Reduced motion: show a single static copy, no duplicated content +@media (prefers-reduced-motion: reduce) { + .lp-statistics__stats-scroller-column__copy[aria-hidden="true"] { + display: none; + } +} diff --git a/adhocracy-plus/templates/500.html b/adhocracy-plus/templates/500.html index e8b66c442..9be301126 100644 --- a/adhocracy-plus/templates/500.html +++ b/adhocracy-plus/templates/500.html @@ -27,25 +27,21 @@ {# djlint:on #} - + viewBox="0 0 212 52" + fill="none" + xmlns="http://www.w3.org/2000/svg"> adhocracy+ - Created with Sketch. - - - - - - - - + + + + + - - - adhocracy+ + + + diff --git a/adhocracy-plus/templates/base.html b/adhocracy-plus/templates/base.html index 48ccb63f1..181b93444 100644 --- a/adhocracy-plus/templates/base.html +++ b/adhocracy-plus/templates/base.html @@ -95,7 +95,7 @@ {% if not ORGANISATION.is_supporting %} {% if settings.a4_candy_cms_settings.ImportantPages.donate_link %}
- + {% blocktranslate with platformname=settings.a4_candy_cms_settings.OrganisationSettings.platform_name %}{{ platformname }} is funded by donations.{% endblocktranslate %}
diff --git a/adhocracy-plus/templates/footer.html b/adhocracy-plus/templates/footer.html index 1e30d66ba..22b444755 100644 --- a/adhocracy-plus/templates/footer.html +++ b/adhocracy-plus/templates/footer.html @@ -6,7 +6,7 @@
- +

@@ -73,7 +73,7 @@

{% translate "Connect" %

-

©2020 {% translate "LIQUID DEMOCRACY" %}

+

©2026 {% translate "LIQUID DEMOCRACY" %}

  • {% translate "Data protection policy" %}
  • {% translate "Terms of use" %}
    • diff --git a/apps/landingpage/templates/statistics.html b/apps/landingpage/templates/statistics.html index b8a8fc161..ae12797aa 100644 --- a/apps/landingpage/templates/statistics.html +++ b/apps/landingpage/templates/statistics.html @@ -6,7 +6,7 @@

    {% trans 'Free Workshop' %}

    {% trans "Whether you're part of a municipality, a parliamentarian engaging with constituents, or an NGO driving change, Adhocracy+ empowers your participation projects. Join our free monthly workshop to explore the platform and learn how to create impactful, community-driven initiatives with ease." %}

@@ -134,92 +134,117 @@

{% trans 'Free Workshop' %}

const scroller = document.getElementById('statsScroller'); const columns = document.querySelectorAll('.lp-statistics__stats-scroller-column'); - columns.forEach(column => { - const direction = column.getAttribute('data-direction'); - if (direction === 'down') { - column.style.transform = 'translateY(-250px)'; - } else if (direction === 'up') { - column.style.transform = 'translateY(50px)'; + // Tablet/desktop only: the desktop view must be visible + if (scroller.clientHeight > 0 && columns.length) { + const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + const isTablet = window.innerWidth <= 1024; + + // Tablet: merge the four columns into two, so all tiles are + // visible in the two-column layout. Otherwise the grid wraps the + // right columns into a second row that stays hidden below the + // visible area. + if (isTablet) { + Array.from(columns[1].children).forEach(item => columns[0].appendChild(item)); + Array.from(columns[3].children).forEach(item => columns[2].appendChild(item)); + columns[1].style.display = 'none'; + columns[3].style.display = 'none'; + columns[2].setAttribute('data-direction', 'up'); } - }); - let isUserScrolling = false; - let lastScrollY = window.scrollY; - - const bounds = { - down: { min: -400, max: 0 }, - up: { min: -100, max: 0 } - }; - - scroller.addEventListener('click', function() { - isUserScrolling = !isUserScrolling; - scroller.classList.toggle('active', isUserScrolling); - - if (isUserScrolling) { - columns.forEach(column => { - column.style.transition = 'transform 0.5s ease-out'; - column.style.transform = 'translateY(0)'; + const loopColumns = isTablet ? [columns[0], columns[2]] : Array.from(columns); + const directions = loopColumns.map(column => column.getAttribute('data-direction')); + + // Slightly staggered arrangement, same as on desktop. + // On tablet the offset comes from the CSS margin-top (-200px). + let staggers = isTablet + ? [0, 0] + : directions.map(direction => direction === 'down' ? -250 : 50); + let copyHeight = 0; + let gap = 0; + let step = 0; + + if (!reduceMotion) { + // The visible window is capped by the CSS max-height + const viewportHeight = parseFloat(getComputedStyle(scroller).maxHeight) || scroller.clientHeight; + + // Duplicate the column content so the auto-scroll can loop seamlessly. + // Duplicates are hidden from screen readers. The extra height also + // covers the staggered offsets, so the visible area never runs empty. + loopColumns.forEach(column => { + const items = Array.from(column.children); + const copy1 = document.createElement('div'); + copy1.className = 'lp-statistics__stats-scroller-column__copy'; + items.forEach(item => copy1.appendChild(item)); + column.appendChild(copy1); + + gap = parseFloat(getComputedStyle(column).gap) || 0; + copyHeight = Math.max(copyHeight, copy1.offsetHeight); }); - - setTimeout(() => { - columns.forEach(column => { - column.style.transition = ''; + + // Tablet: the CSS margin-top of the first column adds 200px + // to the staggered range + const staggerRange = isTablet + ? 200 + : Math.max(...staggers) - Math.min(...staggers); + + // Number of copies needed so the visible area never runs empty + // (viewport + one loop step + staggered offsets). Computed + // arithmetically because the columns stretch to the grid row + // height, which makes scrollHeight unreliable while copies are + // being added. + const needed = viewportHeight + copyHeight + staggerRange + 2 * gap; + let copies = 1; + while (copies * (copyHeight + gap) < needed) { + loopColumns.forEach(column => { + const clone = document.createElement('div'); + clone.className = 'lp-statistics__stats-scroller-column__copy'; + clone.setAttribute('aria-hidden', 'true'); + Array.from(column.children[0].children).forEach(item => clone.appendChild(item.cloneNode(true))); + column.appendChild(clone); }); - }, 500); + copies++; + } + + step = copyHeight + gap; } - }); - - window.addEventListener('scroll', function() { - if (isUserScrolling) return; - - const scrollY = window.scrollY; - const scrollDelta = scrollY - lastScrollY; - const scrollerRect = scroller.getBoundingClientRect(); - - const elementCenter = scrollerRect.top + (scrollerRect.height / 2); - const viewportCenter = window.innerHeight / 2; - const distanceFromCenter = Math.abs(viewportCenter - elementCenter); - const maxDistance = window.innerHeight * 0.6; - - if (distanceFromCenter < maxDistance) { - const centeredness = 1 - (distanceFromCenter / maxDistance); - const baseSpeed = 12; - - columns.forEach(column => { - const direction = column.getAttribute('data-direction'); - const speed = baseSpeed * centeredness; - - const currentTransform = getComputedStyle(column).transform; - let currentY = 0; - - if (currentTransform !== 'none') { - const matrix = new DOMMatrixReadOnly(currentTransform); - currentY = matrix.m42; - } - - let newY = currentY; - if (direction === 'down') { - newY += scrollDelta * speed; - newY = Math.min(newY, bounds.down.max); - newY = Math.max(newY, bounds.down.min); - } else if (direction === 'up') { - newY -= scrollDelta * speed; - newY = Math.max(newY, bounds.up.min); - newY = Math.min(newY, bounds.up.max); + + const yLow = -Math.max(...staggers) - step; + + loopColumns.forEach((column, index) => { + const offset = reduceMotion ? staggers[index] : yLow + staggers[index]; + column.style.transform = `translateY(${offset}px)`; + }); + + // All tiles wander together from top to bottom through the visible area. + // The scroller stays fixed; only the columns move inside it, so tiles + // are never visible outside the visible area. Not pausable and not + // scrollable by the user. + if (!reduceMotion && step > 0) { + const yHigh = yLow + step; + let y = yLow; + let lastTime = performance.now(); + // Fast enough that all tiles pass through the visible area + // within a reasonable time (~17s on tablet, ~8s on desktop) + const speed = 80; // px per second + + function tick(now) { + const dt = Math.min((now - lastTime) / 1000, 0.05); + lastTime = now; + + y += speed * dt; + if (y >= yHigh) { + y -= step; } - - column.style.transition = 'transform 0.1s linear'; - column.style.transform = `translateY(${newY}px)`; - }); - } - - lastScrollY = scrollY; - }); - - document.addEventListener('keydown', function(e) { - if (e.key === 'Enter' && document.activeElement === scroller) { - scroller.click(); + + loopColumns.forEach((column, index) => { + column.style.transform = `translateY(${y + staggers[index]}px)`; + }); + + requestAnimationFrame(tick); + } + + requestAnimationFrame(tick); } - }); + } }); - \ No newline at end of file +