From 7cf522815dda502ff3a6798fc2899fa6b5806a00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 21 Jan 2022 15:55:53 +0100
Subject: [PATCH] MOBILE-3881 timeline: Improve multiple lines on activity
 string

---
 .../events/addon-block-timeline-events.html   | 17 +++++++-----
 .../timeline/components/events/events.scss    | 27 +++++++++++++++++--
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/addons/block/timeline/components/events/addon-block-timeline-events.html b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
index 1a6031f9c..0823714d6 100644
--- a/src/addons/block/timeline/components/events/addon-block-timeline-events.html
+++ b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
@@ -33,21 +33,24 @@
                                     <ion-badge *ngIf="event.overdue" color="danger">{{ 'addon.block_timeline.overdue' | translate }}
                                     </ion-badge>
                                 </p>
-                                <p *ngIf="(showCourse && event.course) || event.activitystr">
+                                <p *ngIf="(showCourse && event.course) || event.activitystr"
+                                    class="addon-block-timeline-activity-course-activity">
                                     <span *ngIf="showCourse && event.course">
                                         <core-format-text [text]="event.course.fullnamedisplay" contextLevel="course"
                                             [contextInstanceId]="event.course.id">
-                                        </core-format-text> ·
+                                        </core-format-text>
+                                    </span>
+                                    <span *ngIf="event.activitystr">
+                                        <core-format-text *ngIf="event.activitystr" [text]="event.activitystr" contextLevel="module"
+                                            [contextInstanceId]="event.id">
+                                        </core-format-text>
                                     </span>
-                                    <core-format-text [text]="event.activitystr" contextLevel="module" [contextInstanceId]="event.id">
-                                    </core-format-text>
                                 </p>
                             </ion-col>
                         </ion-row>
                     </ion-col>
-                    <ion-col class="addon-block-timeline-activity-action ion-no-padding">
-                        <ion-button fill="clear" (click)="action($event, event.action.url)" [title]="event.action.name"
-                            [disabled]="!event.action.actionable" *ngIf="event.action">
+                    <ion-col class="addon-block-timeline-activity-action ion-no-padding" *ngIf="event.action?.actionable">
+                        <ion-button fill="clear" (click)="action($event, event.action.url)" [title]="event.action.name">
                             {{event.action.name}}
                             <ion-badge slot="end" class="ion-margin-start" *ngIf="event.action.showitemcount">
                                 {{event.action.itemcount}}
diff --git a/src/addons/block/timeline/components/events/events.scss b/src/addons/block/timeline/components/events/events.scss
index 8be5516b3..5c4aad112 100644
--- a/src/addons/block/timeline/components/events/events.scss
+++ b/src/addons/block/timeline/components/events/events.scss
@@ -22,11 +22,34 @@ h4.core-bold {
     --margin-vertical: 0;
 }
 
-.addon-block-timeline-activity-time,
-.addon-block-timeline-activity-action {
+.addon-block-timeline-activity-time {
     flex-grow: 0;
 }
 
+.addon-block-timeline-activity-action {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.addon-block-timeline-activity-course-activity {
+    display: flex;
+    flex-wrap: wrap;
+    span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    span::after {
+        content: "·";
+        display: inline;
+        padding-left: .3rem;
+        padding-right: .3rem;
+    }
+
+    span:last-child::after {
+        display: none;
+    }
+}
+
 .addon-block-timeline-activity-main,
 .addon-block-timeline-activity-name {
     flex-grow: 1;