From 800ab896bc8e2b4d54db52de9a933cd43f03187c Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 8 Oct 2021 17:15:58 +0200
Subject: [PATCH] Activity, improve badge-title. Fix too long badges line break
 in a narrow inline wrapper.

---
 .../Resources/public/chill/chillactivity.scss |  39 +++---
 .../Resources/views/Activity/list.html.twig   | 111 ++++++++----------
 .../Resources/public/chill/scss/badge.scss    |  83 ++++++-------
 .../public/chill/scss/render_box.scss         |  19 ++-
 4 files changed, 127 insertions(+), 125 deletions(-)

diff --git a/src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss b/src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss
index a7e6c9681..28c02e23e 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss
+++ b/src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss
@@ -1,7 +1,9 @@
 // Access to Bootstrap variables and mixins
 @import '~ChillMainAssets/module/bootstrap/shared';
 
-// activity creation first step: select type page
+//// ACTIVITY CREATION
+// first step: select type page
+
 div.new-activity-select-type {
    div.activity-row {
       display: flex;
@@ -21,29 +23,36 @@ div.new-activity-select-type {
    }
 }
 
-/// liste des échanges, sous le titre-badge, le bloc de contenu
-div.main {
-    padding: 1em;
+//// ACTIVITY LIST PAGE
+// precise badge-title specific details
 
-    ///
-    ul.list-content {
-        list-style-type: none;
-        padding-left: 0.6em;
-        margin: 0;
-        li {
-            margin-bottom: 0.2em;
-        }
-    }
+h2.badge-title {
     div.duration {
         font-size: smaller;
         padding-left: 1em;
         margin-top: 1em;
     }
-
+    ul.list-content {
+        font-size: 70%;
+        list-style-type: none;
+        padding-left: 0;
+        margin: 0;
+        li {
+            margin-bottom: 0.2em;
+            // exception: change bg color for action badges above badge-title
+            .bg-light {
+                background-color: $chill-light-gray !important;
+            }
+        }
+    }
+}
+div.main {
+    padding: 1em;
 }
 
+//// ACTIVITY SHOW AND FORM PAGES
+// Exceptions for flex-bloc in concerned-groups
 
-// exceptions for flex-bloc in concerned-groups
 div.flex-bloc.concerned-groups {
    margin-top: 1em;
    div.item-bloc {
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig
index 9c95d6be0..c719f5bb7 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig
@@ -36,14 +36,13 @@
                             <span class="title_action">
 
                                 {{ activity.type.name | localize_translatable_string }}
-                                <ul class="small_in_title">
 
+                                <ul class="small_in_title">
                                     <li>
                                         <abbr title="{{ 'location'|trans }}">{{ 'location'|trans ~ ': ' }}</abbr>
                                         {# TODO {% if activity.location %}{{ activity.location }}{% endif %} #}
                                         Domicile de l'usager
                                     </li>
-
                                     {% if activity.user and t.userVisible %}
                                         <li>
                                             <abbr title="{{ 'Referrer'|trans }}">{{ 'Referrer'|trans ~ ': ' }}</abbr>
@@ -51,6 +50,35 @@
                                         </li>
                                     {% endif %}
                                 </ul>
+                                <ul class="list-content">
+                                    {%- if t.reasonsVisible -%}
+                                        {%- if activity.reasons is not empty -%}
+                                            <li class="reasons">
+                                                {% for r in activity.reasons %}
+                                                    {{ r|chill_entity_render_box }}
+                                                {% endfor %}
+                                            </li>
+                                        {%- endif -%}
+                                    {% endif %}
+                                    {%- if t.socialIssuesVisible %}
+                                        {%- if activity.socialIssues is not empty -%}
+                                            <li class="social-issues">
+                                                {% for r in activity.socialIssues %}
+                                                    {{ r|chill_entity_render_box }}
+                                                {% endfor %}
+                                            </li>
+                                        {%- endif -%}
+                                    {% endif %}
+                                    {%- if t.socialActionsVisible -%}
+                                        {%- if activity.socialActions is not empty -%}
+                                            <li class="social-actions">
+                                                {% for r in activity.socialActions %}
+                                                    {{ r|chill_entity_render_box }}
+                                                {% endfor %}
+                                            </li>
+                                        {%- endif -%}
+                                    {% endif %}
+                                </ul>
                             </span>
                         </h2>
                         {#
@@ -68,69 +96,32 @@
                         #}
                     </div>
 
+
+                    {%  if activity.comment.comment is not empty
+                        or activity.persons|length > 0
+                        or activity.thirdParties|length > 0
+                        or activity.users|length > 0
+                    %}
                     <div class="main">
-                        <ul class="list-content">
-                            {%- if t.reasonsVisible -%}
-                                <li class="reasons">
-                                    {%- if activity.reasons is not empty -%}
-                                        {% for r in activity.reasons %}
-                                            {{ r|chill_entity_render_box }}
-                                        {% endfor %}
-                                    {%- endif -%}
-                                </li>
-                            {% endif %}
-                            {%- if t.socialIssuesVisible %}
-                                <li class="social-issues">
-                                    {%- if activity.socialIssues is not empty -%}
-                                        {% for r in activity.socialIssues %}
-                                            {{ r|chill_entity_render_box }}
-                                        {% endfor %}
-                                    {%- endif -%}
-                                </li>
-                            {% endif %}
-                            {%- if t.socialActionsVisible -%}
-                                <li class="social-actions">
-                                    {%- if activity.socialActions is not empty -%}
-                                        {% for r in activity.socialActions %}
-                                            {{ r|chill_entity_render_box }}
-                                        {% endfor %}
-                                    {%- endif -%}
-                                </li>
-                            {% endif %}
-                        </ul>
-
-                        {%  if activity.comment.comment is not empty
-                            or activity.persons|length > 0
-                            or activity.thirdParties|length > 0
-                            or activity.users|length > 0
-                        %}
-
-                            {% if activity.comment.comment is not empty %}
-                                {{ activity.comment|chill_entity_render_box({
-                                    'disable_markdown': false,
-                                    'limit_lines': 3,
-                                    'metadata': false,
-                                }) }}
-                            {% endif %}
-
-                            {% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {
-                                'context': context,
-                                'with_display': 'row',
-                                'entity': activity,
-                                'badge_person': true
-                            } %}
-
+                        {% if activity.comment.comment is not empty %}
+                            {{ activity.comment|chill_entity_render_box({
+                                'disable_markdown': false,
+                                'limit_lines': 3,
+                                'metadata': false,
+                            }) }}
                         {% endif %}
+
+                        {% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {
+                            'context': context,
+                            'with_display': 'row',
+                            'entity': activity,
+                            'badge_person': true
+                        } %}
                     </div>
+                    {% endif %}
 
                     <div class="item-row separator">
-                        <div class="updatedBy">
-                            {#
-                            {{ 'Last updated by'|trans}}
-                            <b>{{ activity.updatedBy|chill_entity_render_box }}</b>,<br>
-                            {{ 'le ' ~ activity.updatedAt|format_datetime('long', 'short') }}
-                            #}
-                        </div>
+                        <div class="updatedBy"></div>
                         <ul class="record_actions">
                             <li>
                                 <a href="{{ path('chill_activity_activity_show', { 'id': activity.id, 'person_id': person_id, 'accompanying_period_id': accompanying_course_id }) }}"
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
index 495dce75a..7e9f13149 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
@@ -1,9 +1,7 @@
 /*
-*  BADGES, MARKS, PINS
-*  for chill person theme
+*  BADGES PERSON AND THIRDPARTY
 */
 
-// chill person badges
 span.badge-person,
 span.badge-thirdparty {
     display: inline-block;
@@ -18,15 +16,12 @@ span.badge-thirdparty {
         text-decoration: none;
     }
 }
-
-    span.badge-person {
-        border-bottom-color: $chill-green;
-    }
-
-    // todo: move in thirdparty
-    span.badge-thirdparty {
-        border-bottom-color: shade-color($chill-pink, 10%);
-    }
+span.badge-person {
+    border-bottom-color: $chill-green;
+}
+span.badge-thirdparty {
+    border-bottom-color: shade-color($chill-pink, 10%);
+}
 
 /*
 *   HOUSEHOLD HOLDER MARK
@@ -81,44 +76,44 @@ h2.badge-title {
     }
 }
 
-    /// AccompanyingCourse Work list Page
-    div.accompanying_course_work-list {
-        h2.badge-title {
-            span.title_label {
-                // Calculate same color then border:groove
-                background-color: shade-color($social-action-color, 34%);
-            }
-            span.title_action {
-                @include badge_title($social-action-color);
-            }
+/// badge_title in AccompanyingCourse Work list Page
+div.accompanying_course_work-list {
+    h2.badge-title {
+        span.title_label {
+            // Calculate same color then border:groove
+            background-color: shade-color($social-action-color, 34%);
+        }
+        span.title_action {
+            @include badge_title($social-action-color);
         }
     }
+}
 
-    /// Activities on resume page
-    div.activity-list {
-        h2.badge-title {
-            span.title_label {
-                // Calculate same color then border:groove
-                background-color: shade-color($activity-color, 34%);
-                h3 {
-                    color: $white;
-                }
+/// badge_title in Activities on resume page
+div.activity-list {
+    h2.badge-title {
+        span.title_label {
+            // Calculate same color then border:groove
+            background-color: shade-color($activity-color, 34%);
+            h3 {
+                color: $white;
             }
-            span.title_action {
-                @include badge_title($activity-color);
-            }
-            span.title_label {
-                div.duration {
-                    font-size: 70%;
-                    font-weight: 500;
-                    p {
-                        margin-bottom: 0;
-                        text-align: right;
-                        abbr {
-                            text-decoration: none;
-                        }
+        }
+        span.title_action {
+            @include badge_title($activity-color);
+        }
+        span.title_label {
+            div.duration {
+                font-size: 70%;
+                font-weight: 500;
+                p {
+                    margin-bottom: 0;
+                    text-align: right;
+                    abbr {
+                        text-decoration: none;
                     }
                 }
             }
         }
     }
+}
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 c004af5f9..230640bbd 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss
@@ -8,19 +8,26 @@
         span.altname {}
     }
 
-    /// SOCIAL-ISSUE
-    &.entity-social-issue {
+    /// SOCIAL-ISSUE AND SOCIAL-ACTION
+    &.entity-social-issue,
+    &.entity-social-action {
         margin-right: 0.3em;
         font-size: 120%;
+        span.badge {
+            // for too long badge in a narrow inside block
+            text-align: initial;
+            margin-bottom: 0.2em;
+            > span {
+                white-space: normal;
+            }
+        }
+    }
+    &.entity-social-issue {
         span.badge {
             @include badge_social($social-issue-color);
         }
     }
-
-    /// SOCIAL-ACTION
     &.entity-social-action {
-        margin-right: 0.3em;
-        font-size: 120%;
         span.badge {
             @include badge_social($social-action-color);
         }