Add animated svg comment, reply, thumbs-up

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
 

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

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 <a> */
+  &: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 <a> 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);
+    }
+  }
+}

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);
+  }
+}

web/themes/custom/hoeringsportal/assets/css/module/_dialogue.scss

@@ -90,6 +90,7 @@
 
     .form-checkboxes {
       display: flex;
+      flex-wrap: wrap;
       gap: $spacer;
       order: 2;
     }

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;
       }
-
     }
   }
 

web/themes/custom/hoeringsportal/assets/js/animated-svg.js

@@ -0,0 +1,26 @@
+document.addEventListener(
+  "click",
+  function (e) {
+    // Find the closest <a> 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,
+);

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 () {

web/themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-comment.svg.html.twig

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g class="comment">
+    <rect x="0" y="0" width="24" height="24" fill="white" />
+    <path fill="var(--path-fill-color, white)" stroke="var(--path-stroke-color, black)" d="M12 4.5C16.1066 4.5 19.5 7.59976 19.5 11.5C19.5 15.4002 16.1066 18.5 12 18.5C10.7354 18.5 9.54299 18.2045 8.49512 17.6865C8.41209 17.726 8.30943 17.7749 8.19239 17.8291C7.8796 17.9741 7.46168 18.1626 7.04884 18.3311C6.64433 18.4961 6.21539 18.6545 5.89063 18.7275C5.75035 18.7591 5.53597 18.799 5.34278 18.7529C5.23386 18.7269 5.04939 18.6522 4.94434 18.4492C4.8423 18.2516 4.88268 18.0606 4.91895 17.958L4.98048 17.8096C5.05266 17.6519 5.15557 17.4695 5.25977 17.2939C5.4062 17.0472 5.58135 16.7726 5.74805 16.5186C5.90153 16.2846 6.04871 16.0644 6.16407 15.8955C5.12702 14.6974 4.50001 13.1692 4.50001 11.5C4.50001 7.59976 7.89341 4.5 12 4.5Z" stroke-linecap="round"/>
+  </g>
+</svg>

web/themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-reply.svg.html.twig

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g class="reply">
+    <rect width="24" height="24" fill="white"/>
+    <path d="M10.8963 11.5041H12.1771H14.5501C17.5163 11.5041 18.1003 13.9994 18.1003 15.3787C18.1003 16.6124 15.2423 20.9059 18.1467 17.1521C20.4733 14.145 19.88 11.6776 18.6936 9.82705C17.7444 8.34661 16.3206 7.97651 15.7273 7.97651H12.7611H10.9814H10.8881C10.612 7.97651 10.3881 7.75265 10.3881 7.47651L10.3881 4.51439C10.3881 4.20399 10.01 4.05169 9.79489 4.27541L5.04894 9.2102C4.63181 9.63429 4.62068 9.85404 5.09527 10.3475L6.91209 12.2366C7.52352 12.8486 8.70211 14.1346 9.51622 15.031C9.82414 15.37 10.3899 15.1525 10.3908 14.6945L10.3964 12.0031C10.3969 11.7273 10.6205 11.5041 10.8963 11.5041Z" fill="var(--path-fill-color, white)" stroke="var(--path-stroke-color, black)"/>
+  </g>
+</svg>

web/themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-thumbs-up.svg.html.twig

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g class="thumbs-up">
+    <rect width="24" height="24" fill="white"/>
+    <path d="M9.98214 6.60246L8.13949 10.2878C8.12891 10.3089 8.12012 10.3299 8.11276 10.3524C7.69709 11.621 7.13255 14.5856 8.1236 16.5677C9.1233 18.5671 10.6228 19.0669 11.2477 19.0669H15.6213C17.1209 19.0669 17.126 18.7919 17.3689 18.4519C17.4665 18.3152 17.652 18.0418 17.7008 17.5049C17.7496 16.9679 18.3256 17.2315 18.6478 16.4115C18.8632 15.8632 18.7643 15.5156 18.6752 15.3455C18.6291 15.2574 18.5664 15.1634 18.6016 15.0705C18.7257 14.7437 19.44 14.4905 19.3702 13.4436C19.3409 13.0043 18.9992 12.8969 18.9406 12.5259C18.8432 11.9087 19.3214 12.0417 19.3214 11.042C19.3214 10.0423 18.5209 9.62639 16.871 9.69473H13.3063C12.9346 9.69473 12.6929 9.30358 12.8591 8.97113L13.1221 8.44511C13.5386 7.61203 13.9968 5.8209 12.4973 5.32105C11.0239 4.82993 10.2341 5.9071 10.0095 6.53752C10.0015 6.5598 9.99272 6.5813 9.98214 6.60246Z" fill="var(--path-fill-color, white)" stroke="var(--path-stroke-color, black)"/>
+    <path d="M6.37356 9.81954C6.92585 9.81954 7.37356 10.2673 7.37356 10.8195V17.9416C7.37356 18.4939 6.92585 18.9416 6.37356 18.9416H5.49954C4.94726 18.9416 4.49954 18.4939 4.49954 17.9416V10.8195C4.49954 10.2673 4.94726 9.81954 5.49954 9.81954H6.37356Z" fill="var(--path-fill-color, white)" stroke="var(--path-stroke-color, black)"/>
+  </g>
+</svg>

web/themes/custom/hoeringsportal/templates/comment/comment.html.twig

@@ -78,7 +78,7 @@
       </div>
       <div class="d-flex mb-2">
         <div class="flag-wrapper me-3">{{ content.flag_support_comment }}</div>
-        <div class="comment-reply"><i class="fa-solid fa-reply me-2"></i><a class="use-ajax" data-dialog-options="{&quot;width&quot;:400}" data-dialog-type="modal" href="{{ path('comment.reply', {'entity_type': 'node', 'entity': comment.entity_id.value[0].target_id, 'field_name': 'field_comments', 'pid': comment.cid.value}) }}">{{ 'Reply'|t({}, {'context' : 'Comment reply  '}) }}</a></div>
+        <div class="comment-reply"><a class="use-ajax text-secondary" data-dialog-options="{&quot;width&quot;:400}" data-dialog-type="modal" href="{{ path('comment.reply', {entity_type: 'node', entity: comment.entity_id.value[0].target_id, field_name: 'field_comments', pid: comment.cid.value}) }}">{{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-reply.svg.html.twig') }}{{ 'Reply'|t({}, {context: 'Comment reply  '}) }}</a></div>
       </div>
     {% endif %}
   </div>

web/themes/custom/hoeringsportal/templates/comment/field--comment.html.twig

@@ -26,7 +26,7 @@
  * @see comment_preprocess_field()
  */
 #}
-<section{{ attributes.addClass('comments') }}>
+<section{{ attributes.addClass('comments') }} id="comments">
   {% if comment_form %}
     <h2{{ content_attributes }}>{{ 'Add new comment'|t }}</h2>
     {{ comment_form }}

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') %}
-<div class="{{classes|join(' ')}}">
-  <a{{ attributes }}><i class="fa-solid fa-thumbs-up me-2"></i>{{ flagcount(flag, flaggable) }} {{ 'like this'|t }}</a>
+<div class="{{ classes|join(' ') }}">
+  <a{{ attributes }}>{{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-thumbs-up.svg.html.twig') }}{{ flagcount(flag, flaggable) }} {{ 'like this'|t }}</a>
 </div>

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') %}
-<div class="{{classes|join(' ')}}">
-  <a{{ attributes }}><i class="fa-solid fa-thumbs-up me-2"></i>{{ flagcount(flag, flaggable) }} {{ 'like this'|t }}</a>
+<div class="{{ classes|join(' ') }}">
+  <a{{ attributes }}>{{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-thumbs-up.svg.html.twig') }}{{ flagcount(flag, flaggable) }} {{ 'like this'|t }}</a>
 </div>

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 #}

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 @@
     <div class="row justify-content-center pt-5">
       <div class="proposal-layout">
         <div class="breadcrumb mb-3">
-          <span class="me-2">{{ 'Early inclusion'|t}}</span>/
+          <span class="me-2">{{ 'Early inclusion'|t }}</span>/
           <span class="mx-2">
-            <a href="{{ path('entity.node.canonical', {'node': node.field_dialogue.entity.id}) }}">{{ node.field_dialogue.entity.label }}</a>
+            <a href="{{ path('entity.node.canonical', {node: node.field_dialogue.entity.id}) }}">{{ node.field_dialogue.entity.label }}</a>
           </span>/
           <span class="mx-2">{{ label }}</span>
         </div>
@@ -24,7 +24,7 @@
                 <span class="flag-wrapper">{{ content.flag_support_proposal }}</span>
               </div>
               <div>
-                <span class="me-2"><i class="me-2 fa-solid fa-comments"></i>{{ node.field_comments.comment_count }}</span><span>{{ 'Comments'|t }}</span>
+                <a href="#comments" class="text-secondary">{{ include('themes/custom/hoeringsportal/templates/animated-svg/icon-deltag-comment.svg.html.twig') }}<span>{{ node.field_comments.comment_count }}</span><span>{{ 'Comments'|t }}</span></a>
               </div>
             </div>
           </div>

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 #}

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 #}

web/themes/custom/hoeringsportal/templates/field/field--field-dialogue-proposal-category.html.twig

@@ -44,7 +44,7 @@
   {% if (items[1]) %}
     <span class="badge rounded-pill">{{ items[1].content }}</span>
   {% endif %}
-  {% if (items|length > 2)  %}
-    <span class="badge rounded-pill">+{{ items|length -2 }}</span>
+  {% if (items|length > 2) %}
+    <span class="badge rounded-pill">+{{ items|length - 2 }}</span>
   {% endif %}
 </div>

web/themes/custom/hoeringsportal/templates/form/form--node-dialogue-proposal-form.html.twig

@@ -24,4 +24,3 @@
     </form>
   </div>
 </div>
-

web/themes/custom/hoeringsportal/templates/views/views-view--dialogue-proposals.html.twig

@@ -50,7 +50,7 @@
 
   <div class="d-flex justify-content-between">
     {{ exposed }}
-    <div><a href="{{ path('node.add', {'node_type': 'dialogue_proposal', 'dialogue': view.args[0]}) }}" class="btn btn-primary btn-sm rounded-2">{{ 'Participate with your proposal'|t }}</a></div>
+    <div><a href="{{ path('node.add', {node_type: 'dialogue_proposal', dialogue: view.args[0]}) }}" class="btn btn-primary btn-sm rounded-2">{{ 'Participate with your proposal'|t }}</a></div>
   </div>
   {{ attachment_before }}