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

MOBILE-3808 course: Improve section navigation buttons

main
Pau Ferrer Ocaña 2022-02-08 16:13:00 +01:00
parent 88e82350bf
commit d24f6cb5f2
2 changed files with 30 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/core/features/course/components/format/core-course-format.html
View File

@ -34,18 +34,18 @@
</div> </div>
<ion-buttons class="ion-padding core-course-section-nav-buttons safe-area-padding-horizontal" <ion-buttons class="ion-padding core-course-section-nav-buttons safe-area-padding-horizontal"
*ngIf="displayCourseIndex && sections?.length"> *ngIf="displayCourseIndex && (previousSection || nextSection)">
<ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)" fill="outline" color="primary" <ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)" color="primary" fill="solid" expand="block"
[attr.aria-label]="('core.previous' | translate) + ': ' + previousSection.name"> [attr.aria-label]="('core.previous' | translate) + ': ' + previousSection.name">
<ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon> <ion-icon name="fas-arrow-left" slot="start" aria-hidden="true"></ion-icon>
<core-format-text class="sr-only" [text]="previousSection.name" contextLevel="course" [contextInstanceId]="course.id"> <core-format-text [text]="previousSection.name" contextLevel="course" [contextInstanceId]="course.id">
</core-format-text> </core-format-text>
</ion-button> </ion-button>
<ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" fill="solid" color="primary" <ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" color="primary" fill="solid" expand="block"
[attr.aria-label]="('core.next' | translate) + ': ' + nextSection.name"> [attr.aria-label]="('core.next' | translate) + ': ' + nextSection.name">
<core-format-text class="sr-only" [text]="nextSection.name" contextLevel="course" [contextInstanceId]="course.id"> <core-format-text [text]="nextSection.name" contextLevel="course" [contextInstanceId]="course.id">
</core-format-text> </core-format-text>
<ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon> <ion-icon name="fas-arrow-right" slot="end" aria-hidden="true"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</core-loading> </core-loading>
@ -74,26 +74,32 @@
<core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id"> <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id">
</core-format-text> </core-format-text>
</h2> </h2>
<p *ngIf="section.visible === 0 || section.availabilityinfo || (section.highlighted && highlighted)"> <div *ngIf="section.visible === 0 && section.uservisible !== false">
<ion-badge color="info" *ngIf="section.visible === 0 && section.uservisible !== false" class="ion-text-wrap block"> <ion-chip>
<ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon> <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
{{ 'core.course.hiddenfromstudents' | translate }} <ion-label>{{ 'core.course.hiddenfromstudents' | translate }}</ion-label>
</ion-badge> </ion-chip>
<ion-badge color="info" *ngIf="section.visible === 0 && section.uservisible === false" class="ion-text-wrap block"> </div>
<div *ngIf="section.visible === 0 && section.uservisible === false">
<ion-chip>
<ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon> <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
{{ 'core.notavailable' | translate }} <ion-label>{{ 'core.notavailable' | translate }}</ion-label>
</ion-badge> </ion-chip>
<ion-badge color="info" *ngIf="section.availabilityinfo" class="ion-text-wrap block"> </div>
<div *ngIf="section.availabilityinfo">
<ion-chip>
<ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon> <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
<core-format-text [text]=" section.availabilityinfo" contextLevel="course" [contextInstanceId]="course.id"> <ion-label>
</core-format-text> <core-format-text [text]=" section.availabilityinfo" contextLevel="course" [contextInstanceId]="course.id">
</ion-badge> </core-format-text>
</p> </ion-label>
</ion-chip>
</div>
</ion-label> </ion-label>
<ion-badge class="ion-text-wrap block" *ngIf="section.highlighted && highlighted" slot="end">{{highlighted}}</ion-badge> <ion-badge *ngIf="section.highlighted && highlighted" slot="end">{{highlighted}}</ion-badge>
</ion-item-divider> </ion-item-divider>
<ion-item class="ion-text-wrap" *ngIf="section.summary"> <ion-item class="ion-text-wrap" *ngIf="section.summary" lines="none">
<ion-label> <ion-label>
<core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="course.id"> <core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="course.id">
</core-format-text> </core-format-text>

11
src/core/features/course/components/format/format.scss
View File

@ -1,17 +1,12 @@
.core-course-section-nav-buttons { .core-course-section-nav-buttons {
display: flex; display: flex;
justify-content: flex-end; justify-content: space-between;
core-format-text { ion-button {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
text-transform: none; text-transform: none;
} flex: 1;
}
.course-section {
ion-badge {
text-align: start;
} }
} }