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

MOBILE-3814 course: Adapt course styles

main
Pau Ferrer Ocaña 2022-02-10 10:50:51 +01:00
parent 492278be00
commit f61a465c0a
16 changed files with 135 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,7 @@
<ion-content>
<ion-list id="core-course-section-selector" role="listbox" aria-labelledby="core-course-section-selector-label">
<ng-container *ngFor="let section of sectionsToRender">
<ion-item *ngIf="allSectionId == section.id" class="ion-text-wrap divider core-course-index-all"
<ion-item *ngIf="allSectionId == section.id" class="divider core-course-index-all"
(click)="selectSectionOrModule($event, section.id)" button [class.item-current]="selectedId === section.id" detail="false">
<ion-label>
<h2>
@ -23,7 +23,7 @@
</ion-label>
</ion-item>
<ng-container *ngIf="allSectionId != section.id">
<ion-item class="ion-text-wrap 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"
sticky="true">
<ion-icon *ngIf="section.hasVisibleModules" [name]="section.expanded ? 'fas-chevron-down' : 'fas-chevron-right'"

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

@ -22,15 +22,25 @@ ion-item::part(native) {
ion-icon {
margin: 0;
@include padding(12px, 32px, 12px, 16px);
@include padding(12px, 16px, 12px, 16px);
}
ion-item.core-course-index-all::part(native) {
--padding-start: 16px;
}
ion-item.item-current ion-icon.expandable-status-icon {
@include padding(null, null, null, 11px);
ion-item.item.item-current {
--background: var(--primary);
--color: var(--primary-contrast);
border: 0;
ion-badge {
border: 1px solid var(--primary-contrast);
}
::ng-deep ion-icon {
color: var(--primary-contrast);
}
}
ion-icon.restricted {

12
src/core/features/course/components/course-index/course-index.ts
View File

@ -23,7 +23,6 @@ import { CoreCourseFormatDelegate } from '@features/course/services/format-deleg
import { CoreCourseAnyCourseData } from '@features/courses/services/courses';
import { IonContent } from '@ionic/angular';
import { CoreDomUtils } from '@services/utils/dom';
import { CoreUtils } from '@services/utils/utils';
import { ModalController } from '@singletons';
/**
@ -62,12 +61,11 @@ export class CoreCourseCourseIndexComponent implements OnInit {
}
let completionEnabled = !!this.course.enablecompletion;
if (completionEnabled && 'courseformatoptions' in this.course && this.course.courseformatoptions) {
const formatOptions = CoreUtils.objectToKeyValueMap(this.course.courseformatoptions, 'name', 'value');
if (formatOptions) {
completionEnabled = !!formatOptions.completionusertracked;
}
if (completionEnabled && 'completionusertracked' in this.course && this.course.completionusertracked !== undefined) {
completionEnabled = this.course.completionusertracked;
}
if (completionEnabled && 'showcompletionconditions' in this.course && this.course.showcompletionconditions !== undefined) {
completionEnabled = this.course.showcompletionconditions;
}
const currentSection = await CoreCourseFormatDelegate.getCurrentSection(this.course, this.sections);

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

@ -20,7 +20,7 @@
</ion-item>
<ng-content select="[description]"></ng-content>
<ion-item class="ion-text-wrap core-module-dates" *ngIf="showCompletion && (module.dates?.length ||
<ion-item class="ion-text-wrap" *ngIf="showCompletion && (module.dates?.length ||
(module.completiondata && module.completiondata.isautomatic && module.uservisible))">
<ion-label>
<!-- Activity dates. -->

10
src/core/features/course/components/module-info/course-module-info.scss
View File

@ -16,8 +16,14 @@
align-self: flex-start;
}
.core-module-dates ion-icon {
@include margin-horizontal(null, 8px);
.core-module-dates {
background: var(--light);
border-radius: var(--small-radius);
padding: 8px;
ion-icon {
@include margin-horizontal(null, 8px);
}
}
}

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

@ -3,7 +3,6 @@
<ion-item id="core-course-module-{{module.id}}" detail="false"
class="ion-text-wrap core-course-module-handler core-module-main-item {{module.handlerData.class}}"
(click)="moduleClicked($event)" [attr.aria-label]="module.handlerData.a11yTitle" [ngClass]="{
'has-module-info': hasInfo,
'item-media': module.handlerData.icon,
'item-dimmed': module.visible === 0 || module.uservisible === false
}" [button]="module.handlerData.action && module.uservisible">
@ -19,24 +18,26 @@
</core-format-text>
</p>
<!-- Basic module completion. -->
<core-course-module-completion *ngIf="module.completiondata && module.uservisible" [completion]="module.completiondata"
[moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions"
[showManualCompletion]="showManualCompletion" (completionChanged)="completionChanged.emit($event)" mode="basic">
</core-course-module-completion>
<div class="core-module-additional-info">
<!-- Basic module completion. -->
<core-course-module-completion *ngIf="module.completiondata && module.uservisible" [completion]="module.completiondata"
[moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions"
[showManualCompletion]="showManualCompletion" (completionChanged)="completionChanged.emit($event)" mode="basic">
</core-course-module-completion>
<ion-chip *ngIf="module.handlerData.extraBadge" [color]="module.handlerData.extraBadgeColor"
class="ion-text-wrap ion-text-start" [outline]="true">
<ion-label><span [innerHTML]="module.handlerData.extraBadge"></span></ion-label>
</ion-chip>
<ion-chip *ngIf="module.handlerData.extraBadge" [color]="module.handlerData.extraBadgeColor"
class="ion-text-wrap ion-text-start" [outline]="true">
<ion-label><span [innerHTML]="module.handlerData.extraBadge"></span></ion-label>
</ion-chip>
<!-- Hidden badges -->
<ion-badge color="warning" *ngIf="module.visible === 0 && (!section || section.visible)">
{{ 'core.course.hiddenfromstudents' | translate }}
</ion-badge>
<ion-badge color="warning" *ngIf="module.visible !== 0 && module.isStealth">
{{ 'core.course.hiddenoncoursepage' | translate }}
</ion-badge>
<!-- Hidden badges -->
<ion-badge color="warning" *ngIf="module.visible === 0 && (!section || section.visible)">
{{ 'core.course.hiddenfromstudents' | translate }}
</ion-badge>
<ion-badge color="warning" *ngIf="module.visible !== 0 && module.isStealth">
{{ 'core.course.hiddenoncoursepage' | translate }}
</ion-badge>
</div>
</ion-label>
<!-- Buttons. -->
<div slot="end" *ngIf="module.uservisible !== false" class="buttons core-module-buttons"
@ -72,24 +73,24 @@
[moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions">
</core-course-module-completion>
<!-- Activity dates. -->
<div *ngIf="showActivityDates && module.dates && module.dates.length" class="core-module-dates">
<p *ngFor="let date of module.dates">
<ion-icon name="fas-calendar" aria-hidden="true"></ion-icon><strong>{{ date.label }}</strong> {{ date.timestamp *
1000 | coreFormatDate:'strftimedatetime' }}
</p>
</div>
<div class="core-module-dates-availabilityinfo"
*ngIf="(showActivityDates && module.dates && module.dates.length) || module.availabilityinfo">
<!-- Activity dates. -->
<div *ngIf="showActivityDates && module.dates && module.dates.length" class="core-module-dates">
<p *ngFor="let date of module.dates">
<ion-icon name="fas-calendar" aria-hidden="true"></ion-icon><strong>{{ date.label }}</strong> {{ date.timestamp
*
1000 | coreFormatDate:'strftimedatetime' }}
</p>
</div>
<!-- Availability info -->
<div *ngIf="module.availabilityinfo">
<ion-chip class="core-module-availabilityinfo">
<!-- Availability info -->
<div *ngIf="module.availabilityinfo" class="core-module-availabilityinfo">
<ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
<ion-label>
<core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
[courseId]="module.course">
</core-format-text>
</ion-label>
</ion-chip>
<core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
[courseId]="module.course">
</core-format-text>
</div>
</div>
</ion-label>

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

@ -35,13 +35,29 @@
.core-module-buttons core-course-module-completion {
text-align: center;
}
.core-module-additional-info {
display: flex;
align-items: center;
}
}
.core-course-module-info {
.core-module-dates-availabilityinfo {
background: var(--light);
border-radius: var(--small-radius);
padding: 8px;
}
.core-module-dates + .core-module-availabilityinfo {
border-top: 1px solid var(--stroke);
padding-top: 8px;
}
.core-module-availabilityinfo {
font-size: 90%;
ul {
margin-block-start: 0.5em;
::ng-deep ul {
margin-top: 0.5em;
}
}
}
@ -57,10 +73,6 @@
margin-top: 0px;
}
.core-module-main-item.has-module-info {
--inner-border-width: 0px;
}
.core-module-availabilityinfo ion-icon,
.core-module-dates ion-icon {
@include margin-horizontal(null, 8px);

55
src/core/features/course/pages/module-preview/module-preview.html
View File

@ -27,38 +27,39 @@
<core-course-module-info [module]="module" [courseId]="courseId" [description]="module.description" [component]="module.modname"
[componentId]="module.id" [expandDescription]="true">
<div class="ion-padding" *ngIf="module.handlerData?.extraBadge">
<ion-chip *ngIf="module.handlerData?.extraBadge" [color]="module.handlerData?.extraBadgeColor"
class="ion-text-wrap ion-text-start" [outline]="true">
<ion-label><span [innerHTML]="module.handlerData?.extraBadge"></span></ion-label>
</ion-chip>
</div>
<ion-item class="ion-text-wrap" *ngIf="module.handlerData?.extraBadge ||
(module.visible === 0 && (!section || section.visible)) ||
(module.visible !== 0 && module.isStealth) ||
module.availabilityinfo">
<ion-label>
<div class="ion-padding" *ngIf="module.handlerData?.extraBadge">
<ion-chip *ngIf="module.handlerData?.extraBadge" [color]="module.handlerData?.extraBadgeColor"
class="ion-text-wrap ion-text-start" [outline]="true">
<ion-label><span [innerHTML]="module.handlerData?.extraBadge"></span></ion-label>
</ion-chip>
</div>
<!-- Hidden badges -->
<div *ngIf="module.visible === 0 && (!section || section.visible)">
<ion-chip color="warning">
<ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
<ion-label>{{ 'core.course.hiddenfromstudents' | translate }}</ion-label>
</ion-chip>
</div>
<div *ngIf="module.visible !== 0 && module.isStealth">
<ion-chip color="warning">
<ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
<ion-label>{{ 'core.course.hiddenoncoursepage' | translate }}</ion-label>
</ion-chip>
</div>
<!-- Hidden badges -->
<div *ngIf="module.visible === 0 && (!section || section.visible)">
<ion-badge color="warning">
{{ 'core.course.hiddenfromstudents' | translate }}
</ion-badge>
</div>
<div *ngIf="module.visible !== 0 && module.isStealth">
<ion-badge color="warning">
{{ 'core.course.hiddenoncoursepage' | translate }}
</ion-badge>
</div>
<!-- Availability info -->
<div *ngIf="module.availabilityinfo">
<ion-chip class="core-module-availabilityinfo">
<ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
<ion-label>
<!-- Availability info -->
<div *ngIf="module.availabilityinfo" class="core-module-availabilityinfo">
<ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
<core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
[courseId]="module.course">
</core-format-text>
</ion-label>
</ion-chip>
</div>
</div>
</ion-label>
</ion-item>
<core-course-unsupported-module *ngIf="unsupported" [module]="module" [courseId]="courseId"></core-course-unsupported-module>
</core-course-module-info>

1
src/core/features/course/pages/module-preview/module-preview.page.ts
View File

@ -27,6 +27,7 @@ import { CoreUtils } from '@services/utils/utils';
@Component({
selector: 'page-core-course-module-preview',
templateUrl: 'module-preview.html',
styleUrls: ['module-preview.scss'],
})
export class CoreCourseModulePreviewPage implements OnInit {

15
src/core/features/course/pages/module-preview/module-preview.scss 100644
View File

@ -0,0 +1,15 @@
@import "~theme/globals";
.core-module-availabilityinfo {
background: var(--light);
border-radius: var(--small-radius);
padding: 8px;
font-size: 90%;
::ng-deep ul {
margin-top: 0.5em;
}
ion-icon {
@include margin-horizontal(null, 8px);
}
}

2
src/core/features/courses/components/course-list-item/course-list-item.ts
View File

@ -160,7 +160,7 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
const tint = CoreColors.lighter(this.course.color, 50);
this.element.style.setProperty('--course-color-tint', tint);
} else {
} else if(this.course.colorNumber !== undefined) {
this.element.classList.add('course-color-' + this.course.colorNumber);
}
}

1
src/core/features/courses/pages/my/my.scss
View File

@ -13,6 +13,7 @@
core-block ::ng-deep ion-card.addon-block-myoverview {
--border-width: 0;
--background: transparent;
}
@if ($core-dashboard-logo) {

1
src/core/features/sitehome/pages/index/index.scss
View File

@ -5,6 +5,7 @@ ion-item ion-icon {
border-radius: var(--module-icon-radius);
padding: 0.7rem;
background-color: var(--gray-100);
color: var(--gray-900);
line-height: var(--size);
--margin-end: 1rem;
@include margin-horizontal(null, var(--margin-end));

2
src/theme/globals.variables.scss
View File

@ -36,7 +36,7 @@ $background-color-dark-rgb: color-to-rgb-list($background-color-dark) !default;
$ion-item-background: $white !default;
$ion-item-background-rgb: color-to-rgb-list($ion-item-background) !default;
$ion-item-background-dark: mix(#ffffff, #000000, 20%) !default; // #333333
$ion-item-background-dark: $gray-900 !default;
$ion-item-background-dark-rgb: color-to-rgb-list($ion-item-background-dark) !default;
$primary: $blue !default;

4
src/theme/theme.base.scss
View File

@ -415,8 +415,9 @@ ion-alert {
}
// Ionic list.
ion-list.list-md {
ion-list {
padding: 0;
--ion-item-background: transparent;
}
// Safe areas
@ -1249,7 +1250,6 @@ ion-item.item-input ion-input.has-focus {
ion-item-divider.item,
ion-item.item.divider {
--inner-padding-end: 8px;
background: var(--background);
min-height: var(--min-height);
border-bottom-width: var(--item-divider-border-width);
--border-width: var(--item-divider-border-width);

7
src/theme/theme.dark.scss
View File

@ -76,12 +76,13 @@
--core-progressbar-text-color: var(--gray-100);
--ion-item-background: #{$ion-item-background-dark};
--ion-item-detail-icon-color: var(--white);
--item-divider-background: var(--ion-item-background);
--item-divider-color: var(--text-color);
--spacer-background: var(--gray-100);
--spacer-background: var(--gray-700);
--core-combobox-background: var(--ion-item-background);
--core-combobox-color: var(--white);
--core-combobox-color: var(--gray-100);
--core-combobox-border-color: var(--stroke);
--core-login-background: var(--gray-900);
--core-login-text-color: var(--white);