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

MOBILE-3320 course: Position and style section nav buttons

main
Pau Ferrer Ocaña 2021-05-26 10:33:34 +02:00
parent 676d4f3edf
commit d0b6f42951
2 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -93,18 +93,19 @@
<ion-buttons class="ion-padding core-course-section-nav-buttons safe-padding-horizontal"
*ngIf="displaySectionSelector && sections?.length">
<ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)"
[attr.aria-label]="'core.previous' | translate">
<ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)" fill="outline"
[attr.aria-label]="('core.previous' | translate) + ': ' + previousSection.name">
<ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
<core-format-text class="accesshide" [text]="previousSection.name" contextLevel="course"
<core-format-text class="sr-only" [text]="previousSection.name" contextLevel="course"
[contextInstanceId]="course?.id">
</core-format-text>
</ion-button>
<ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" [attr.aria-label]="'core.next' | translate">
<ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
<core-format-text class="accesshide" [text]="nextSection.name" contextLevel="course"
<ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" fill="solid"
[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>
<ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
</ion-buttons>
</core-loading>

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

@ -58,4 +58,16 @@
}
}
.core-course-section-nav-buttons {
display: flex;
justify-content: flex-end;
core-format-text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-transform: none;
}
}
}