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

View File

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