From 4d65c549967fa0c246693a5bd1c5df80ce4a0968 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 20 Aug 2021 20:40:05 +0200
Subject: [PATCH] [design proposal] adding a mixin to style social issue badge

---
 .../public/module/bootstrap/custom/_debug.scss |  2 +-
 .../module/bootstrap/custom/_variables.scss    |  8 ++++++--
 .../Resources/public/chill/chillperson.scss    |  3 ++-
 .../Resources/public/chill/scss/mixins.scss    | 18 ++++++++++++++++++
 .../public/chill/scss/render_box.scss          |  6 ++++++
 .../components/Banner/SocialIssue.vue          |  8 +++++---
 .../views/AccompanyingPeriod/_list.html.twig   |  2 +-
 .../views/Entity/social_issue.html.twig        |  2 +-
 .../views/Person/list_with_period.html.twig    |  4 ++--
 9 files changed, 42 insertions(+), 11 deletions(-)
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss

diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/custom/_debug.scss b/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/custom/_debug.scss
index 61d66e53d..7ddef310f 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/custom/_debug.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/custom/_debug.scss
@@ -3,7 +3,7 @@ body {
     div.responsive {
         position: fixed;
         top: 0;
-        left: 50%;
+        left: 0;
         background-color: #4a4d50;
         color: white;
         padding: 0.5em;
diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/custom/_variables.scss b/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/custom/_variables.scss
index 04cf765e0..9e8d3031c 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/custom/_variables.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/custom/_variables.scss
@@ -157,8 +157,10 @@ $chill-yellow:       $yellow;
 $chill-red:          $red;
 $chill-beige:        $beige;
 $chill-pink:         $pink;
-$chill-gray:         $gray-600;
 $chill-dark-gray:    $gray-800;
+$chill-gray:         $gray-600;
+$chill-l-gray:       $gray-400;
+$chill-ll-gray:      $gray-300;
 $chill-light-gray:   $gray-200;
 $chill-llight-gray:  $gray-100;
 // scss-docs-end theme-color-variables
@@ -185,8 +187,10 @@ $chill-colors: (
   "chill-red":          $chill-red,
   "chill-beige":        $chill-beige,
   "chill-pink":         $chill-pink,
-  "chill-gray":         $chill-gray,
   "chill-dark-gray":    $chill-dark-gray,
+  "chill-gray":         $chill-gray,
+  "chill-l-gray":       $chill-l-gray,
+  "chill-ll-gray":      $chill-ll-gray,
   "chill-light-gray":   $chill-light-gray,
   "chill-llight-gray":  $chill-llight-gray,
 );
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss
index 9d9f6dfbc..e8d85b6a7 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss
@@ -1,7 +1,8 @@
 // Access to Bootstrap variables and mixins
 @import '~ChillMainAssets/module/bootstrap/shared';
 
-// Override Main generic assets
+// Complete/override Main generic assets
+@import './scss/mixins';
 @import './scss/render_box.scss';
 @import './scss/flex_table.scss';
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss
new file mode 100644
index 000000000..ce52007f3
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss
@@ -0,0 +1,18 @@
+///
+///  Social Issue mixin
+//   define visual badge for all social issues
+///
+
+$social-issue-color: $chill-pink;
+
+@mixin badge_social_issue {
+    text-transform: capitalize !important;
+    font-weight: 500 !important;
+    border-left: 20px groove $social-issue-color;
+    &:before {
+        content: '\f04b';
+        font-family: ForkAwesome;
+        color: $social-issue-color;
+        margin: 0 0.3em 0 -0.7em;
+    }
+}
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss
index 146fc735b..7a2d9b8f2 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss
@@ -1,3 +1,5 @@
+/// variables
+
 /// CHILL ENTITY RENDER BOX
 .chill-entity {
 
@@ -11,6 +13,10 @@
     /// SOCIAL-ISSUE
     &.entity-social-issue {
         margin-right: 0.3em;
+        font-size: 120%;
+        span.badge {
+            @include badge_social_issue;
+        }
     }
 }
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue
index 3f8f3fcc9..d2cfe5da0 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="badge bg-chill-light-gray text-dark">{{ issue.text }}</span>
+  <span class="badge bg-chill-l-gray text-dark">{{ issue.text }}</span>
 </template>
 
 <script>
@@ -10,10 +10,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'ChillMainAssets/module/bootstrap/shared';
+@import 'ChillPersonAssets/chill/scss/mixins';
+
 span.badge {
+   @include badge_social_issue;
    font-size: 95%;
-   text-transform: capitalize !important;
-   font-weight: 500 !important;
    margin-bottom: 5px;
    margin-right: 1em;
 }
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig
index 19f8d9e3b..33e969392 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig
@@ -97,7 +97,7 @@
                                 <div class="wl-col list">
                                     {% for si in accompanying_period.socialIssues %}
                                         <p class="wl-item">
-                                            {{ si.title|localize_translatable_string }}
+                                            {{ si|chill_entity_render_box }}
                                         </p>
                                     {% endfor %}
                                 </div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Entity/social_issue.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Entity/social_issue.html.twig
index 500b2c775..90cb74037 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Entity/social_issue.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Entity/social_issue.html.twig
@@ -1,6 +1,6 @@
 {% set reversed_parents = parents|reverse %}
 <span class="chill-entity entity-social-issue">
-  <span class="badge bg-chill-pink">
+  <span class="badge bg-chill-l-gray text-dark">
     {%- for p in reversed_parents %}
     <span class="parent-{{ loop.revindex0 }}">
       {{ p.title|localize_translatable_string }}{{ options['default.separator'] }}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig
index eb654543f..ce26e5b54 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig
@@ -1,7 +1,7 @@
 {%  macro button_person(person) %}
     <li>
-        <a href="{{ path('chill_person_accompanying_period_list', { 'person_id' : person.id }) }}"
-           class="btn btn-sm btn-outline-primary" title="{{ 'See accompanying periods'|trans }}"><i class="fa fa-random"></i></a>
+        <a href="{{ path('chill_person_accompanying_course_new') }}"
+           class="btn btn-sm btn-create change-icon" title="{{ 'Create an accompanying period'|trans }}"><i class="fa fa-random"></i></a>
     </li>
 {% endmacro %}