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

MOBILE-3814 course: Show highlighted border on section

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2022-03-04 13:35:32 +01:00
parent fa81717ccf
commit feb4785ba0
2 changed files with 55 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/core/features/course/components/course-index/course-index.html
View File

@ -24,8 +24,8 @@
</ion-item> </ion-item>
<ng-container *ngIf="allSectionId != section.id"> <ng-container *ngIf="allSectionId != section.id">
<ion-item class="divider section" (click)="selectSectionOrModule($event, section.id)" button <ion-item class="divider section" (click)="selectSectionOrModule($event, section.id)" button
[class.item-current]="selectedId === section.id" [class.item-dimmed]="section.visible === 0" detail="false" [class.item-current]="selectedId === section.id" [class.item-dimmed]="section.visible === 0"
sticky="true"> [class.item-hightlighted]="section.highlighted" detail="false" sticky="true">
<ion-icon *ngIf="section.hasVisibleModules" name="fas-chevron-right" flip-rtl slot="start" <ion-icon *ngIf="section.hasVisibleModules" name="fas-chevron-right" flip-rtl slot="start"
class="expandable-status-icon" (click)="toggleExpand($event, section)" class="expandable-status-icon" (click)="toggleExpand($event, section)"
[attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate" [attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
@ -46,7 +46,7 @@
</ion-item> </ion-item>
<ng-container *ngIf="section.expanded"> <ng-container *ngIf="section.expanded">
<ng-container *ngFor="let module of section.modules"> <ng-container *ngFor="let module of section.modules">
<ion-item class="module" [class.item-dimmed]="!module.visible" <ion-item class="module" [class.item-dimmed]="!module.visible" [class.item-hightlighted]="section.highlighted"
(click)="selectSectionOrModule($event, section.id, module.id)" button> (click)="selectSectionOrModule($event, section.id, module.id)" button>
<ion-icon class="completioninfo completion_none" name="" *ngIf="module.completionStatus === undefined" <ion-icon class="completioninfo completion_none" name="" *ngIf="module.completionStatus === undefined"
slot="start" aria-hidden="true"></ion-icon> slot="start" aria-hidden="true"></ion-icon>

64
src/core/features/course/components/course-index/course-index.scss
View File

@ -11,41 +11,24 @@ core-progress-bar {
} }
} }
ion-icon.completioninfo { ion-item.item {
font-size: 10px; &.core-course-index-all::part(native) {
width: 18px;
}
ion-item.module::part(native) {
--padding-start: 0;
}
ion-item.module ion-icon {
margin: 0;
@include padding(12px, 16px, 12px, 16px);
}
ion-item.core-course-index-all::part(native) {
--padding-start: 16px; --padding-start: 16px;
} }
ion-item.item.item-current { &.item-current {
--background: var(--primary-tint); --background: var(--primary-tint);
border: 0; border: 0;
} }
ion-icon.restricted { &.item-hightlighted {
font-size: 14px; @include safe-area-border-start(var(--selected-item-border-width), solid, var(--selected-item-color));
} }
ion-item.item.divider.section { &.divider.section {
--padding-start: 0px; --padding-start: 0px;
&.item-current { &.item-current {
ion-badge {
border: 1px solid var(--primary-contrast);
}
ion-icon.expandable-status-icon { ion-icon.expandable-status-icon {
color: var(--primary-contrast); color: var(--primary-contrast);
@ -63,4 +46,33 @@ ion-item.item.divider.section {
background: var(--gray-300); background: var(--gray-300);
} }
} }
&.item-hightlighted ion-icon.expandable-status-icon {
@include margin-horizontal(-2px, null);
}
}
&.module {
&::part(native) {
--padding-start: 0;
}
&.item-hightlighted ion-icon.completioninfo {
@include padding-horizontal(11px, null);
}
}
ion-icon {
margin: 0;
padding: 12px 16px;
&.completioninfo {
font-size: 10px;
width: 18px;
}
&.restricted {
font-size: 14px;
}
}
} }