From 7269a7c071dd96a802d57f0d0d5efee1d07bb145 Mon Sep 17 00:00:00 2001
From: Noel De Martin <noel@moodle.com>
Date: Tue, 22 Nov 2022 10:38:37 +0100
Subject: [PATCH] MOBILE-4038 timeline: Move action to separate line

---
 .../events/addon-block-timeline-events.html   | 11 ++---
 .../timeline/components/events/events.scss    | 40 ++++++-------------
 2 files changed, 18 insertions(+), 33 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 3aab6a77b..4428d0f64 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
@@ -27,7 +27,7 @@
                                 </core-mod-icon>
                             </ion-col>
                             <ion-col class="addon-block-timeline-activity-name ion-no-padding">
-                                <p class="item-heading addon-block-timeline-activity-name-with-status">
+                                <p class="item-heading">
                                     <span>
                                         <core-format-text [text]="event.activityname || event.name" contextLevel="module"
                                             [contextInstanceId]="event.id" [courseId]="event.course?.id">
@@ -36,14 +36,15 @@
                                     <ion-badge *ngIf="event.overdue" color="danger">{{ 'addon.block_timeline.overdue' | translate }}
                                     </ion-badge>
                                 </p>
-                                <p *ngIf="(showInlineCourse && event.course) || event.activitystr"
-                                    class="addon-block-timeline-activity-course-activity">
-                                    <span *ngIf="showInlineCourse && event.course">
+                                <p *ngIf="showInlineCourse && event.course">
+                                    <span>
                                         <core-format-text [text]="event.course.fullnamedisplay" contextLevel="course"
                                             [contextInstanceId]="event.course.id">
                                         </core-format-text>
                                     </span>
-                                    <span *ngIf="event.activitystr">
+                                </p>
+                                <p *ngIf="event.activitystr">
+                                    <span>
                                         <core-format-text *ngIf="event.activitystr" [text]="event.activitystr" contextLevel="module"
                                             [contextInstanceId]="event.id">
                                         </core-format-text>
diff --git a/src/addons/block/timeline/components/events/events.scss b/src/addons/block/timeline/components/events/events.scss
index 4de0930a9..f55d845f1 100644
--- a/src/addons/block/timeline/components/events/events.scss
+++ b/src/addons/block/timeline/components/events/events.scss
@@ -38,34 +38,6 @@ h4.core-bold {
     justify-content: flex-end;
 }
 
-.addon-block-timeline-activity-name-with-status {
-    display: flex;
-    flex-wrap: wrap;
-    span {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-}
-
-.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;
@@ -78,4 +50,16 @@ h4.core-bold {
 .addon-block-timeline-activity-name {
     flex-grow: 1;
     overflow: hidden;
+
+    & > p {
+        display: flex;
+        flex-wrap: wrap;
+
+        & > span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+    }
+
 }