Skip to content

Commit fc11d24

Browse files
yepzdkyepzdk
authored
Merge pull request #553 from itk-dev/feature/early_inclusion_dialogue_svg_icons
Add animated svg comment, reply, thumbs-up
2 parents 69cccfd + 0b2c120 commit fc11d24

22 files changed

Lines changed: 210 additions & 22 deletions

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ Versioning](https://semver.org/spec/v2.0.0.html).
66

77
## [Unreleased]
88

9+
* [PR-553](https://github.com/itk-dev/deltag.aarhus.dk/pull/553)
10+
* Add animated svg icons comment, reply, thumbs-up
11+
912
* [PR-552](https://github.com/itk-dev/deltag.aarhus.dk/pull/552)
1013
* Add styling for dialog proposal categories
1114

‎web/themes/custom/hoeringsportal/assets/css/hoeringsportal.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"module/paragraph-content-promotion", "module/paragraph-files",
1111
"module/paragraph-link", "module/info_box", "module/search",
1212
"module/search-page", "module/newsletter", "module/proposal",
13-
"module/animation", "module/header-v2",
13+
"module/animation", "module/header-v2", "module/animated-svg",
1414
"../../node_modules/slick-carousel/slick/slick";
1515

1616
// 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‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
a:has(svg) {
2+
/* prettier-ignore */
3+
--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);
4+
/* prettier-ignore */
5+
--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);
6+
--path-fill-color: white;
7+
--path-stroke-color: var(--bs-secondary);
8+
--sp2: 4px;
9+
10+
display: flex;
11+
gap: var(--sp2);
12+
text-decoration: none;
13+
14+
svg {
15+
/* Comment */
16+
g.comment {
17+
path {
18+
transform-origin: bottom left;
19+
stroke-width: 1.5px;
20+
transition: stroke 200ms var(--ease-spring-glide);
21+
}
22+
}
23+
24+
/* Reply */
25+
g.reply {
26+
path {
27+
transform-origin: center right;
28+
stroke-width: 1.5px;
29+
transition: stroke 200ms var(--ease-spring-glide);
30+
}
31+
}
32+
33+
/* Thumbs up */
34+
g.thumbs-up {
35+
path {
36+
stroke-width: 1.5px;
37+
stroke: var(--bs-secondary);
38+
}
39+
40+
path:first-of-type {
41+
transform-origin: center left;
42+
transition: fill 200ms var(--ease-spring-glide);
43+
}
44+
}
45+
}
46+
47+
/* Hover on <a> */
48+
&:hover {
49+
/* Comment hover */
50+
g.comment {
51+
path {
52+
animation: pop 400ms var(--ease-spring-lazy);
53+
transition: fill 200ms 300ms var(--ease-spring-lazy);
54+
fill: var(--bs-primary);
55+
stroke: var(--bs-secondary);
56+
}
57+
}
58+
59+
/* Reply hover */
60+
g.reply {
61+
path {
62+
animation: stretchX 400ms var(--ease-spring-lazy);
63+
transition: fill 200ms 300ms var(--ease-spring-lazy);
64+
fill: var(--bs-primary);
65+
stroke: var(--bs-secondary);
66+
}
67+
}
68+
69+
/* Thumbs-up hover */
70+
g.thumbs-up {
71+
path:last-child {
72+
transition: fill 200ms 200ms var(--ease-spring-lazy);
73+
fill: var(--bs-primary);
74+
}
75+
path:first-of-type {
76+
transform: rotate(-3deg);
77+
transition: transform 200ms var(--ease-spring-lazy);
78+
}
79+
}
80+
}
81+
}
82+
83+
/* Click on <a> with thumbs-up svg */
84+
.liked a:has(svg) {
85+
g.thumbs-up {
86+
path:first-of-type {
87+
animation: rotatePop 500ms var(--ease-spring-lazy);
88+
}
89+
path:last-child {
90+
fill: var(--bs-primary);
91+
}
92+
}
93+
}
94+
95+
/* Thumbs-up already set*/
96+
.action-unflag a:has(svg) {
97+
g.thumbs-up {
98+
path:last-child {
99+
fill: var(--bs-primary);
100+
}
101+
}
102+
}

‎web/themes/custom/hoeringsportal/assets/css/module/_animation.scss‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,42 @@
99
width: initial;
1010
}
1111
}
12+
13+
@keyframes rotate {
14+
to {
15+
transform: rotate(-5deg);
16+
}
17+
}
18+
19+
@keyframes pop {
20+
50% {
21+
transform: scale(0.9);
22+
}
23+
75% {
24+
transform: scale(1.1);
25+
}
26+
100% {
27+
transform: scale(1);
28+
}
29+
}
30+
31+
@keyframes rotatePop {
32+
50% {
33+
transform: rotate(10deg) translateX(-1px);
34+
}
35+
75% {
36+
transform: scale(1.2) rotate(-10deg) translateX(-2px);
37+
}
38+
100% {
39+
transform: scale(1);
40+
}
41+
}
42+
43+
@keyframes stretchX {
44+
50% {
45+
transform: scaleX(1.1);
46+
}
47+
100% {
48+
transform: scaleX(1);
49+
}
50+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@
9090

9191
.form-checkboxes {
9292
display: flex;
93+
flex-wrap: wrap;
9394
gap: $spacer;
9495
order: 2;
9596
}

‎web/themes/custom/hoeringsportal/assets/css/module/_header-v2.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
height: auto;
1616
}
1717

18-
1918
.content-wrapper {
2019
padding-top: $spacer * 2;
2120
padding-bottom: $spacer * 2;
@@ -71,7 +70,6 @@
7170
.text-background-match {
7271
color: $color-peach-600;
7372
}
74-
7573
}
7674
}
7775

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
document.addEventListener(
2+
"click",
3+
function (e) {
4+
// Find the closest <a> tag that's inside .flag-wrapper
5+
const link = e.target.closest(".flag-wrapper");
6+
7+
if (link) {
8+
// Find the child div with the flag classes
9+
const flagDiv = link.querySelector(".flag");
10+
11+
// Only add animation if action-unflag does NOT exist
12+
if (flagDiv && !flagDiv.classList.contains("action-unflag")) {
13+
e.preventDefault();
14+
link.classList.add("liked");
15+
16+
// Cleanup class after animation
17+
window.setTimeout(() => {
18+
link.classList.remove("liked");
19+
}, 400);
20+
} else {
21+
e.preventDefault();
22+
}
23+
}
24+
},
25+
true,
26+
);

‎web/themes/custom/hoeringsportal/assets/js/hoeringsportal.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ require("./filter-collapse.js");
1919
require("./icons.js");
2020
require("./modify-dialogue-form.js");
2121
require("./modify-dialogue-proposal-comments.js");
22+
require("./animated-svg.js");
2223

2324
// Enable popovers.
2425
$(function () {

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2+
<g class="comment">
3+
<rect x="0" y="0" width="24" height="24" fill="white" />
4+
<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"/>
5+
</g>
6+
</svg>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2+
<g class="reply">
3+
<rect width="24" height="24" fill="white"/>
4+
<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)"/>
5+
</g>
6+
</svg>

0 commit comments

Comments
 (0)