From 8e3b91346748e6d676b053e38e5704fce9a3ee9b Mon Sep 17 00:00:00 2001 From: Jesper Pedersen Date: Thu, 30 Oct 2025 15:11:23 +0100 Subject: [PATCH 01/11] Add animated svg comment, reply, thumbs-up --- .../assets/css/hoeringsportal.scss | 21 +++--- .../assets/css/module/_animated-svg.scss | 72 +++++++++++++++++++ .../assets/css/module/_animation.scss | 27 +++++++ .../icon-deltag-comment.svg.html.twig | 6 ++ .../icon-deltag-reply.svg.html.twig | 6 ++ .../icon-deltag-thumbs-up.svg.html.twig | 7 ++ ...orm--node-dialogue-proposal-form.html.twig | 9 ++- 7 files changed, 134 insertions(+), 14 deletions(-) create mode 100644 web/themes/custom/hoeringsportal/assets/css/module/_animated-svg.scss create mode 100644 web/themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-comment.svg.html.twig create mode 100644 web/themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-reply.svg.html.twig create mode 100644 web/themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-thumbs-up.svg.html.twig diff --git a/web/themes/custom/hoeringsportal/assets/css/hoeringsportal.scss b/web/themes/custom/hoeringsportal/assets/css/hoeringsportal.scss index abc7cf5fb..32184ac7d 100755 --- a/web/themes/custom/hoeringsportal/assets/css/hoeringsportal.scss +++ b/web/themes/custom/hoeringsportal/assets/css/hoeringsportal.scss @@ -1,16 +1,11 @@ -@import "custom-variables", "bootstrap-custom", "layout/aside", - "layout/page-map", "layout/page-project", "base", "module/nav", "module/hero", - "module/btn", "module/card", "module/footer", "module/content", - "module/drupal", "module/underline", "module/timeline", "module/dialogue", - "module/status-messages", "module/campaign", "module/splash", "module/lead", - "module/line-clamp", "module/page-teaser", - "module/responsive-image-as-background", "module/social-sharing-buttons", - "module/form", "module/image-gallery", "module/spinner", "module/signup", - "module/list", "module/pager", "module/paragraph-background-image", - "module/paragraph-content-promotion", "module/paragraph-files", - "module/paragraph-link", "module/info_box", "module/search", - "module/search-page", "module/newsletter", "module/proposal", - "module/animation", "module/header-v2", +@import "custom-variables", "bootstrap-custom", "layout/aside", "layout/page-map", "layout/page-project", "base", + "module/nav", "module/hero", "module/btn", "module/card", "module/footer", "module/content", "module/drupal", + "module/underline", "module/timeline", "module/dialogue", "module/status-messages", "module/campaign", + "module/splash", "module/lead", "module/line-clamp", "module/page-teaser", "module/responsive-image-as-background", + "module/social-sharing-buttons", "module/form", "module/image-gallery", "module/spinner", "module/signup", + "module/list", "module/pager", "module/paragraph-background-image", "module/paragraph-content-promotion", + "module/paragraph-files", "module/paragraph-link", "module/info_box", "module/search", "module/search-page", + "module/newsletter", "module/proposal", "module/animation", "module/header-v2", "module/animated-svg", "../../node_modules/slick-carousel/slick/slick"; // We have an issue similar to https://www.drupal.org/project/bootstrap_barrio/issues/3228330#comment-14770789 diff --git a/web/themes/custom/hoeringsportal/assets/css/module/_animated-svg.scss b/web/themes/custom/hoeringsportal/assets/css/module/_animated-svg.scss new file mode 100644 index 000000000..bf5a79fdf --- /dev/null +++ b/web/themes/custom/hoeringsportal/assets/css/module/_animated-svg.scss @@ -0,0 +1,72 @@ +svg { + /* prettier-ignore */ + --ease-spring-lazy: linear(0, 0.008 1.1%, 0.034 2.3%, 0.134 4.9%, 0.264 7.3%, 0.683 14.3%, 0.797 16.5%, 0.89 18.6%, 0.967 20.7%, 1.027 22.8%, 1.073 25%, 1.104 27.3%, 1.123 30.6%, 1.119 34.3%, 1.018 49.5%, 0.988 58.6%, 0.985 65.2%, 1 84.5%, 1); + /* prettier-ignore */ + --ease-spring-glide: linear(0, 0.012 0.9%, 0.05 2%, 0.411 9.2%, 0.517 11.8%, 0.611 14.6%, 0.694 17.7%, 0.765 21.1%, 0.824 24.8%, 0.872 28.9%, 0.91 33.4%, 0.939 38.4%, 0.977 50.9%, 0.994 68.4%, 1); + --path-fill-color: white; + --path-stroke-color: var(--bs-secondary); + + cursor: pointer; + + /* Comment */ + g.comment { + path { + transform-origin: bottom left; + stroke-width: 1.5px; + transition: stroke 200ms var(--ease-spring-glide); + } + + &:hover { + path { + animation: pop 400ms var(--ease-spring-lazy); + transition: fill 200ms 300ms var(--ease-spring-lazy); + fill: var(--bs-primary); + stroke: var(--bs-secondary); + } + } + } + + /* Reply */ + g.reply { + path { + transform-origin: center right; + stroke-width: 1.5px; + transition: stroke 200ms var(--ease-spring-glide); + } + + &:hover { + path { + animation: stretchX 400ms var(--ease-spring-lazy); + transition: fill 200ms 300ms var(--ease-spring-lazy); + fill: var(--bs-primary); + stroke: var(--bs-secondary); + } + } + } + + /* Thumbs up */ + g.thumbs-up { + path { + stroke-width: 1.5px; + stroke: var(--bs-secondary); + } + + path:first-of-type { + transform-origin: center left; + transition: stroke 200ms var(--ease-spring-glide); + } + + &:hover { + path:last-child { + transition: fill 200ms 300ms var(--ease-spring-lazy); + fill: var(--bs-primary); + } + + path:first-of-type { + animation: + pop 400ms var(--ease-spring-lazy), + rotate 200ms var(--ease-spring-lazy); + } + } + } +} diff --git a/web/themes/custom/hoeringsportal/assets/css/module/_animation.scss b/web/themes/custom/hoeringsportal/assets/css/module/_animation.scss index 0fc9ec220..033874541 100644 --- a/web/themes/custom/hoeringsportal/assets/css/module/_animation.scss +++ b/web/themes/custom/hoeringsportal/assets/css/module/_animation.scss @@ -9,3 +9,30 @@ width: initial; } } + +@keyframes rotate { + to { + transform: rotate(-5deg); + } +} + +@keyframes pop { + 50% { + transform: scale(0.9); + } + 75% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } +} + +@keyframes stretchX { + 50% { + transform: scaleX(1.2); + } + 100% { + transform: scaleX(1); + } +} diff --git a/web/themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-comment.svg.html.twig b/web/themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-comment.svg.html.twig new file mode 100644 index 000000000..ce2b3bee3 --- /dev/null +++ b/web/themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-comment.svg.html.twig @@ -0,0 +1,6 @@ + + + + + + diff --git a/web/themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-reply.svg.html.twig b/web/themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-reply.svg.html.twig new file mode 100644 index 000000000..566e290d7 --- /dev/null +++ b/web/themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-reply.svg.html.twig @@ -0,0 +1,6 @@ + + + + + + diff --git a/web/themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-thumbs-up.svg.html.twig b/web/themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-thumbs-up.svg.html.twig new file mode 100644 index 000000000..d6735f137 --- /dev/null +++ b/web/themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-thumbs-up.svg.html.twig @@ -0,0 +1,7 @@ + + + + + + + diff --git a/web/themes/custom/hoeringsportal/templates/form/form--node-dialogue-proposal-form.html.twig b/web/themes/custom/hoeringsportal/templates/form/form--node-dialogue-proposal-form.html.twig index 36c8109c3..4b284435c 100644 --- a/web/themes/custom/hoeringsportal/templates/form/form--node-dialogue-proposal-form.html.twig +++ b/web/themes/custom/hoeringsportal/templates/form/form--node-dialogue-proposal-form.html.twig @@ -13,6 +13,14 @@
+

Create dialog proposal

+

Create dialog proposal

+

Create dialog proposal

+

Create dialog proposal

+ {% include 'themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-comment.svg.html.twig' %} + {% include 'themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-reply.svg.html.twig' %} + {% include 'themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-thumbs-up.svg.html.twig' %} +

{{ 'Create dialog proposal'|t }}

@@ -24,4 +32,3 @@

- From 66862cbeacf1288e974c5ca05c8764ccbb96504d Mon Sep 17 00:00:00 2001 From: Jesper Pedersen Date: Fri, 31 Oct 2025 07:47:06 +0100 Subject: [PATCH 02/11] Update _animation.scss --- .../custom/hoeringsportal/assets/css/module/_animation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/themes/custom/hoeringsportal/assets/css/module/_animation.scss b/web/themes/custom/hoeringsportal/assets/css/module/_animation.scss index 033874541..e5ee399f5 100644 --- a/web/themes/custom/hoeringsportal/assets/css/module/_animation.scss +++ b/web/themes/custom/hoeringsportal/assets/css/module/_animation.scss @@ -30,7 +30,7 @@ @keyframes stretchX { 50% { - transform: scaleX(1.2); + transform: scaleX(1.1); } 100% { transform: scaleX(1); From ed524e9881f991d73644412ce6cd6e2bbf24617f Mon Sep 17 00:00:00 2001 From: Jesper Pedersen Date: Fri, 31 Oct 2025 08:11:32 +0100 Subject: [PATCH 03/11] Cleanup test content --- .../form/form--node-dialogue-proposal-form.html.twig | 8 -------- 1 file changed, 8 deletions(-) diff --git a/web/themes/custom/hoeringsportal/templates/form/form--node-dialogue-proposal-form.html.twig b/web/themes/custom/hoeringsportal/templates/form/form--node-dialogue-proposal-form.html.twig index 4b284435c..77851457e 100644 --- a/web/themes/custom/hoeringsportal/templates/form/form--node-dialogue-proposal-form.html.twig +++ b/web/themes/custom/hoeringsportal/templates/form/form--node-dialogue-proposal-form.html.twig @@ -13,14 +13,6 @@
-

Create dialog proposal

-

Create dialog proposal

-

Create dialog proposal

-

Create dialog proposal

- {% include 'themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-comment.svg.html.twig' %} - {% include 'themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-reply.svg.html.twig' %} - {% include 'themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-thumbs-up.svg.html.twig' %} -

{{ 'Create dialog proposal'|t }}

From e6964bf1b217f350b2f5478465dd44223197462d Mon Sep 17 00:00:00 2001 From: Jesper Pedersen Date: Fri, 31 Oct 2025 08:13:08 +0100 Subject: [PATCH 04/11] Update CHANGELOG.md --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 602b3bcf1..cc58f451e 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,9 @@ Versioning](https://semver.org/spec/v2.0.0.html). ## [Unreleased] +* [PR-553](https://github.com/itk-dev/deltag.aarhus.dk/pull/553) + * Add animated svg icons comment, reply, thumbs-up + * [PR-552](https://github.com/itk-dev/deltag.aarhus.dk/pull/552) * Add styling for dialog proposal categories From c932f445e77f1a3687a9a1eea6c5b94e6735617f Mon Sep 17 00:00:00 2001 From: Jesper Pedersen Date: Fri, 31 Oct 2025 11:01:09 +0100 Subject: [PATCH 05/11] Add icons to dialog proposal details page --- .../assets/css/module/_animated-svg.scss | 76 +++++++++++-------- .../comment/field--comment.html.twig | 2 +- .../content/flag--support-proposal.html.twig | 2 +- .../node--dialogue-proposal--full.html.twig | 2 +- 4 files changed, 46 insertions(+), 36 deletions(-) diff --git a/web/themes/custom/hoeringsportal/assets/css/module/_animated-svg.scss b/web/themes/custom/hoeringsportal/assets/css/module/_animated-svg.scss index bf5a79fdf..2054c7f79 100644 --- a/web/themes/custom/hoeringsportal/assets/css/module/_animated-svg.scss +++ b/web/themes/custom/hoeringsportal/assets/css/module/_animated-svg.scss @@ -1,40 +1,62 @@ -svg { +a:has(svg) { /* prettier-ignore */ --ease-spring-lazy: linear(0, 0.008 1.1%, 0.034 2.3%, 0.134 4.9%, 0.264 7.3%, 0.683 14.3%, 0.797 16.5%, 0.89 18.6%, 0.967 20.7%, 1.027 22.8%, 1.073 25%, 1.104 27.3%, 1.123 30.6%, 1.119 34.3%, 1.018 49.5%, 0.988 58.6%, 0.985 65.2%, 1 84.5%, 1); /* prettier-ignore */ --ease-spring-glide: linear(0, 0.012 0.9%, 0.05 2%, 0.411 9.2%, 0.517 11.8%, 0.611 14.6%, 0.694 17.7%, 0.765 21.1%, 0.824 24.8%, 0.872 28.9%, 0.91 33.4%, 0.939 38.4%, 0.977 50.9%, 0.994 68.4%, 1); --path-fill-color: white; --path-stroke-color: var(--bs-secondary); + --sp2: 4px; - cursor: pointer; + display: flex; + gap: var(--sp2); - /* Comment */ - g.comment { - path { - transform-origin: bottom left; - stroke-width: 1.5px; - transition: stroke 200ms var(--ease-spring-glide); + svg { + /* Comment */ + g.comment { + path { + transform-origin: bottom left; + stroke-width: 1.5px; + transition: stroke 200ms var(--ease-spring-glide); + } } - &:hover { + /* Reply */ + g.reply { path { - animation: pop 400ms var(--ease-spring-lazy); - transition: fill 200ms 300ms var(--ease-spring-lazy); - fill: var(--bs-primary); + transform-origin: center right; + stroke-width: 1.5px; + transition: stroke 200ms var(--ease-spring-glide); + } + } + + /* Thumbs up */ + g.thumbs-up { + path { + stroke-width: 1.5px; stroke: var(--bs-secondary); } + + path:first-of-type { + transform-origin: center left; + transition: stroke 200ms var(--ease-spring-glide); + } } } - /* Reply */ - g.reply { - path { - transform-origin: center right; - stroke-width: 1.5px; - transition: stroke 200ms var(--ease-spring-glide); + /* Hover on */ + &:hover { + /* Comment hover */ + g.comment { + path { + animation: pop 400ms var(--ease-spring-lazy); + transition: fill 200ms 300ms var(--ease-spring-lazy); + fill: var(--bs-primary); + stroke: var(--bs-secondary); + } } - &:hover { + /* Reply hover */ + g.reply { path { animation: stretchX 400ms var(--ease-spring-lazy); transition: fill 200ms 300ms var(--ease-spring-lazy); @@ -42,21 +64,9 @@ svg { stroke: var(--bs-secondary); } } - } - - /* Thumbs up */ - g.thumbs-up { - path { - stroke-width: 1.5px; - stroke: var(--bs-secondary); - } - - path:first-of-type { - transform-origin: center left; - transition: stroke 200ms var(--ease-spring-glide); - } - &:hover { + /* Thumbs-up hover */ + g.thumbs-up { path:last-child { transition: fill 200ms 300ms var(--ease-spring-lazy); fill: var(--bs-primary); diff --git a/web/themes/custom/hoeringsportal/templates/comment/field--comment.html.twig b/web/themes/custom/hoeringsportal/templates/comment/field--comment.html.twig index a5170cb87..571f45410 100644 --- a/web/themes/custom/hoeringsportal/templates/comment/field--comment.html.twig +++ b/web/themes/custom/hoeringsportal/templates/comment/field--comment.html.twig @@ -26,7 +26,7 @@ * @see comment_preprocess_field() */ #} - + {% if comment_form %} {{ 'Add new comment'|t }} {{ comment_form }} diff --git a/web/themes/custom/hoeringsportal/templates/content/flag--support-proposal.html.twig b/web/themes/custom/hoeringsportal/templates/content/flag--support-proposal.html.twig index cc182bc8a..86d263cb8 100644 --- a/web/themes/custom/hoeringsportal/templates/content/flag--support-proposal.html.twig +++ b/web/themes/custom/hoeringsportal/templates/content/flag--support-proposal.html.twig @@ -37,5 +37,5 @@ {# Set nofollow to prevent search bots from crawling anonymous flag links #} {% set attributes = attributes.setAttribute('rel', 'nofollow') %}

- {{ flagcount(flag, flaggable) }} {{ 'like this'|t }} + {{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-thumbs-up.svg.html.twig') }}{{ flagcount(flag, flaggable) }} {{ 'like this'|t }}
diff --git a/web/themes/custom/hoeringsportal/templates/content/node--dialogue-proposal--full.html.twig b/web/themes/custom/hoeringsportal/templates/content/node--dialogue-proposal--full.html.twig index 3d2ac6565..7f15eec72 100755 --- a/web/themes/custom/hoeringsportal/templates/content/node--dialogue-proposal--full.html.twig +++ b/web/themes/custom/hoeringsportal/templates/content/node--dialogue-proposal--full.html.twig @@ -24,7 +24,7 @@ {{ content.flag_support_proposal }}
- {{ node.field_comments.comment_count }}{{ 'Comments'|t }} + {{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-comment.svg.html.twig') }}{{ node.field_comments.comment_count }}{{ 'Comments'|t }}
From 2913d38fc1e7d022c605131bd74d027b9f99865a Mon Sep 17 00:00:00 2001 From: Jesper Pedersen Date: Fri, 31 Oct 2025 11:17:27 +0100 Subject: [PATCH 06/11] Add new svg icons --- .../hoeringsportal/templates/comment/comment.html.twig | 2 +- .../templates/content/flag--support-comment.html.twig | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/web/themes/custom/hoeringsportal/templates/comment/comment.html.twig b/web/themes/custom/hoeringsportal/templates/comment/comment.html.twig index db974bc07..78a4d0995 100644 --- a/web/themes/custom/hoeringsportal/templates/comment/comment.html.twig +++ b/web/themes/custom/hoeringsportal/templates/comment/comment.html.twig @@ -78,7 +78,7 @@
{{ content.flag_support_comment }}
-
{{ 'Reply'|t({}, {'context' : 'Comment reply '}) }}
+
{{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-reply.svg.html.twig') }}{{ 'Reply'|t({}, {context: 'Comment reply '}) }}
{% endif %} diff --git a/web/themes/custom/hoeringsportal/templates/content/flag--support-comment.html.twig b/web/themes/custom/hoeringsportal/templates/content/flag--support-comment.html.twig index cc182bc8a..b1b9084f2 100644 --- a/web/themes/custom/hoeringsportal/templates/content/flag--support-comment.html.twig +++ b/web/themes/custom/hoeringsportal/templates/content/flag--support-comment.html.twig @@ -14,7 +14,7 @@ * - flaggable: The flaggable entity. */ #} -{# Attach the flag CSS library.#} +{# Attach the flag CSS library. #} {{ attach_library('flag/flag.link') }} {# Depending on the flag action, set the appropriate action class. #} @@ -36,6 +36,6 @@ {# Set nofollow to prevent search bots from crawling anonymous flag links #} {% set attributes = attributes.setAttribute('rel', 'nofollow') %} -
- {{ flagcount(flag, flaggable) }} {{ 'like this'|t }} +
+ {{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-thumbs-up.svg.html.twig') }}{{ flagcount(flag, flaggable) }} {{ 'like this'|t }}
From 91cd9224f460720cb2017858b458cb61e069b6d1 Mon Sep 17 00:00:00 2001 From: Jesper Pedersen Date: Fri, 31 Oct 2025 11:17:45 +0100 Subject: [PATCH 07/11] Apply twig coding standards --- .../templates/content/flag--support-proposal.html.twig | 4 ++-- .../templates/content/node--dialogue--full.html.twig | 2 +- .../content/node--dialogue-proposal--full.html.twig | 6 +++--- .../templates/content/node--landing-page.html.twig | 2 +- .../content/node--project-main-page--full.html.twig | 2 +- .../field/field--field-dialogue-proposal-category.html.twig | 4 ++-- .../views/views-view--dialogue-proposals.html.twig | 2 +- 7 files changed, 11 insertions(+), 11 deletions(-) diff --git a/web/themes/custom/hoeringsportal/templates/content/flag--support-proposal.html.twig b/web/themes/custom/hoeringsportal/templates/content/flag--support-proposal.html.twig index 86d263cb8..b1b9084f2 100644 --- a/web/themes/custom/hoeringsportal/templates/content/flag--support-proposal.html.twig +++ b/web/themes/custom/hoeringsportal/templates/content/flag--support-proposal.html.twig @@ -14,7 +14,7 @@ * - flaggable: The flaggable entity. */ #} -{# Attach the flag CSS library.#} +{# Attach the flag CSS library. #} {{ attach_library('flag/flag.link') }} {# Depending on the flag action, set the appropriate action class. #} @@ -36,6 +36,6 @@ {# Set nofollow to prevent search bots from crawling anonymous flag links #} {% set attributes = attributes.setAttribute('rel', 'nofollow') %} -
+
{{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-thumbs-up.svg.html.twig') }}{{ flagcount(flag, flaggable) }} {{ 'like this'|t }}
diff --git a/web/themes/custom/hoeringsportal/templates/content/node--dialogue--full.html.twig b/web/themes/custom/hoeringsportal/templates/content/node--dialogue--full.html.twig index 2e65055a8..4c68de1dd 100755 --- a/web/themes/custom/hoeringsportal/templates/content/node--dialogue--full.html.twig +++ b/web/themes/custom/hoeringsportal/templates/content/node--dialogue--full.html.twig @@ -1,4 +1,4 @@ -{% extends "@hoeringsportal/node/_node--1-col-large-image-top.html.twig" %} +{% extends '@hoeringsportal/node/_node--1-col-large-image-top.html.twig' %} {% block content_top %} {# Header #} diff --git a/web/themes/custom/hoeringsportal/templates/content/node--dialogue-proposal--full.html.twig b/web/themes/custom/hoeringsportal/templates/content/node--dialogue-proposal--full.html.twig index 7f15eec72..129c56309 100755 --- a/web/themes/custom/hoeringsportal/templates/content/node--dialogue-proposal--full.html.twig +++ b/web/themes/custom/hoeringsportal/templates/content/node--dialogue-proposal--full.html.twig @@ -1,4 +1,4 @@ -{% extends "@hoeringsportal/node/_node--1-col-large-image-top.html.twig" %} +{% extends '@hoeringsportal/node/_node--1-col-large-image-top.html.twig' %} {% block content_top %} @@ -10,9 +10,9 @@
- {{ 'Early inclusion'|t}}/ + {{ 'Early inclusion'|t }}/ - {{ node.field_dialogue.entity.label }} + {{ node.field_dialogue.entity.label }} / {{ label }}
diff --git a/web/themes/custom/hoeringsportal/templates/content/node--landing-page.html.twig b/web/themes/custom/hoeringsportal/templates/content/node--landing-page.html.twig index e42eac029..33d077668 100644 --- a/web/themes/custom/hoeringsportal/templates/content/node--landing-page.html.twig +++ b/web/themes/custom/hoeringsportal/templates/content/node--landing-page.html.twig @@ -1,4 +1,4 @@ -{% extends "@hoeringsportal/node/_node--1-col-large-image-top.html.twig" %} +{% extends '@hoeringsportal/node/_node--1-col-large-image-top.html.twig' %} {% block content_top %} {# Header #} diff --git a/web/themes/custom/hoeringsportal/templates/content/node--project-main-page--full.html.twig b/web/themes/custom/hoeringsportal/templates/content/node--project-main-page--full.html.twig index 91f4c318d..57b1adb10 100755 --- a/web/themes/custom/hoeringsportal/templates/content/node--project-main-page--full.html.twig +++ b/web/themes/custom/hoeringsportal/templates/content/node--project-main-page--full.html.twig @@ -1,4 +1,4 @@ -{% extends "@hoeringsportal/node/_node--1-col-large-image-top.html.twig" %} +{% extends '@hoeringsportal/node/_node--1-col-large-image-top.html.twig' %} {% block content_top %} {# Header #} diff --git a/web/themes/custom/hoeringsportal/templates/field/field--field-dialogue-proposal-category.html.twig b/web/themes/custom/hoeringsportal/templates/field/field--field-dialogue-proposal-category.html.twig index 694414a52..35954b156 100644 --- a/web/themes/custom/hoeringsportal/templates/field/field--field-dialogue-proposal-category.html.twig +++ b/web/themes/custom/hoeringsportal/templates/field/field--field-dialogue-proposal-category.html.twig @@ -44,7 +44,7 @@ {% if (items[1]) %} {{ items[1].content }} {% endif %} - {% if (items|length > 2) %} - +{{ items|length -2 }} + {% if (items|length > 2) %} + +{{ items|length - 2 }} {% endif %}
diff --git a/web/themes/custom/hoeringsportal/templates/views/views-view--dialogue-proposals.html.twig b/web/themes/custom/hoeringsportal/templates/views/views-view--dialogue-proposals.html.twig index 0f65e436d..c0a623ab0 100755 --- a/web/themes/custom/hoeringsportal/templates/views/views-view--dialogue-proposals.html.twig +++ b/web/themes/custom/hoeringsportal/templates/views/views-view--dialogue-proposals.html.twig @@ -50,7 +50,7 @@
{{ exposed }} - +
{{ attachment_before }} From 9ce38ab212d92b388d807b2d9a2be90321bfb7c4 Mon Sep 17 00:00:00 2001 From: Jesper Pedersen Date: Fri, 31 Oct 2025 11:18:39 +0100 Subject: [PATCH 08/11] Apply coding styles --- .../assets/css/hoeringsportal.scss | 21 ++++++++++++------- .../assets/css/module/_header-v2.scss | 1 - 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/web/themes/custom/hoeringsportal/assets/css/hoeringsportal.scss b/web/themes/custom/hoeringsportal/assets/css/hoeringsportal.scss index 32184ac7d..79fe25e4e 100755 --- a/web/themes/custom/hoeringsportal/assets/css/hoeringsportal.scss +++ b/web/themes/custom/hoeringsportal/assets/css/hoeringsportal.scss @@ -1,11 +1,16 @@ -@import "custom-variables", "bootstrap-custom", "layout/aside", "layout/page-map", "layout/page-project", "base", - "module/nav", "module/hero", "module/btn", "module/card", "module/footer", "module/content", "module/drupal", - "module/underline", "module/timeline", "module/dialogue", "module/status-messages", "module/campaign", - "module/splash", "module/lead", "module/line-clamp", "module/page-teaser", "module/responsive-image-as-background", - "module/social-sharing-buttons", "module/form", "module/image-gallery", "module/spinner", "module/signup", - "module/list", "module/pager", "module/paragraph-background-image", "module/paragraph-content-promotion", - "module/paragraph-files", "module/paragraph-link", "module/info_box", "module/search", "module/search-page", - "module/newsletter", "module/proposal", "module/animation", "module/header-v2", "module/animated-svg", +@import "custom-variables", "bootstrap-custom", "layout/aside", + "layout/page-map", "layout/page-project", "base", "module/nav", "module/hero", + "module/btn", "module/card", "module/footer", "module/content", + "module/drupal", "module/underline", "module/timeline", "module/dialogue", + "module/status-messages", "module/campaign", "module/splash", "module/lead", + "module/line-clamp", "module/page-teaser", + "module/responsive-image-as-background", "module/social-sharing-buttons", + "module/form", "module/image-gallery", "module/spinner", "module/signup", + "module/list", "module/pager", "module/paragraph-background-image", + "module/paragraph-content-promotion", "module/paragraph-files", + "module/paragraph-link", "module/info_box", "module/search", + "module/search-page", "module/newsletter", "module/proposal", + "module/animation", "module/header-v2", "module/animated-svg", "../../node_modules/slick-carousel/slick/slick"; // We have an issue similar to https://www.drupal.org/project/bootstrap_barrio/issues/3228330#comment-14770789 diff --git a/web/themes/custom/hoeringsportal/assets/css/module/_header-v2.scss b/web/themes/custom/hoeringsportal/assets/css/module/_header-v2.scss index e73ceed8a..0bde95c38 100644 --- a/web/themes/custom/hoeringsportal/assets/css/module/_header-v2.scss +++ b/web/themes/custom/hoeringsportal/assets/css/module/_header-v2.scss @@ -15,7 +15,6 @@ height: auto; } - .content-wrapper { padding-top: $spacer * 2; padding-bottom: $spacer * 2; From f4612295e7e29b39389f03fa3b6b44be88b10f6d Mon Sep 17 00:00:00 2001 From: Jesper Pedersen Date: Mon, 3 Nov 2025 14:55:06 +0100 Subject: [PATCH 09/11] Fix: Wrap dialog proposal categories. --- .../custom/hoeringsportal/assets/css/module/_dialogue.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/web/themes/custom/hoeringsportal/assets/css/module/_dialogue.scss b/web/themes/custom/hoeringsportal/assets/css/module/_dialogue.scss index bdf97e7d0..0da7a8eb1 100644 --- a/web/themes/custom/hoeringsportal/assets/css/module/_dialogue.scss +++ b/web/themes/custom/hoeringsportal/assets/css/module/_dialogue.scss @@ -90,6 +90,7 @@ .form-checkboxes { display: flex; + flex-wrap: wrap; gap: $spacer; order: 2; } From 67bb64941865e92242fb0e36597db2fe5222ca3a Mon Sep 17 00:00:00 2001 From: Jesper Pedersen Date: Mon, 3 Nov 2025 14:55:49 +0100 Subject: [PATCH 10/11] Handle animation on thumbs-up when clicked --- .../assets/css/module/_animated-svg.scss | 32 +++++++++++++++---- .../assets/css/module/_animation.scss | 12 +++++++ .../hoeringsportal/assets/js/animated-svg.js | 26 +++++++++++++++ .../assets/js/hoeringsportal.js | 1 + .../templates/comment/comment.html.twig | 2 +- .../node--dialogue-proposal--full.html.twig | 2 +- 6 files changed, 67 insertions(+), 8 deletions(-) create mode 100644 web/themes/custom/hoeringsportal/assets/js/animated-svg.js diff --git a/web/themes/custom/hoeringsportal/assets/css/module/_animated-svg.scss b/web/themes/custom/hoeringsportal/assets/css/module/_animated-svg.scss index 2054c7f79..03a01b138 100644 --- a/web/themes/custom/hoeringsportal/assets/css/module/_animated-svg.scss +++ b/web/themes/custom/hoeringsportal/assets/css/module/_animated-svg.scss @@ -9,6 +9,7 @@ a:has(svg) { display: flex; gap: var(--sp2); + text-decoration: none; svg { /* Comment */ @@ -38,7 +39,7 @@ a:has(svg) { path:first-of-type { transform-origin: center left; - transition: stroke 200ms var(--ease-spring-glide); + transition: fill 200ms var(--ease-spring-glide); } } } @@ -68,15 +69,34 @@ a:has(svg) { /* Thumbs-up hover */ g.thumbs-up { path:last-child { - transition: fill 200ms 300ms var(--ease-spring-lazy); + transition: fill 200ms 200ms var(--ease-spring-lazy); fill: var(--bs-primary); } - path:first-of-type { - animation: - pop 400ms var(--ease-spring-lazy), - rotate 200ms var(--ease-spring-lazy); + transform: rotate(-3deg); + transition: transform 200ms var(--ease-spring-lazy); } } } } + +/* Click on with thumbs-up svg */ +.liked a:has(svg) { + g.thumbs-up { + path:first-of-type { + animation: rotatePop 500ms var(--ease-spring-lazy); + } + path:last-child { + fill: var(--bs-primary); + } + } +} + +/* Thumbs-up already set*/ +.action-unflag a:has(svg) { + g.thumbs-up { + path:last-child { + fill: var(--bs-primary); + } + } +} diff --git a/web/themes/custom/hoeringsportal/assets/css/module/_animation.scss b/web/themes/custom/hoeringsportal/assets/css/module/_animation.scss index e5ee399f5..82dcaa1ca 100644 --- a/web/themes/custom/hoeringsportal/assets/css/module/_animation.scss +++ b/web/themes/custom/hoeringsportal/assets/css/module/_animation.scss @@ -28,6 +28,18 @@ } } +@keyframes rotatePop { + 50% { + transform: rotate(10deg) translateX(-1px); + } + 75% { + transform: scale(1.2) rotate(-10deg) translateX(-2px); + } + 100% { + transform: scale(1); + } +} + @keyframes stretchX { 50% { transform: scaleX(1.1); diff --git a/web/themes/custom/hoeringsportal/assets/js/animated-svg.js b/web/themes/custom/hoeringsportal/assets/js/animated-svg.js new file mode 100644 index 000000000..ec06784bb --- /dev/null +++ b/web/themes/custom/hoeringsportal/assets/js/animated-svg.js @@ -0,0 +1,26 @@ +document.addEventListener( + "click", + function (e) { + // Find the closest tag that's inside .flag-wrapper + const link = e.target.closest(".flag-wrapper"); + + if (link) { + // Find the child div with the flag classes + const flagDiv = link.querySelector(".flag"); + + // Only add animation if action-unflag does NOT exist + if (flagDiv && !flagDiv.classList.contains("action-unflag")) { + e.preventDefault(); + link.classList.add("liked"); + + // Cleanup class after animation + window.setTimeout(() => { + link.classList.remove("liked"); + }, 400); + } else { + e.preventDefault(); + } + } + }, + true, +); diff --git a/web/themes/custom/hoeringsportal/assets/js/hoeringsportal.js b/web/themes/custom/hoeringsportal/assets/js/hoeringsportal.js index f9de22cef..341ace62d 100755 --- a/web/themes/custom/hoeringsportal/assets/js/hoeringsportal.js +++ b/web/themes/custom/hoeringsportal/assets/js/hoeringsportal.js @@ -19,6 +19,7 @@ require("./filter-collapse.js"); require("./icons.js"); require("./modify-dialogue-form.js"); require("./modify-dialogue-proposal-comments.js"); +require("./animated-svg.js"); // Enable popovers. $(function () { diff --git a/web/themes/custom/hoeringsportal/templates/comment/comment.html.twig b/web/themes/custom/hoeringsportal/templates/comment/comment.html.twig index 78a4d0995..3b2fe1af4 100644 --- a/web/themes/custom/hoeringsportal/templates/comment/comment.html.twig +++ b/web/themes/custom/hoeringsportal/templates/comment/comment.html.twig @@ -78,7 +78,7 @@
{{ content.flag_support_comment }}
-
{{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-reply.svg.html.twig') }}{{ 'Reply'|t({}, {context: 'Comment reply '}) }}
+
{{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-reply.svg.html.twig') }}{{ 'Reply'|t({}, {context: 'Comment reply '}) }}
{% endif %}
diff --git a/web/themes/custom/hoeringsportal/templates/content/node--dialogue-proposal--full.html.twig b/web/themes/custom/hoeringsportal/templates/content/node--dialogue-proposal--full.html.twig index 129c56309..173494526 100755 --- a/web/themes/custom/hoeringsportal/templates/content/node--dialogue-proposal--full.html.twig +++ b/web/themes/custom/hoeringsportal/templates/content/node--dialogue-proposal--full.html.twig @@ -24,7 +24,7 @@ {{ content.flag_support_proposal }}
- {{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-comment.svg.html.twig') }}{{ node.field_comments.comment_count }}{{ 'Comments'|t }} + {{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-comment.svg.html.twig') }}{{ node.field_comments.comment_count }}{{ 'Comments'|t }}
From 0b2c120c0d6939fe55f28a5f97220760e04013fa Mon Sep 17 00:00:00 2001 From: Jesper Pedersen Date: Mon, 3 Nov 2025 14:59:01 +0100 Subject: [PATCH 11/11] Apply styles coding standards --- .../custom/hoeringsportal/assets/css/module/_header-v2.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/web/themes/custom/hoeringsportal/assets/css/module/_header-v2.scss b/web/themes/custom/hoeringsportal/assets/css/module/_header-v2.scss index 0bde95c38..316cbc9be 100644 --- a/web/themes/custom/hoeringsportal/assets/css/module/_header-v2.scss +++ b/web/themes/custom/hoeringsportal/assets/css/module/_header-v2.scss @@ -70,7 +70,6 @@ .text-background-match { color: $color-peach-600; } - } }