Add icons to dialog proposal details page

Author: yepzdk

web/themes/custom/hoeringsportal/assets/css/module/_animated-svg.scss

@@ -1,62 +1,72 @@
-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 <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);
+      }
     }
 
-    &:hover {
+    /* 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 */
-  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);

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-proposal.html.twig

@@ -37,5 +37,5 @@
 {# 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>
+  <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-proposal--full.html.twig

@@ -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-decoration-none 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>