From 34c525e3787bd60196a1129726b461cbb16e23b8 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 26 Nov 2021 20:10:00 +0100
Subject: [PATCH] accourse resume page: social-actions, list of evaluations
 with colored triangle bullet

---
 .../chill/scss/accompanying_period_work.scss  | 22 ++++---------------
 .../Resources/public/chill/scss/badge.scss    |  3 +++
 .../Resources/public/chill/scss/mixins.scss   | 17 ++++++++++++++
 ...st_recent_by_accompanying_period.html.twig |  2 +-
 4 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss
index cc56fcbda..d246b3c92 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss
@@ -87,26 +87,12 @@ div.accompanying_course_work-list {
             &.result_list {
                 padding-left: 1em;
                 margin-bottom: 0;
-                li {
-                    padding-left: 0.3em;
-                    &::marker {
-                        /*
-                        content: '→';
-                        font-weight: bold;
-                        font-size: 120%;
-                        */
-                        font-family: ForkAwesome;
-                        content: '\f04b';
-                        font-size: 75%;
-                        transform: rotate(45deg);
-                    }
-                }
             }
-            &.goal_title li::marker {
-                color: $social-issue-color;
+            &.goal_title {
+                @include list_marker_triangle($social-issue-color);
             }
-            &.result_list li::marker {
-                color: $pink;
+            &.result_list {
+                @include list_marker_triangle($pink);
             }
         }
     }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
index e1515b83d..6ffe0ac9d 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
@@ -81,6 +81,9 @@ h2.badge-title {
             //margin-top: 0.5em;
             font-size: 70%;
             padding-left: 1rem;
+            &.evaluations {
+                @include list_marker_triangle($orange);
+            }
         }
         ul.columns { // XS:1  SM:2  MD:1  LG:2  XL:2  XXL:2
             @include media-breakpoint-only(sm) {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss
index 878ff82e1..8a3d21ece 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss
@@ -37,3 +37,20 @@
         margin: 0 0.3em 0 -1.05em;
     }
 }
+
+///
+/// Make list with items marker like a colored triangle
+///
+
+@mixin list_marker_triangle($color) {
+    & > li {
+        padding-left: 0.3em;
+        &::marker {
+            font-family: ForkAwesome;
+            content: '\f04b';
+            font-size: 75%;
+            transform: rotate(45deg);
+            color: $color;
+        }
+    }
+}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_recent_by_accompanying_period.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_recent_by_accompanying_period.html.twig
index cc2d345b2..cb4620004 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_recent_by_accompanying_period.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_recent_by_accompanying_period.html.twig
@@ -42,7 +42,7 @@
                         {{ w.socialAction.issue|chill_entity_render_box }}
                     </li>
                 </ul>
-                <ul class="small_in_title mb-3">
+                <ul class="small_in_title evaluations mb-3">
                     {% for e in w.accompanyingPeriodWorkEvaluations %}
                         <li>
                             <span class="item-key">{{ 'accompanying_course_work.social_evaluation'|trans ~ ' : ' }}</span>