From 1219ff45b9f7fdebbef821d62c4981f1a03a91a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 12 May 2021 13:05:06 +0200
Subject: [PATCH] MOBILE-3320 timeline: Fix timeline styles

---
 .../events/addon-block-timeline-events.html   | 30 +++++++++++--------
 .../timeline/components/events/events.scss    |  6 ++++
 .../timeline/components/events/events.ts      |  1 +
 .../block/timeline/services/timeline.ts       | 16 ++++------
 .../core-courses-course-options-menu.html     | 13 ++++----
 .../core-courses-course-progress.html         |  2 +-
 6 files changed, 38 insertions(+), 30 deletions(-)
 create mode 100644 src/addons/block/timeline/components/events/events.scss

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 8723d266f..8a3c70adc 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
@@ -20,7 +20,7 @@
                     </core-format-text>
                 </p>
 
-                <ion-button fill="clear" class="ion-hide-md-up" (click)="action($event, event.action.url)"
+                <ion-button fill="clear" class="ion-hide-md-up ion-text-wrap" (click)="action($event, event.action.url)"
                     [title]="event.action.name" [disabled]="!event.action.actionable" *ngIf="event.action">
                     {{event.action.name}}
                     <ion-badge slot="end" class="ion-margin-start" *ngIf="event.action.showitemcount">{{event.action.itemcount}}
@@ -28,19 +28,23 @@
                 </ion-button>
             </ion-label>
 
-            <ion-grid slot="end">
-                <ion-row class="ion-justify-content-end">
+            <div slot="end" class="events-info">
+                <div>
                     <ion-badge color="light">{{event.timesort * 1000 | coreFormatDate:"strftimetime24" }}</ion-badge>
-                </ion-row>
-                <ion-row class="ion-justify-content-end">
-                    <ion-button fill="clear" class="ion-hide-md-down" (click)="action($event, event.action.url)"
-                        [title]="event.action.name" [disabled]="!event.action.actionable" *ngIf="event.action">
-                        {{event.action.name}}
-                        <ion-badge slot="end" class="ion-margin-start" *ngIf="event.action.showitemcount">{{event.action.itemcount}}
-                        </ion-badge>
-                    </ion-button>
-                </ion-row>
-            </ion-grid>
+                </div>
+                <ion-button
+                    class="ion-hide-md-down"
+                    fill="clear"
+                    (click)="action($event, event.action.url)"
+                    [title]="event.action.name"
+                    [disabled]="!event.action.actionable" *ngIf="event.action"
+                >
+                    {{event.action.name}}
+                    <ion-badge slot="end" class="ion-margin-start" *ngIf="event.action.showitemcount">
+                        {{event.action.itemcount}}
+                    </ion-badge>
+                </ion-button>
+            </div>
         </ion-item>
     </ng-container>
 </ion-item-group>
diff --git a/src/addons/block/timeline/components/events/events.scss b/src/addons/block/timeline/components/events/events.scss
new file mode 100644
index 000000000..c863dbb2a
--- /dev/null
+++ b/src/addons/block/timeline/components/events/events.scss
@@ -0,0 +1,6 @@
+.events-info {
+    display: flex;
+    flex-direction: column;
+    text-align: end;
+    padding: 10px 0;
+}
diff --git a/src/addons/block/timeline/components/events/events.ts b/src/addons/block/timeline/components/events/events.ts
index 0b29a7b80..f4266f50c 100644
--- a/src/addons/block/timeline/components/events/events.ts
+++ b/src/addons/block/timeline/components/events/events.ts
@@ -29,6 +29,7 @@ import { AddonCalendarEvent } from '@addons/calendar/services/calendar';
 @Component({
     selector: 'addon-block-timeline-events',
     templateUrl: 'addon-block-timeline-events.html',
+    styleUrls: ['events.scss'],
 })
 export class AddonBlockTimelineEventsComponent implements OnChanges {
 
diff --git a/src/addons/block/timeline/services/timeline.ts b/src/addons/block/timeline/services/timeline.ts
index 2a4f7e4d0..c50c5adef 100644
--- a/src/addons/block/timeline/services/timeline.ts
+++ b/src/addons/block/timeline/services/timeline.ts
@@ -103,7 +103,7 @@ export class AddonBlockTimelineProvider {
     async getActionEventsByCourses(
         courseIds: number[],
         siteId?: string,
-    ): Promise<{[courseId: string]: { events: AddonCalendarEvent[]; canLoadMore: number } }> {
+    ): Promise<{[courseId: string]: { events: AddonCalendarEvent[]; canLoadMore?: number } }> {
         const site = await CoreSites.getSite(siteId);
 
         const time = moment().subtract(14, 'days').unix(); // Check two weeks ago.
@@ -123,17 +123,13 @@ export class AddonBlockTimelineProvider {
             preSets,
         );
 
-        if (events && events.groupedbycourse) {
-            const courseEvents = {};
+        const courseEvents: {[courseId: string]: { events: AddonCalendarEvent[]; canLoadMore?: number } } = {};
 
-            events.groupedbycourse.forEach((course) => {
-                courseEvents[course.courseid] = this.treatCourseEvents(course, time);
-            });
+        events.groupedbycourse.forEach((course) => {
+            courseEvents[course.courseid] = this.treatCourseEvents(course, time);
+        });
 
-            return courseEvents;
-        }
-
-        throw new CoreError('No events returned on core_calendar_get_action_events_by_courses.');
+        return courseEvents;
     }
 
     /**
diff --git a/src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html b/src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html
index e1ff79574..f18b47cbd 100644
--- a/src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html
+++ b/src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html
@@ -1,25 +1,26 @@
-<ion-item button class="ion-text-wrap" (click)="action('download')" *ngIf="downloadCourseEnabled">
+<ion-item button class="ion-text-wrap" (click)="action('download')" *ngIf="downloadCourseEnabled" detail="false">
     <ion-icon *ngIf="!prefetch.loading" [name]="prefetch.icon" slot="start" aria-hidden="true"></ion-icon>
     <ion-spinner *ngIf="prefetch.loading" slot="start"></ion-spinner>
     <ion-label><h2>{{ prefetch.statusTranslatable | translate }}</h2></ion-label>
 </ion-item>
-<ion-item button class="ion-text-wrap" (click)="action('delete')" *ngIf="prefetch.status == 'downloaded' || prefetch.status == 'outdated'">
+<ion-item button class="ion-text-wrap" (click)="action('delete')" detail="false"
+    *ngIf="prefetch.status == 'downloaded' || prefetch.status == 'outdated'">
     <ion-icon name="fas-trash" slot="start" aria-hidden="true"></ion-icon>
     <ion-label><h2>{{ 'addon.storagemanager.deletecourse' | translate }}</h2></ion-label>
 </ion-item>
-<ion-item button class="ion-text-wrap" (click)="action('hide')" *ngIf="!course.hidden">
+<ion-item button class="ion-text-wrap" (click)="action('hide')" *ngIf="!course.hidden" detail="false">
     <ion-icon name="fas-eye" slot="start" aria-hidden="true"></ion-icon>
     <ion-label><h2>{{ 'core.courses.hidecourse' | translate }}</h2></ion-label>
 </ion-item>
-<ion-item button class="ion-text-wrap" (click)="action('show')" *ngIf="course.hidden">
+<ion-item button class="ion-text-wrap" (click)="action('show')" *ngIf="course.hidden" detail="false">
     <ion-icon name="fas-eye-slash" slot="start" aria-hidden="true"></ion-icon>
     <ion-label><h2>{{ 'core.courses.show' | translate }}</h2></ion-label>
 </ion-item>
-<ion-item button class="ion-text-wrap" (click)="action('favourite')" *ngIf="!course.isfavourite">
+<ion-item button class="ion-text-wrap" (click)="action('favourite')" *ngIf="!course.isfavourite" detail="false">
     <ion-icon name="fas-star" slot="start" aria-hidden="true"></ion-icon>
     <ion-label><h2>{{ 'core.courses.addtofavourites' | translate }}</h2></ion-label>
 </ion-item>
-<ion-item button class="ion-text-wrap" (click)="action('unfavourite')" *ngIf="course.isfavourite">
+<ion-item button class="ion-text-wrap" (click)="action('unfavourite')" *ngIf="course.isfavourite" detail="false">
     <ion-icon name="far-star" slot="start" aria-hidden="true"></ion-icon>
     <ion-label><h2>{{ 'core.courses.removefromfavourites' | translate }}</h2></ion-label>
 </ion-item>
diff --git a/src/core/features/courses/components/course-progress/core-courses-course-progress.html b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
index 508bcf80f..1138065e7 100644
--- a/src/core/features/courses/components/course-progress/core-courses-course-progress.html
+++ b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
@@ -5,7 +5,7 @@
     </div>
     <ion-item button lines="none" (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname"
         class="core-course-header" [class.item-disabled]="course.visible == 0"
-        [class.core-course-more-than-title]="course.progress! >= 0">
+        [class.core-course-more-than-title]="course.progress! >= 0" detail="false">
         <ion-label
             class="ion-text-wrap core-course-title"
             [class.core-course-with-buttons]="courseOptionMenuEnabled || (downloadCourseEnabled && showDownload)"