improve activity show twig template

src/Bundle/ChillActivityBundle/Resources/views/Activity/show.html.twig

@@ -1,21 +1,39 @@
 {%- set t = entity.type -%}
 {%- import "@ChillDocStore/Macro/macro.html.twig" as m -%}
 
-<h2 class="chill-green-dark">
+<h1>{{ "Activity"|trans }}</h1>
-    {{ "Activity"|trans }}{{ ', le ' ~ entity.date|format_date('long') }}
-    {%- if t.emergencyVisible and entity.emergency -%}
-      <span class="badge bg-danger rounded-pill fs-6 float-end">
-        {{- 'Emergency'|trans -}}
-      </span>
-    {%- endif -%}
-</h2>
 
-<h1>
+<div class="flex-table">
+    <div class="item-bloc">
+
+        <div class="item-row">
+            <div class="wrap-list">
+                <div class="wl-row">
+                    <div class="wl-col title">
+                        {% if entity.date %}
+                            <p class="date-label">
+                                {{ entity.date|format_date('short') }}
+                            </p>
+                        {% endif %}
+                    </div>
+                    <div class="wl-col list">
+                        <h2 class="badge-title">
+                            <span class="title_label"></span>
+                            <span class="title_action">
                                 {{ entity.type.name | localize_translatable_string }}
-</h1>
+                                {% if entity.emergency %}
+                                    <span class="badge bg-danger rounded-pill fs-6 float-end">{{ 'Emergency'|trans|upper }}</span>
+                                {% endif %}
+                            </span>
+                        </h2>
+                    </div>
+                </div>
+            </div>
+        </div>
 
-<dl class="chill_view_data">
+        <div class="item-row separator">
-    <dt class="inline">{{ 'by'|trans|capitalize }}</dt>
+            <dl class="chill_view_data">
+                <dt class="inline">{{ 'Referrer'|trans|capitalize }}</dt>
                 <dd>{{ entity.user }}</dd>
 
                 {%- if entity.scope -%}
@@ -57,9 +75,13 @@
                         {%- endif -%}
                     </dd>
                 {% endif %}
-</dl>
+            </dl>
+        </div>
 
-<h2 class="chill-green-dark">{{ 'Concerned groups'|trans }}</h2>
+    </div>
+</div>
+
+<h2 class="chill-blue">{{ 'Concerned groups'|trans }}</h2>
 
 {% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {
     'context': context,
@@ -67,8 +89,12 @@
     'badge_person': 'true'
 } %}
 
-<h2 class="chill-green-dark">{{ 'Activity data'|trans }}</h2>
+<h2 class="chill-blue">{{ 'Activity data'|trans }}</h2>
-<dl>
+
+<div class="flex-table">
+    <div class="item-bloc">
+
+        <dl class="chill_view_data">
             <dt class="inline">{{ 'Date'|trans }}</dt>
             <dd>{{ entity.date|format_date('long') }}</dd>
 
@@ -150,7 +176,10 @@
                 </dd>
             {% endif %}
 
-</dl>
+        </dl>
+
+    </div>
+</div>
 
 {% set person_id = null %}
 {% if person %}
@@ -183,3 +212,9 @@
     </li>
     {% endif %}
 </ul>
+<script>
+    import ShowPane from "../../../../ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane";
+    export default {
+        components: {ShowPane}
+    }
+</script>

src/Bundle/ChillActivityBundle/Resources/views/Activity/showAccompanyingCourse.html.twig

@@ -8,8 +8,6 @@
 
 {% block content -%}
 <div class="activity-show">
-
     {% include 'ChillActivityBundle:Activity:show.html.twig' with {'context': 'accompanyingCourse'} %}
-
 </div>
 {% endblock content %}

src/Bundle/ChillActivityBundle/Resources/views/Activity/showPerson.html.twig

@@ -8,8 +8,6 @@
 
 {% block personcontent -%}
 <div class="activity-show">
-
     {% include 'ChillActivityBundle:Activity:show.html.twig' with {'context': 'person'} %}
-
 </div>
 {% endblock personcontent %}

src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss

@@ -137,7 +137,7 @@ div.accompanying_course_work-list {
 }
 
 /// dashboard_like_badge in Activities on resume page
-div.activity-list {
+div[class*='activity-'] {
     div.dashboard,
     h2.badge-title {
         span.title_label {