MOBILE-3401 courses: Shrink title on course cards with spinner

Author: crazyserver

src/core/courses/components/course-progress/core-courses-course-progress.html

@@ -3,7 +3,7 @@
         <img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt=""/>
     </div>
     <ion-item tappable text-wrap detail-none (click)="openCourse(course)" [title]="course.displayname || course.fullname" class="core-course-link" [class.item-disabled]="course.visible == 0" [class.core-course-more-than-title]="(course.progress != null && course.progress >= 0)">
-        <div class="core-course-title" [class.core-course-with-buttons]="courseOptionMenuEnabled || (downloadCourseEnabled && showDownload)">
+        <div class="core-course-title" [class.core-course-with-buttons]="courseOptionMenuEnabled || (downloadCourseEnabled && showDownload)" [class.core-course-with-spinner]="(downloadCourseEnabled && prefetchCourseData.prefetchCourseIcon == 'spinner') || showSpinner">
             <p *ngIf="course.categoryname || (course.displayname && course.shortname && course.fullname != course.displayname)" class="core-course-additional-info">
                 <span *ngIf="course.categoryname" class="core-course-category"><core-format-text [text]="course.categoryname"></core-format-text></span>
                 <span *ngIf="course.categoryname && course.displayname && course.shortname && course.fullname != course.displayname" class="core-course-category"> | </span>
@@ -30,7 +30,7 @@ <h2>
             <ion-spinner *ngIf="(downloadCourseEnabled && prefetchCourseData.prefetchCourseIcon == 'spinner') || showSpinner"></ion-spinner>
 
             <!-- Downloaded icon. -->
-             <ion-icon *ngIf="downloadCourseEnabled && prefetchCourseData.downloadSucceeded && !showSpinner" class="core-icon-downloaded" name="cloud-done" color="success" [attr.aria-label]="'core.downloaded' | translate" role="status"></ion-icon>
+            <ion-icon *ngIf="downloadCourseEnabled && prefetchCourseData.downloadSucceeded && !showSpinner" class="core-icon-downloaded" name="cloud-done" color="success" [attr.aria-label]="'core.downloaded' | translate" role="status"></ion-icon>
 
             <!-- Options menu. -->
             <button ion-button icon-only clear color="dark" (click)="showCourseOptionsMenu($event)" *ngIf="!showSpinner" [attr.aria-label]="('core.displayoptions' | translate)">

src/core/courses/components/course-progress/course-progress.scss

@@ -62,6 +62,10 @@ ion-app.app-root core-courses-course-progress {
 
                 &.core-course-with-buttons {
                     max-width: calc(100% - 50px);
+
+                    &.core-course-with-spinner {
+                        max-width: calc(100% - 100px);
+                    }
                 }
             }