MOBILE-3970 course: Add course date styles

main
Pau Ferrer Ocaña 2022-02-11 16:51:29 +01:00
parent 53f986a26b
commit f22fec5e97
5 changed files with 38 additions and 13 deletions

View File

@ -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",

View File

@ -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.",

View File

@ -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 }}

View File

@ -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;
}

View File

@ -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);
}
}
}