Merge pull request #4399 from crazyserver/MOBILE-4653

Mobile 4653

Author: dpalou

src/addons/storagemanager/pages/course-storage/course-storage.ts

@@ -748,6 +748,8 @@ export default class AddonStorageManagerCourseStoragePage implements OnInit, OnD
             }
 
             CoreAlerts.showError(error, { default: Translate.instant('core.course.errordownloadingcourse') });
+        } finally {
+            this.changeDetectorRef.markForCheck();
         }
     }
 

src/core/features/course/components/module-completion-legacy/core-course-module-completion-legacy.html

@@ -1,6 +1,10 @@
-<img *ngIf="completion && completion.tracking !== 1" [src]="completionImage" [alt]="completionDescription$ | async">
-
-<ion-button fill="clear" *ngIf="completion && completion.tracking === 1" (click)="completionClicked($event)"
-    [title]="completionDescription$ | async">
-    <img [src]="completionImage" role="presentation" alt="">
-</ion-button>
+@if (completion) {
+    @if (completion.tracking === 1) {
+        <ion-button fill="clear" (click)="completionClicked($event)" [title]="completionDescription$ | async"
+            class="core-completion-manual">
+            <img [src]="completionImage" role="presentation" alt="">
+        </ion-button>
+    } @else {
+        <img [src]="completionImage" [alt]="completionDescription$ | async" class="core-completion-auto">
+    }
+}

src/core/features/course/components/module-completion-legacy/module-completion-legacy.scss

@@ -1,25 +1,27 @@
 :host {
     display: contents;
-    --size: 30px;
+    --size: 20px;
+
+    img.core-completion-auto {
+        margin: 6px;
+    }
 
     img {
-        padding: 2px;
         width: var(--size);
-        vertical-align: middle;
         max-width: none;
-        margin: 4px;
+        vertical-align: middle;
     }
 
-    ion-button {
+    ion-button.core-completion-manual {
         --padding-top: 0px;
         --padding-start: 0px;
         --padding-end: 0px;
         --padding-bottom: 0px;
-        margin: 0;
         --a11y-target-min-size: 32px;
         width: var(--a11y-target-min-size);
         height: var(--a11y-target-min-size);
         min-width: var(--a11y-target-min-size);
-        min-height: var(--a11y-target-min-size);;
+        min-height: var(--a11y-target-min-size);
+        margin: 0px;
     }
 }