MOBILE-3970 course: Add course date styles

scripts/langindex.json

@@ -1549,6 +1549,7 @@
   "core.course.downloadcourse": "tool_mobile",
   "core.course.downloadcoursesprogressdescription": "local_moodlemobileapp",
   "core.course.downloadsectionprogressdescription": "local_moodlemobileapp",
+  "core.course.enddate": "moodle",
   "core.course.errordownloadingcourse": "local_moodlemobileapp",
   "core.course.errordownloadingsection": "local_moodlemobileapp",
   "core.course.errorgetmodule": "local_moodlemobileapp",
@@ -1568,6 +1569,7 @@
   "core.course.overriddennotice": "grades",
   "core.course.refreshcourse": "local_moodlemobileapp",
   "core.course.section": "moodle",
+  "core.course.startdate": "moodle",
   "core.course.thisweek": "format_weeks/currentsection",
   "core.course.todo": "completion",
   "core.course.useactivityonbrowser": "local_moodlemobileapp",

src/core/features/course/lang.json

@@ -32,6 +32,7 @@
     "downloadcourse": "Download course",
     "downloadcoursesprogressdescription": "Downloading courses: downloaded {{count}} out of {{total}}.",
     "downloadsectionprogressdescription": "Downloading section: downloaded {{count}} out of {{total}}.",
+    "enddate": "Course end date",
     "errordownloadingcourse": "Error downloading course.",
     "errordownloadingsection": "Error downloading section.",
     "errorgetmodule": "Error getting activity data.",
@@ -51,6 +52,7 @@
     "overriddennotice": "Your final grade from this activity was manually adjusted.",
     "refreshcourse": "Refresh course",
     "section": "Section",
+    "startdate": "Course start date",
     "thisweek": "This week",
     "todo": "To do",
     "useactivityonbrowser": "You can still use it using your device's web browser.",

src/core/features/course/pages/preview/preview.html

@@ -8,7 +8,7 @@
                 {{'core.course.coursesummary' | translate}}
             </h1>
         </ion-title>
-        <ion-buttons slot="end" *ngIf="avoidOpenCourse">
+        <ion-buttons slot="end" *ngIf="isModal">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
             </ion-button>
@@ -34,18 +34,27 @@
                         <core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id">
                         </core-format-text>
                     </h2>
-                    <p *ngIf="course.startdate">
-                        {{course.startdate * 1000 | coreFormatDate:"strftimedatefullshort" }}
-                        <span *ngIf="course.enddate"> - {{course.enddate * 1000 | coreFormatDate:"strftimedatefullshort" }}</span>
-                    </p>
+
                     <div class="core-course-progress" *ngIf="progress !== undefined">
                         <core-progress-bar [progress]="progress" a11yText="core.course.aria:sectionprogress">
                         </core-progress-bar>
                     </div>
+                    <div *ngIf="course.startdate || course.enddate" class="core-course-dates">
+                        <p *ngIf="course.startdate">
+                            <ion-icon name="fas-calendar" aria-hidden="true"></ion-icon>
+                            <strong>{{ 'core.course.startdate' | translate }}: </strong> {{ course.startdate * 1000 |
+                            coreFormatDate:'strftimedatefullshort' }}
+                        </p>
+                        <p *ngIf="course.enddate">
+                            <ion-icon name="fas-calendar" aria-hidden="true"></ion-icon>
+                            <strong>{{ 'core.course.enddate' | translate }}: </strong> {{ course.enddate * 1000 |
+                            coreFormatDate:'strftimedatefullshort' }}
+                        </p>
+                    </div>
                 </ion-label>
                 <ion-button fill="clear" [href]="courseUrl" core-link [showBrowserWarning]="false" color="dark"
                     [attr.aria-label]="'core.openinbrowser' | translate" slot="end">
-                    <ion-icon name="fas-external-link-alt" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-external-link-alt" slot="icon-only" aria-hidden="true"></ion-icon>
                 </ion-button>
             </ion-item>
 
@@ -62,7 +71,7 @@
             <ion-list *ngIf="course.contacts && course.contacts.length">
                 <ion-item-divider class="ion-text-wrap">
                     <ion-label>
-                        <h2>{{ 'core.teachers' | translate }}</h2>
+                        <p class="item-heading">{{ 'core.teachers' | translate }}</p>
                     </ion-label>
                 </ion-item-divider>
                 <ion-item button class="ion-text-wrap" *ngFor="let contact of course.contacts" core-user-link [userId]="contact.id"
@@ -109,7 +118,7 @@
                 </ion-button>
             </ion-label>
         </ion-item>
-       <ion-item class="ion-text-wrap" *ngIf="paypalEnabled">
+        <ion-item class="ion-text-wrap" *ngIf="paypalEnabled">
             <ion-label>
                 <p class="item-heading">{{ 'core.courses.otherenrolments' | translate }}</p>
                 <ion-button expand="block" class="ion-margin-top" (click)="browserEnrol()">
@@ -132,7 +141,7 @@
         </ion-button>
     </ng-container>
 
-    <ion-button class="ion-margin" (click)="openCourse()" *ngIf="!avoidOpenCourse && canAccessCourse" expand="block">
+    <ion-button class="ion-margin" (click)="openCourse()" *ngIf="!isModal && canAccessCourse" expand="block">
         <ion-icon name="fas-briefcase" slot="start" aria-hidden="true"></ion-icon>
         <ion-label>
             {{ 'core.course' | translate }}

src/core/features/course/pages/preview/preview.page.ts

@@ -56,7 +56,7 @@ export class CoreCoursePreviewPage implements OnInit, OnDestroy {
     selfEnrolInstances: CoreCourseEnrolmentMethod[] = [];
     paypalEnabled = false;
     dataLoaded = false;
-    avoidOpenCourse = false;
+    isModal = false;
 
     courseUrl = '';
     courseImageUrl?: string;
@@ -110,7 +110,7 @@ export class CoreCoursePreviewPage implements OnInit, OnDestroy {
             this.course = CoreNavigator.getRouteParam('course');
         } else {
             // Opened as a modal.
-            this.avoidOpenCourse = true;
+            this.isModal = true;
         }
 
         const currentSiteUrl = CoreSites.getRequiredCurrentSite().getURL();
@@ -256,7 +256,7 @@ export class CoreCoursePreviewPage implements OnInit, OnDestroy {
      * @param replaceCurrentPage If current place should be replaced in the navigation stack.
      */
     openCourse(replaceCurrentPage = false): void {
-        if (!this.canAccessCourse || !this.course || this.avoidOpenCourse) {
+        if (!this.canAccessCourse || !this.course || this.isModal) {
             return;
         }
 

src/core/features/course/pages/preview/preview.scss

@@ -1,8 +1,9 @@
+@import '~theme/globals.scss';
+
 :host {
     .core-course-thumb {
         overflow: hidden;
         text-align: center;
-        height: 40vw;
         max-height: 35vh;
         z-index: -1;
         overflow: hidden;
@@ -13,4 +14,15 @@
     .core-customfieldvalue core-format-text {
         display: inline;
     }
+
+    .core-course-dates {
+        background: var(--light);
+        border-radius: var(--small-radius);
+        padding: 8px;
+
+        ion-icon {
+            @include margin-horizontal(null, 8px);
+        }
+    }
+
 }