MOBILE-3814 course: Add course header background color

main
Pau Ferrer Ocaña 2022-03-16 12:15:32 +01:00
parent 1819c743a6
commit 2887290c30
2 changed files with 24 additions and 19 deletions

View File

@ -16,24 +16,25 @@
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-item class="core-format-progress-list ion-text-wrap list-item-limited-width" collapsible>
<ng-container *ngIf="course">
<div *ngIf="!course.courseImage" #courseThumb slot="start" class="core-course-thumb">
<ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
</ion-icon>
</div>
<ion-avatar *ngIf="course.courseImage" slot="start" class="core-course-thumb">
<img [src]="course.courseImage" core-external-content alt="" />
</ion-avatar>
</ng-container>
<div class="core-course-header">
<ion-item class="core-format-progress-list ion-text-wrap list-item-limited-width" collapsible>
<ng-container *ngIf="course">
<div *ngIf="!course.courseImage" #courseThumb slot="start" class="core-course-thumb">
<ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
</ion-icon>
</div>
<ion-avatar *ngIf="course.courseImage" slot="start" class="core-course-thumb">
<img [src]="course.courseImage" core-external-content alt="" />
</ion-avatar>
</ng-container>
<ion-label>
<h1>{{ title }}</h1>
<div class="core-course-progress" *ngIf="progress !== undefined">
<core-progress-bar [progress]="progress" a11yText="core.course.aria:sectionprogress">
</core-progress-bar>
</div>
</ion-label>
</ion-item>
<ion-label>
<h1>{{ title }}</h1>
<div class="core-course-progress" *ngIf="progress !== undefined">
<core-progress-bar [progress]="progress" a11yText="core.course.aria:sectionprogress">
</core-progress-bar>
</div>
</ion-label>
</ion-item>
</div>
<core-tabs-outlet [tabs]="tabs" [hideUntil]="loaded" (ionChange)="tabSelected()"></core-tabs-outlet>

View File

@ -44,4 +44,8 @@
h1 {
font-size: 20px;
}
.core-course-header {
background: var(--ion-item-background);
}
}