MOBILE-3814 course: Limit width on course summary
Pau Ferrer Ocaña
parent
aaa8ee3fc8
commit
8b3a07d224
|
|
@ -23,134 +23,139 @@
|
|||
</ion-icon>
|
||||
</div>
|
||||
<div *ngIf="course" class="course-container">
|
||||
<ion-item class="ion-text-wrap course-name">
|
||||
<ion-label>
|
||||
<p *ngIf="course.displayname && course.shortname && course.fullname != course.displayname"
|
||||
class="core-course-shortname">
|
||||
<core-format-text [text]="course.shortname" contextLevel="course" [contextInstanceId]="course.id">
|
||||
</core-format-text>
|
||||
</p>
|
||||
<h1>
|
||||
<span class="sr-only">{{ 'core.courses.aria:coursename' | translate }}</span>
|
||||
<core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id">
|
||||
</core-format-text>
|
||||
</h1>
|
||||
<ion-chip color="primary" *ngIf="course.categoryname" class="core-course-category ion-text-nowrap">
|
||||
<span class="sr-only">{{ 'core.courses.aria:coursecategory' | translate }}</span>
|
||||
<ion-label>
|
||||
<core-format-text [text]="course.categoryname" contextLevel="coursecat" [contextInstanceId]="course.categoryid">
|
||||
</core-format-text>
|
||||
</ion-label>
|
||||
</ion-chip>
|
||||
</ion-label>
|
||||
<ion-button fill="clear" [href]="courseUrl" core-link [showBrowserWarning]="false"
|
||||
[attr.aria-label]="'core.openinbrowser' | translate" slot="end">
|
||||
<ion-icon name="fas-external-link-alt" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="progress !== undefined || course.startdate || course.enddate">
|
||||
<ion-label>
|
||||
<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><br>
|
||||
{{ course.startdate * 1000 | coreFormatDate:'strftimedaydatetime' }}
|
||||
</p>
|
||||
<p *ngIf="course.enddate">
|
||||
<ion-icon name="fas-calendar" aria-hidden="true"></ion-icon>
|
||||
<strong>{{ 'core.course.enddate' | translate }}</strong><br>
|
||||
{{ course.enddate * 1000 | coreFormatDate:'strftimedaydatetime' }}
|
||||
</p>
|
||||
</div>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item class="ion-text-wrap" *ngIf="course.summary" detail="false">
|
||||
<ion-label>
|
||||
<p class="item-heading">
|
||||
{{'core.course.coursesummary' | translate}}
|
||||
</p>
|
||||
<core-format-text [text]="course.summary" collapsible-item contextLevel="course" [contextInstanceId]="course.id">
|
||||
</core-format-text>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-list *ngIf="course.contacts && course.contacts.length">
|
||||
<ion-item [button]="course.contacts.length >= 5" class="ion-text-wrap" (click)="toggleContacts()"
|
||||
[attr.aria-label]="(contactsExpanded ? 'core.collapse' : 'core.expand') | translate" detail="false">
|
||||
<ion-icon *ngIf="course.contacts.length >= 5" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
|
||||
class="expandable-status-icon" [class.expandable-status-icon-expanded]="contactsExpanded">
|
||||
</ion-icon>
|
||||
<div class="list-item-limited-width">
|
||||
<ion-item class="ion-text-wrap course-name">
|
||||
<ion-label>
|
||||
<p class="item-heading">
|
||||
{{ 'core.teachers' | translate }}
|
||||
<p *ngIf="course.displayname && course.shortname && course.fullname != course.displayname"
|
||||
class="core-course-shortname">
|
||||
<core-format-text [text]="course.shortname" contextLevel="course" [contextInstanceId]="course.id">
|
||||
</core-format-text>
|
||||
</p>
|
||||
<h1>
|
||||
<span class="sr-only">{{ 'core.courses.aria:coursename' | translate }}</span>
|
||||
<core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id">
|
||||
</core-format-text>
|
||||
</h1>
|
||||
<ion-chip color="primary" *ngIf="course.categoryname" class="core-course-category ion-text-nowrap">
|
||||
<span class="sr-only">{{ 'core.courses.aria:coursecategory' | translate }}</span>
|
||||
<ion-label>
|
||||
<core-format-text [text]="course.categoryname" contextLevel="coursecat"
|
||||
[contextInstanceId]="course.categoryid">
|
||||
</core-format-text>
|
||||
</ion-label>
|
||||
</ion-chip>
|
||||
</ion-label>
|
||||
<ion-button fill="clear" [href]="courseUrl" core-link [showBrowserWarning]="false"
|
||||
[attr.aria-label]="'core.openinbrowser' | translate" slot="end">
|
||||
<ion-icon name="fas-external-link-alt" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="progress !== undefined || course.startdate || course.enddate">
|
||||
<ion-label>
|
||||
<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><br>
|
||||
{{ course.startdate * 1000 | coreFormatDate:'strftimedaydatetime' }}
|
||||
</p>
|
||||
<p *ngIf="course.enddate">
|
||||
<ion-icon name="fas-calendar" aria-hidden="true"></ion-icon>
|
||||
<strong>{{ 'core.course.enddate' | translate }}</strong><br>
|
||||
{{ course.enddate * 1000 | coreFormatDate:'strftimedaydatetime' }}
|
||||
</p>
|
||||
</div>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ng-container *ngIf="contactsExpanded || course.contacts.length < 5">
|
||||
<ion-item button class="ion-text-wrap" *ngFor="let contact of course.contacts" core-user-link [userId]="contact.id"
|
||||
[courseId]="isEnrolled ? course.id : null" [attr.aria-label]="'core.viewprofile' | translate" detail="true">
|
||||
<core-user-avatar [user]="contact" slot="start" [userId]="contact.id" [courseId]="isEnrolled ? course.id : null"
|
||||
[linkProfile]="false">
|
||||
</core-user-avatar>
|
||||
|
||||
<ion-item class="ion-text-wrap" *ngIf="course.summary" detail="false">
|
||||
<ion-label>
|
||||
<p class="item-heading">
|
||||
{{'core.course.coursesummary' | translate}}
|
||||
</p>
|
||||
<core-format-text [text]="course.summary" collapsible-item contextLevel="course" [contextInstanceId]="course.id">
|
||||
</core-format-text>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-list *ngIf="course.contacts && course.contacts.length">
|
||||
<ion-item [button]="course.contacts.length >= 5" class="ion-text-wrap" (click)="toggleContacts()"
|
||||
[attr.aria-label]="(contactsExpanded ? 'core.collapse' : 'core.expand') | translate" detail="false">
|
||||
<ion-icon *ngIf="course.contacts.length >= 5" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
|
||||
class="expandable-status-icon" [class.expandable-status-icon-expanded]="contactsExpanded">
|
||||
</ion-icon>
|
||||
<ion-label>
|
||||
<p class="item-heading">{{contact.fullname}}</p>
|
||||
<p class="item-heading">
|
||||
{{ 'core.teachers' | translate }}
|
||||
</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ng-container>
|
||||
<core-spacer></core-spacer>
|
||||
</ion-list>
|
||||
|
||||
<ion-item class="ion-text-wrap" *ngIf="course.customfields">
|
||||
<ion-label>
|
||||
<ng-container *ngFor="let field of course.customfields">
|
||||
<div *ngIf="field.value"
|
||||
class="core-customfield core-customfield_{{field.type}} core-customfield_{{field.shortname}}">
|
||||
<span class="core-customfieldname">
|
||||
<core-format-text [text]="field.name" contextLevel="course" [contextInstanceId]="course.id">
|
||||
</core-format-text>
|
||||
<span class="core-customfieldseparator">: </span>
|
||||
</span>
|
||||
<span class="core-customfieldvalue">
|
||||
<core-format-text [text]="field.value" [collapsible-item]="field.type == 'textarea' ? '' : null"
|
||||
contextLevel="course" [contextInstanceId]="course.id">
|
||||
</core-format-text>
|
||||
</span>
|
||||
</div>
|
||||
<ng-container *ngIf="contactsExpanded || course.contacts.length < 5">
|
||||
<ion-item button class="ion-text-wrap" *ngFor="let contact of course.contacts" core-user-link [userId]="contact.id"
|
||||
[courseId]="isEnrolled ? course.id : null" [attr.aria-label]="'core.viewprofile' | translate" detail="true">
|
||||
<core-user-avatar [user]="contact" slot="start" [userId]="contact.id" [courseId]="isEnrolled ? course.id : null"
|
||||
[linkProfile]="false">
|
||||
</core-user-avatar>
|
||||
<ion-label>
|
||||
<p class="item-heading">{{contact.fullname}}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ng-container>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<core-spacer></core-spacer>
|
||||
</ion-list>
|
||||
|
||||
<ion-item class="ion-text-wrap" *ngIf="course.customfields">
|
||||
<ion-label>
|
||||
<ng-container *ngFor="let field of course.customfields">
|
||||
<div *ngIf="field.value"
|
||||
class="core-customfield core-customfield_{{field.type}} core-customfield_{{field.shortname}}">
|
||||
<span class="core-customfieldname">
|
||||
<core-format-text [text]="field.name" contextLevel="course" [contextInstanceId]="course.id">
|
||||
</core-format-text>
|
||||
<span class="core-customfieldseparator">: </span>
|
||||
</span>
|
||||
<span class="core-customfieldvalue">
|
||||
<core-format-text [text]="field.value" [collapsible-item]="field.type == 'textarea' ? '' : null"
|
||||
contextLevel="course" [contextInstanceId]="course.id">
|
||||
</core-format-text>
|
||||
</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</div>
|
||||
</div>
|
||||
</core-loading>
|
||||
</ion-content>
|
||||
|
||||
<ion-footer *ngIf="course && dataLoaded">
|
||||
<ng-container *ngIf="canAccessCourse">
|
||||
<ion-button *ngFor="let item of courseMenuHandlers" (click)="openMenuItem(item)" [class]="'ion-text-wrap '+ item.data.class"
|
||||
expand="block">
|
||||
<ion-icon *ngIf="item.data.icon" [name]="item.data.icon" slot="start" aria-hidden="true"></ion-icon>
|
||||
<ion-label>{{item.data.title | translate }}</ion-label>
|
||||
<div class="list-item-limited-width">
|
||||
<ng-container *ngIf="canAccessCourse">
|
||||
<ion-button *ngFor="let item of courseMenuHandlers" (click)="openMenuItem(item)" [class]="'ion-text-wrap '+ item.data.class"
|
||||
expand="block">
|
||||
<ion-icon *ngIf="item.data.icon" [name]="item.data.icon" slot="start" aria-hidden="true"></ion-icon>
|
||||
<ion-label>{{item.data.title | translate }}</ion-label>
|
||||
</ion-button>
|
||||
</ng-container>
|
||||
|
||||
<ion-button expand="block" (click)="enrolMe()" *ngIf="!isEnrolled && (selfEnrolInstances.length > 0 || otherEnrolments)"
|
||||
class="ion-text-wrap">
|
||||
{{ 'core.courses.enrolme' | translate }}
|
||||
</ion-button>
|
||||
</ng-container>
|
||||
|
||||
<ion-button expand="block" (click)="enrolMe()" *ngIf="!isEnrolled && (selfEnrolInstances.length > 0 || otherEnrolments)"
|
||||
class="ion-text-wrap">
|
||||
{{ 'core.courses.enrolme' | translate }}
|
||||
</ion-button>
|
||||
<ion-card class="core-info-card ion-text-wrap" *ngIf="!isEnrolled && !selfEnrolInstances.length && !otherEnrolments">
|
||||
<ion-item>
|
||||
<ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
|
||||
<ion-label>{{ 'core.courses.notenrollable' | translate }}</ion-label>
|
||||
</ion-item>
|
||||
</ion-card>
|
||||
|
||||
<ion-card class="core-info-card ion-text-wrap" *ngIf="!isEnrolled && !selfEnrolInstances.length && !otherEnrolments">
|
||||
<ion-item>
|
||||
<ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
|
||||
<ion-label>{{ 'core.courses.notenrollable' | translate }}</ion-label>
|
||||
</ion-item>
|
||||
</ion-card>
|
||||
|
||||
<ion-button (click)="openCourse()" *ngIf="!isModal && canAccessCourse" expand="block" fill="outline" class="ion-text-wrap">
|
||||
<ion-icon name="fas-eye" slot="start" aria-hidden="true"></ion-icon>
|
||||
{{ 'core.course.viewcourse' | translate }}
|
||||
</ion-button>
|
||||
<ion-button (click)="openCourse()" *ngIf="!isModal && canAccessCourse" expand="block" fill="outline" class="ion-text-wrap">
|
||||
<ion-icon name="fas-eye" slot="start" aria-hidden="true"></ion-icon>
|
||||
{{ 'core.course.viewcourse' | translate }}
|
||||
</ion-button>
|
||||
</div>
|
||||
</ion-footer>
|
||||
|
|
|
|||
|
|
@ -39,11 +39,14 @@
|
|||
.course-container {
|
||||
position: relative;
|
||||
top: calc(var(--thumb-height) - var(--big-radius));
|
||||
border-radius: var(--big-radius) var(--big-radius) 0 0;
|
||||
background-color: var(--ion-background-color);
|
||||
box-shadow: var(--drop-shadow-top);
|
||||
clip-path: inset(-5px 0px 0px 0px);
|
||||
}
|
||||
|
||||
.course-name {
|
||||
border-radius: var(--big-radius) var(--big-radius) 0 0;
|
||||
box-shadow: var(--drop-shadow-top);
|
||||
--background: transparent;
|
||||
ion-label {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue