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

MOBILE-3749 course: Divide module in two ion-items

main
Pau Ferrer Ocaña 2021-05-10 12:19:59 +02:00
parent abd722396b
commit a8c40ff1d0
4 changed files with 122 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/core/features/course/components/module-completion/core-course-module-completion.html
View File

@ -1,3 +1,9 @@
<button *ngIf="completion" (click)="completionClicked($event)" [title]="completionDescription"> <img *ngIf="completion && completion.tracking !== 1" [src]="completionImage" [alt]="completionDescription">
<ion-button
fill="clear"
*ngIf="completion && completion.tracking === 1"
(click)="completionClicked($event)"
[title]="completionDescription">
<img [src]="completionImage" role="presentation" alt=""> <img [src]="completionImage" role="presentation" alt="">
</button> </ion-button>

25
src/core/features/course/components/module-completion/module-completion.scss
View File

@ -1,13 +1,20 @@
:host { :host {
button { min-width: var(--a11y-min-target-size);
display: block; min-height: var(--a11y-min-target-size);
background-color: transparent; --size: 30px;
img { img {
padding: 5px; padding: 5px;
width: 30px; width: var(--size);
vertical-align: middle; vertical-align: middle;
max-width: none; max-width: none;
} margin: 7px;
}
ion-button {
--padding-top: 0;
--padding-start: 0;
--padding-end: 0;
--padding-bottom: 0;
} }
} }

130
src/core/features/course/components/module/core-course-module.html
View File

@ -1,22 +1,57 @@
<ion-item *ngIf="module && module.handlerData && module.visibleoncoursepage !== 0 && !module.handlerData.loading" <ng-container *ngIf="module.handlerData && module.visibleoncoursepage !== 0">
id="core-course-module-{{module.id}}" class="ion-text-wrap core-course-module-handler {{module.handlerData.class}}" <ng-container *ngIf="!module.handlerData.loading">
(click)="moduleClicked($event)" [attr.aria-label]="module.handlerData.a11yTitle" detail="false" <ion-item
[ngClass]="{'item-media': module.handlerData.icon, 'item-dimmed': module.visible === 0 || module.uservisible === false, id="core-course-module-{{module.id}}"
'core-not-clickable': !module.handlerData.action || module.uservisible === false}" class="ion-text-wrap core-course-module-handler core-module-main-item {{module.handlerData.class}}"
[button]="module.handlerData.action || module.uservisible"> (click)="moduleClicked($event)"
[attr.aria-label]="module.handlerData.a11yTitle"
[ngClass]="{
'has-module-description': module.description,
'item-media': module.handlerData.icon,
'item-dimmed': module.visible === 0 || module.uservisible === false
}"
[button]="module.handlerData.action && module.uservisible"
detail="false">
<img slot="start" *ngIf="module.handlerData.icon" [src]="module.handlerData.icon" [alt]="modNameTranslated" <img slot="start" *ngIf="module.handlerData.icon" [src]="module.handlerData.icon" [alt]="modNameTranslated"
class="core-module-icon"> class="core-module-icon">
<ion-label>
<div class="core-module-title">
<core-format-text [text]="module.handlerData.title" contextLevel="module" [contextInstanceId]="module.id"
[courseId]="courseId" [attr.aria-label]="module.handlerData.a11yTitle + ', ' + modNameTranslated">
</core-format-text>
<ion-label class="core-module-title">
<h2>
<core-format-text [text]="module.handlerData.title" contextLevel="module" [contextInstanceId]="module.id"
[courseId]="courseId" [attr.aria-label]="module.handlerData.a11yTitle + ', ' + modNameTranslated">
</core-format-text>
</h2>
<ion-badge
*ngIf="module.handlerData.extraBadge"
[color]="module.handlerData.extraBadgeColor"
class="ion-text-wrap ion-text-start"
>
<span [innerHTML]="module.handlerData.extraBadge"></span>
</ion-badge>
<ion-badge *ngIf="module.visible === 0 && (!section || section.visible)" class="ion-text-wrap">
{{ 'core.course.hiddenfromstudents' | translate }}
</ion-badge>
<ion-badge *ngIf="module.visible !== 0 && module.isStealth" class="ion-text-wrap">
{{ 'core.course.hiddenoncoursepage' | translate }}
</ion-badge>
<div class="core-module-availabilityinfo" *ngIf="module.availabilityinfo">
<ion-badge class="ion-text-wrap">{{ 'core.restricted' | translate }}</ion-badge>
<core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
[courseId]="courseId" class="ion-text-wrap">
</core-format-text>
</div>
<ion-badge *ngIf="module.completiondata?.offline" color="warning" class="ion-text-wrap">
{{ 'core.course.manualcompletionnotsynced' | translate }}
</ion-badge>
</ion-label>
<!-- Buttons. --> <!-- Buttons. -->
<div slot="end" *ngIf="module.uservisible !== false" class="buttons core-module-buttons" <div
[ngClass]="{'core-button-completion': module.completiondata}"> slot="end"
*ngIf="module.uservisible !== false"
class="buttons core-module-buttons"
[ngClass]="{'core-button-completion': module.completiondata}"
>
<!-- Module completion. --> <!-- Module completion. -->
<core-course-module-completion *ngIf="module.completiondata" [completion]="module.completiondata" <core-course-module-completion *ngIf="module.completiondata" [completion]="module.completiondata"
[moduleName]="module.name" [moduleId]="module.id" (completionChanged)="completionChanged.emit($event)"> [moduleName]="module.name" [moduleId]="module.id" (completionChanged)="completionChanged.emit($event)">
@ -37,39 +72,34 @@
</ion-button> </ion-button>
</div> </div>
</div> </div>
</div> </ion-item>
<ion-item
<div class="core-module-more-info"> *ngIf="module.description"
<ion-badge slot="end" *ngIf="module.handlerData.extraBadge" [color]="module.handlerData.extraBadgeColor" id="core-course-module-{{module.id}}-info"
class="ion-text-wrap ion-text-start"> class="ion-text-wrap core-course-module-handler core-module-module-description {{module.handlerData.class}}"
<span [innerHTML]="module.handlerData.extraBadge"></span> [ngClass]="{
</ion-badge> 'item-media': module.handlerData.icon,
<ion-badge slot="end" *ngIf="module.visible === 0 && (!section || section.visible)" class="ion-text-wrap"> 'item-dimmed': module.visible === 0 || module.uservisible === false
{{ 'core.course.hiddenfromstudents' | translate }} }"
</ion-badge> detail="false"
<ion-badge slot="end" *ngIf="module.visible !== 0 && module.isStealth" class="ion-text-wrap"> >
{{ 'core.course.hiddenoncoursepage' | translate }} <ion-label>
</ion-badge> <core-format-text class="core-module-description" *ngIf="module.description" maxHeight="80" [text]="module.description"
<div class="core-module-availabilityinfo" *ngIf="module.availabilityinfo" slot="end"> contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
<ion-badge class="ion-text-wrap">{{ 'core.restricted' | translate }}</ion-badge>
<core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
[courseId]="courseId" class="ion-text-wrap">
</core-format-text> </core-format-text>
</div> </ion-label>
<ion-badge slot="end" *ngIf="module.completiondata?.offline" color="warning" class="ion-text-wrap"> </ion-item>
{{ 'core.course.manualcompletionnotsynced' | translate }} </ng-container>
</ion-badge>
</div>
<core-format-text class="core-module-description" *ngIf="module.description" maxHeight="80" [text]="module.description" <!-- Loading. -->
contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"> <ion-item *ngIf="module.handlerData.loading"
</core-format-text> role="status"
</ion-label> class="ion-text-wrap"
</ion-item> id="core-course-module-{{module.id}}"
[attr.aria-label]="module.handlerData.a11yTitle"
<!-- Loading. --> [ngClass]="['core-course-module-handler', 'core-module-loading', module.handlerData.class]"
<ion-item *ngIf="module && module.handlerData && module.visibleoncoursepage !== 0 && module.handlerData.loading" role="status" detail="false"
class="ion-text-wrap" id="core-course-module-{{module.id}}" [attr.aria-label]="module.handlerData.a11yTitle" >
[ngClass]="['core-course-module-handler', 'core-module-loading', module.handlerData.class]" detail="false"> <ion-label><ion-spinner></ion-spinner></ion-label>
<ion-label><ion-spinner></ion-spinner></ion-label> </ion-item>
</ion-item> </ng-container>

134
src/core/features/course/components/module/module.scss
View File

@ -1,45 +1,10 @@
:host { :host {
// @todo Review commented styles.
background: white; .item.core-module-main-item {
display: block; --min-height: 52px;
.item.core-course-module-handler {
align-items: flex-start;
min-height: 52px;
cursor: pointer;
// &.item .item-inner {
// @include safe-area-padding(null, 0px, null, null);
// }
// .label {
// @include margin(0, 0, 0, null);
// }
.core-module-icon {
align-items: flex-start;
width: 24px;
height: 24px;
margin-top: 11px;
}
// &.item-ios:active,
// &.item-ios.activated {
// background-color: $list-ios-activated-background-color;
// }
// &.item-md:active,
// &.item-md.activated {
// background-color: $list-md-activated-background-color;
// }
} }
.core-module-title { .core-module-main-item {
display: flex;
flex-flow: row;
align-items: flex-start;
core-format-text {
flex-grow: 2;
}
.core-module-buttons, .core-module-buttons,
.buttons.core-module-buttons { .buttons.core-module-buttons {
margin: 0; margin: 0;
@ -66,10 +31,10 @@
} }
} }
.core-module-more-info { .core-module-module-description {
// ion-badge { ion-badge {
// @include text-align('start'); text-align: start;
// } }
.core-module-availabilityinfo { .core-module-availabilityinfo {
font-size: 90%; font-size: 90%;
@ -79,86 +44,23 @@
} }
} }
.core-not-clickable {
cursor: initial;
// &:active,
// &.activated {
// background-color: $list-background-color;
// }
}
.core-module-loading { .core-module-loading {
width: 100%; width: 100%;
text-align: center; text-align: center;
padding-top: 10px; padding-top: 10px;
clear: both; clear: both;
// @include darkmode() {
// color: $core-dark-text-color;
// }
} }
// @include darkmode() { .core-module-main-item + .core-module-module-description ion-label {
// .item.core-course-module-handler { margin-top: 0px;
// background: $core-dark-item-bg-color; }
// &.item-ios:active,
// &.item-ios.activated, .core-module-main-item.has-module-description {
// &.item-md:active, --inner-border-width: 0;
// &.item-md.activated { }
// background-color: $core-dark-background-color;
// } .core-module-module-description ion-label {
// } margin-inline-start: 50px;
}
// .core-not-clickable:active,
// .core-not-clickable.activated {
// background-color: $core-dark-item-bg-color;
// }
// }
} }
// ion-app.app-root.md core-course-module {
// .core-module-description {
// @include padding(null, $label-md-margin-end, null, null);
// margin-bottom: $label-md-margin-bottom;
// .core-show-more {
// @include padding(null, $label-md-margin-end, null, null);
// }
// }
// .core-module-title core-format-text {
// padding-top: $label-md-margin-top + 3;
// }
// .button-md {
// margin-top: 8px;
// margin-bottom: 8px;
// }
// .core-module-buttons-more {
// min-height: 52px;
// min-width: 53px;
// }
// }
// ion-app.app-root.ios core-course-module {
// .core-module-description {
// @include padding(null, $label-ios-margin-end, null, null);
// margin-bottom: $label-md-margin-bottom;
// .core-show-more {
// @include padding(null, $label-ios-margin-end, null, null);
// }
// }
// .core-module-title core-format-text {
// padding-top: $label-ios-margin-top + 3;
// }
// .core-module-buttons-more {
// min-height: 53px;
// min-width: 58px;
// }
// }
// ion-app.app-root .core-course-module-handler.item [item-start] + .item-inner {
// @include margin-horizontal(4px, null);
// }