MOBILE-3814 course: Add course header background color
parent
1819c743a6
commit
2887290c30
|
@ -16,24 +16,25 @@
|
||||||
</ion-buttons>
|
</ion-buttons>
|
||||||
</ion-toolbar>
|
</ion-toolbar>
|
||||||
</ion-header>
|
</ion-header>
|
||||||
<ion-item class="core-format-progress-list ion-text-wrap list-item-limited-width" collapsible>
|
<div class="core-course-header">
|
||||||
<ng-container *ngIf="course">
|
<ion-item class="core-format-progress-list ion-text-wrap list-item-limited-width" collapsible>
|
||||||
<div *ngIf="!course.courseImage" #courseThumb slot="start" class="core-course-thumb">
|
<ng-container *ngIf="course">
|
||||||
<ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
|
<div *ngIf="!course.courseImage" #courseThumb slot="start" class="core-course-thumb">
|
||||||
</ion-icon>
|
<ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
|
||||||
</div>
|
</ion-icon>
|
||||||
<ion-avatar *ngIf="course.courseImage" slot="start" class="core-course-thumb">
|
</div>
|
||||||
<img [src]="course.courseImage" core-external-content alt="" />
|
<ion-avatar *ngIf="course.courseImage" slot="start" class="core-course-thumb">
|
||||||
</ion-avatar>
|
<img [src]="course.courseImage" core-external-content alt="" />
|
||||||
</ng-container>
|
</ion-avatar>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
<ion-label>
|
<ion-label>
|
||||||
<h1>{{ title }}</h1>
|
<h1>{{ title }}</h1>
|
||||||
<div class="core-course-progress" *ngIf="progress !== undefined">
|
<div class="core-course-progress" *ngIf="progress !== undefined">
|
||||||
<core-progress-bar [progress]="progress" a11yText="core.course.aria:sectionprogress">
|
<core-progress-bar [progress]="progress" a11yText="core.course.aria:sectionprogress">
|
||||||
</core-progress-bar>
|
</core-progress-bar>
|
||||||
</div>
|
</div>
|
||||||
</ion-label>
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
</ion-item>
|
</div>
|
||||||
<core-tabs-outlet [tabs]="tabs" [hideUntil]="loaded" (ionChange)="tabSelected()"></core-tabs-outlet>
|
<core-tabs-outlet [tabs]="tabs" [hideUntil]="loaded" (ionChange)="tabSelected()"></core-tabs-outlet>
|
||||||
|
|
|
@ -44,4 +44,8 @@
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.core-course-header {
|
||||||
|
background: var(--ion-item-background);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue