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 diff --git a/web/themes/custom/hoeringsportal/assets/css/hoeringsportal.scss b/web/themes/custom/hoeringsportal/assets/css/hoeringsportal.scss index abc7cf5fb..79fe25e4e 100755 --- a/web/themes/custom/hoeringsportal/assets/css/hoeringsportal.scss +++ b/web/themes/custom/hoeringsportal/assets/css/hoeringsportal.scss @@ -10,7 +10,7 @@ "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/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..03a01b138 --- /dev/null +++ b/web/themes/custom/hoeringsportal/assets/css/module/_animated-svg.scss @@ -0,0 +1,102 @@ +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; + + display: flex; + gap: var(--sp2); + text-decoration: none; + + svg { + /* Comment */ + g.comment { + path { + transform-origin: bottom left; + stroke-width: 1.5px; + 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); + } + } + + /* Thumbs up */ + g.thumbs-up { + path { + stroke-width: 1.5px; + stroke: var(--bs-secondary); + } + + path:first-of-type { + transform-origin: center left; + transition: fill 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); + } + } + + /* Reply hover */ + g.reply { + 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 hover */ + g.thumbs-up { + path:last-child { + transition: fill 200ms 200ms var(--ease-spring-lazy); + fill: var(--bs-primary); + } + path:first-of-type { + 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 0fc9ec220..82dcaa1ca 100644 --- a/web/themes/custom/hoeringsportal/assets/css/module/_animation.scss +++ b/web/themes/custom/hoeringsportal/assets/css/module/_animation.scss @@ -9,3 +9,42 @@ 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 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); + } + 100% { + transform: scaleX(1); + } +} 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; } 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..316cbc9be 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; @@ -71,7 +70,6 @@ .text-background-match { color: $color-peach-600; } - } } 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/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/comment/comment.html.twig b/web/themes/custom/hoeringsportal/templates/comment/comment.html.twig index db974bc07..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 }}
-
{{ '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/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-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 }}
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..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') %} -
- {{ 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--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 3d2ac6565..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 @@ -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 }}
@@ -24,7 +24,7 @@ {{ content.flag_support_proposal }}
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/form/form--node-dialogue-proposal-form.html.twig b/web/themes/custom/hoeringsportal/templates/form/form--node-dialogue-proposal-form.html.twig index 36c8109c3..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 @@ -24,4 +24,3 @@ - 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 }} -
{{ 'Participate with your proposal'|t }}
+
{{ 'Participate with your proposal'|t }}
{{ attachment_before }}