EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3814 course: Limit width on course summary

main
Pau Ferrer Ocaña 2022-03-16 11:55:39 +01:00
parent aaa8ee3fc8
commit 8b3a07d224
2 changed files with 124 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/core/features/course/pages/course-summary/course-summary.html
View File

@ -23,6 +23,7 @@
</ion-icon>
</div>
<div *ngIf="course" class="course-container">
<div class="list-item-limited-width">
<ion-item class="ion-text-wrap course-name">
<ion-label>
<p *ngIf="course.displayname && course.shortname && course.fullname != course.displayname"
@ -38,7 +39,8 @@
<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 [text]="course.categoryname" contextLevel="coursecat"
[contextInstanceId]="course.categoryid">
</core-format-text>
</ion-label>
</ion-chip>
@ -125,10 +127,12 @@
</ion-label>
</ion-item>
</div>
</div>
</core-loading>
</ion-content>
<ion-footer *ngIf="course && dataLoaded">
<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">
@ -153,4 +157,5 @@
<ion-icon name="fas-eye" slot="start" aria-hidden="true"></ion-icon>
{{ 'core.course.viewcourse' | translate }}
</ion-button>
</div>
</ion-footer>

7
src/core/features/course/pages/course-summary/course-summary.scss
View File

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