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

MOBILE-4616 course: Show availability section info in collapsed content

main
Pau Ferrer Ocaña 2024-10-22 16:25:48 +02:00
parent 258650a689
commit 6e2c3e4394
2 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/core/features/course/components/course-section/course-section.html
View File

@ -22,9 +22,11 @@
<ion-label class="ion-text-wrap"> <ion-label class="ion-text-wrap">
<h2 *ngIf="section.name" class="big" [id]="'core-section-name-' + section.id"> <h2 *ngIf="section.name" class="big" [id]="'core-section-name-' + section.id">
<core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id" /> <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id" />
<ion-icon *ngIf="section.availabilityinfo" name="fas-lock" [attr.aria-label]="'core.restricted' | translate" />
</h2> </h2>
<div *ngIf="section.visible === 0 && section.uservisible !== false"> <div *ngIf="section.visible === 0 && section.uservisible !== false">
<ion-badge color="warning"> <ion-badge color="secondary" class="ion-text-wrap">
<ion-icon name="far-eye-slash" aria-hidden="true" />
{{ 'core.course.hiddenfromstudents' | translate }} {{ 'core.course.hiddenfromstudents' | translate }}
</ion-badge> </ion-badge>
</div> </div>
@ -33,20 +35,22 @@
{{ 'core.notavailable' | translate }} {{ 'core.notavailable' | translate }}
</ion-badge> </ion-badge>
</div> </div>
<div *ngIf="section.availabilityinfo">
<ion-chip class="clickable">
<ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate" />
<ion-label>
<core-format-text [text]=" section.availabilityinfo" contextLevel="course" [contextInstanceId]="course.id" />
</ion-label>
</ion-chip>
</div>
</ion-label> </ion-label>
<ion-badge *ngIf="section.highlighted && highlightedName" slot="end">{{highlightedName}}</ion-badge> <ion-badge *ngIf="section.highlighted && highlightedName" slot="end">{{highlightedName}}</ion-badge>
</ion-item> </ion-item>
</ng-template> </ng-template>
<ng-template #sectionContent> <ng-template #sectionContent>
<ion-item class="ion-text-wrap section-summary" *ngIf="section.availabilityinfo">
<ion-label>
<ion-chip>
<ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate" />
<ion-label>
<core-format-text [text]="section.availabilityinfo" contextLevel="course" [contextInstanceId]="course.id" />
</ion-label>
</ion-chip>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap section-summary" *ngIf="section.summary"> <ion-item class="ion-text-wrap section-summary" *ngIf="section.summary">
<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" />

11
src/core/features/course/components/course-section/course-section.scss
View File

@ -1,6 +1,17 @@
@use "theme/globals" as *;
:host { :host {
.course-section { .course-section {
--inner-padding-end: var(--mdl-spacing-3); --inner-padding-end: var(--mdl-spacing-3);
ion-badge {
@include margin-horizontal(null, 4px);
font: var(--mdl-typography-body-font-sm);
}
h2 ion-icon {
@include margin-horizontal(4px, null);
}
} }
&.collapsible { &.collapsible {