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

Merge pull request #1654 from crazyserver/MOBILE-2773 

Mobile 2773
main
Juan Leyva 2018-12-11 12:52:50 +01:00 committed by GitHub
parent e8a85c8f3f 4af45f06bc
commit 0c9545a7f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 171 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html
View File

@ -7,6 +7,14 @@
<ion-item-divider color="light">
<h2>{{ 'addon.block_myoverview.pluginname' | translate }}</h2>
<!-- Download all courses. -->
<div *ngIf="downloadAllCoursesEnabled && courses[selectedFilter] && courses[selectedFilter].length > 1" class="core-button-spinner" item-end>
<button *ngIf="prefetchCoursesData[selectedFilter].icon && prefetchCoursesData[selectedFilter].icon != 'spinner'" ion-button icon-only clear color="dark" (click)="prefetchCourses()">
<core-icon [name]="prefetchCoursesData[selectedFilter].icon"></core-icon>
</button>
<ion-badge class="core-course-download-courses-progress" *ngIf="prefetchCoursesData[selectedFilter].badge">{{prefetchCoursesData[selectedFilter].badge}}</ion-badge>
<ion-spinner *ngIf="!prefetchCoursesData[selectedFilter].icon || prefetchCoursesData[selectedFilter].icon == 'spinner'"></ion-spinner>
</div>
</ion-item-divider>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<div padding ion-row justify-content-end [hidden]="showFilter" class="safe-padding-horizontal">
@ -28,14 +36,6 @@
<ion-option value="lastaccess">{{ 'addon.block_myoverview.lastaccessed' | translate }}</ion-option>
</ion-select>
</ion-col>
<!-- Download all courses. -->
<ion-col *ngIf="downloadAllCoursesEnabled && courses[selectedFilter] && courses[selectedFilter].length > 1" class="core-button-spinner" text-end col-1>
<button *ngIf="prefetchCoursesData[selectedFilter].icon && prefetchCoursesData[selectedFilter].icon != 'spinner'" ion-button icon-only clear color="dark" (click)="prefetchCourses()">
<core-icon [name]="prefetchCoursesData[selectedFilter].icon"></core-icon>
</button>
<ion-badge class="core-course-download-courses-progress" *ngIf="prefetchCoursesData[selectedFilter].badge">{{prefetchCoursesData[selectedFilter].badge}}</ion-badge>
<ion-spinner *ngIf="!prefetchCoursesData[selectedFilter].icon || prefetchCoursesData[selectedFilter].icon == 'spinner'"></ion-spinner>
</ion-col>
</div>
<core-empty-box *ngIf="courses[selectedFilter].length == 0" image="assets/img/icons/courses.svg" [message]="'addon.block_myoverview.nocourses' | translate"></core-empty-box>
@ -47,7 +47,7 @@
<ion-grid no-padding>
<ion-row no-padding>
<ion-col *ngFor="let course of filteredCourses" no-padding col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 align-self-stretch>
<core-courses-course-progress [course]="course" class="core-courseoverview"></core-courses-course-progress>
<core-courses-course-progress [course]="course" class="core-courseoverview" showAll="true"></core-courses-course-progress>
</ion-col>
</ion-row>
</ion-grid>

12
src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
View File

@ -12,12 +12,10 @@
<core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" [message]="'addon.block_recentlyaccessedcourses.nocourses' | translate"></core-empty-box>
<!-- List of courses. -->
<div class="safe-area-page">
<ion-grid no-padding>
<ion-row no-padding>
<ion-col *ngFor="let course of courses" no-padding col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 align-self-stretch>
<core-courses-course-progress [course]="course" class="core-recentlyaccessedcourses"></core-courses-course-progress>
</ion-col>
</ion-row>
</ion-grid>
<div class="core-horizontal-scroll">
<ng-container *ngFor="let course of courses">
<core-courses-course-progress [course]="course" class="core-recentlyaccessedcourses"></core-courses-course-progress>
</ng-container>
</div>
</div>
</core-loading>

18
src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
View File

@ -2,13 +2,17 @@
<h2>{{ 'addon.block_recentlyaccesseditems.pluginname' | translate }}</h2>
</ion-item-divider>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<ng-container *ngFor="let item of items">
<a ion-item text-wrap detail-none class="core-course-module-handler item-media" (click)="action($event, item)" [title]="item.name">
<img item-start [src]="item.iconUrl" alt="" role="presentation" *ngIf="item.iconUrl" class="core-module-icon">
<h2><core-format-text [text]="item.name"></core-format-text></h2>
<p><core-format-text [text]="item.coursename"></core-format-text></p>
</a>
</ng-container>
<div class="core-horizontal-scroll" *ngIf="items && items.length > 0">
<ng-container *ngFor="let item of items">
<ion-card>
<a ion-item text-wrap detail-none class="core-course-module-handler item-media" (click)="action($event, item)" [title]="item.name">
<img item-start [src]="item.iconUrl" alt="" role="presentation" *ngIf="item.iconUrl" class="core-module-icon">
<h2><core-format-text [text]="item.name"></core-format-text></h2>
<p><core-format-text [text]="item.coursename"></core-format-text></p>
</a>
</ion-card>
</ng-container>
</div>
<core-empty-box *ngIf="items.length <= 0" image="assets/img/icons/activities.svg" [message]="'addon.block_recentlyaccesseditems.noitems' | translate"></core-empty-box>

3
src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss 100644
View File

@ -0,0 +1,3 @@
ion-app.app-root addon-block-recentlyaccesseditems .core-horizontal-scroll .card {
@include horizontal_scroll_item(80%, 250px, 300px);
}

12
src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
View File

@ -12,12 +12,10 @@
<core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" [message]="'addon.block_starredcourses.nocourses' | translate"></core-empty-box>
<!-- List of courses. -->
<div class="safe-area-page">
<ion-grid no-padding>
<ion-row no-padding>
<ion-col *ngFor="let course of courses" no-padding col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 align-self-stretch>
<core-courses-course-progress [course]="course" class="core-block_starredcourses"></core-courses-course-progress>
</ion-col>
</ion-row>
</ion-grid>
<div class="core-horizontal-scroll">
<ng-container *ngFor="let course of courses">
<core-courses-course-progress [course]="course" class="core-block_starredcourses"></core-courses-course-progress>
</ng-container>
</div>
</div>
</core-loading>

12
src/app/app.scss
View File

@ -498,6 +498,11 @@ ion-app.app-root {
@include text-align('end');
flex-grow: 2;
}
.select-text {
text-overflow: ellipsis;
white-space: nowrap;
}
}
@ -985,6 +990,13 @@ ion-app.app-root {
display: none !important;
}
.core-horizontal-scroll {
display: flex;
flex-flow: nowrap;
overflow-x: scroll;
flex-direction: row;
}
ion-content.core-expand-max .scroll-content {
overflow-y: hidden;
display: flex;

4
src/core/block/components/block/block.scss
View File

@ -16,4 +16,8 @@ ion-app.app-root core-block {
@include position(initial, initial, null, initial);
height: auto;
}
.item-divider .core-button-spinner {
margin: 0;
}
}

22
src/core/courses/components/course-progress/core-courses-course-progress.html
View File

@ -2,11 +2,14 @@
<div (click)="openCourse(course)" class="core-course-thumb" [class.core-course-color-img]="course.courseImage">
<img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt=""/>
</div>
<ion-item tappable text-wrap detail-none (click)="openCourse(course)" [title]="course.displayname || course.fullname" class="core-course-link" [class.item-disabled]="course.visible == 0" [class.core-course-more-than-title]="(course.summary && course.summary.length) || (course.progress != null && course.progress >= 0)">
<h2>
<core-icon name="fa-star" *ngIf="course.isfavourite"></core-icon>
<core-format-text [text]="course.displayname || course.fullname"></core-format-text>
</h2>
<ion-item tappable text-wrap detail-none (click)="openCourse(course)" [title]="course.displayname || course.fullname" class="core-course-link" [class.item-disabled]="course.visible == 0" [class.core-course-more-than-title]="(course.progress != null && course.progress >= 0)">
<div class="core-course-title">
<p *ngIf="course.displayname && course.shortname && course.fullname != course.displayname" class="core-course-shortname"><core-format-text [text]="course.shortname"></core-format-text></p>
<h2>
<core-icon name="fa-star" *ngIf="course.isfavourite"></core-icon>
<core-format-text [text]="course.fullname"></core-format-text>
</h2>
</div>
<div class="core-button-spinner" *ngIf="downloadCourseEnabled && !courseOptionMenuEnabled">
<!-- Download course. -->
@ -27,14 +30,7 @@
</button>
</div>
</ion-item>
<ion-item text-wrap *ngIf="course.summary && course.summary.length" [class.item-disabled]="course.visible == 0">
<p>
<summary>
<core-format-text [text]="course.summary" [singleLine]="true" [clean]="true" [fullOnClick]="true"></core-format-text>
</summary>
</p>
</ion-item>
<ion-item *ngIf="course.progress != null && course.progress >= 0">
<ion-item *ngIf="showAll && course.progress != null && course.progress >= 0">
<core-progress-bar [progress]="course.progress"></core-progress-bar>
</ion-item>
<ng-content></ng-content>

65
src/core/courses/components/course-progress/course-progress.scss
View File

@ -4,6 +4,7 @@ ion-app.app-root core-courses-course-progress {
ion-card.card {
display: flex;
flex-direction: column;
align-self: stretch;
@for $i from 0 to length($core-course-image-background) {
&[course-color="#{$i}"] {
@ -14,12 +15,14 @@ ion-app.app-root core-courses-course-progress {
}
.core-course-thumb {
height: 150px;
padding-top: 40%;
width: 100%;
overflow: hidden;
cursor: pointer;
pointer-events: auto;
position: relative;
background-position: center;
background-size: cover;
&.core-course-color-img {
background: white;
@ -33,6 +36,10 @@ ion-app.app-root core-courses-course-progress {
}
}
.core-course-shortname {
margin-bottom: 8px;
}
.core-course-link {
@include padding(8px, 0px, 8px, 16px);
.item-inner {
@ -42,12 +49,14 @@ ion-app.app-root core-courses-course-progress {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
h2 {
margins: 6px 0;
.core-course-title {
margin: 5px 0;
flex-grow: 1;
max-width: calc(100% - 50px);
ion-icon {
h2 ion-icon {
margin-right: 4px;
color: $core-star-color;
}
@ -63,6 +72,7 @@ ion-app.app-root core-courses-course-progress {
.item-button[icon-only] {
min-width: 50px;
width: 50px;
}
}
.label {
@ -84,6 +94,53 @@ ion-app.app-root core-courses-course-progress {
}
}
ion-app.app-root .core-horizontal-scroll core-courses-course-progress {
@include horizontal_scroll_item(45%, 210px, 300px);
ion-card.card {
.core-course-thumb {
padding-top: 40%;
}
.core-course-link {
@include padding(4px, 0px, 4px, 8px);
.core-course-shortname {
font-size: 1.2rem;
}
.core-course-title {
margin: 3px 0;
max-width: calc(100% - 40px);
h2 {
font-size: 1.5rem;
ion-icon {
margin-right: 2px;
}
}
}
.core-button-spinner {
min-height: 40px;
min-width: 40px;
ion-spinner {
width: 20px;
height: 20px;
}
}
.item-button[icon-only] {
min-width: 40px;
width: 40px;
font-size: 1.5rem;
padding: 8px;
}
}
}
}
body.version-3-1 .core-course-thumb{
display: none;
}

3
src/core/courses/components/course-progress/course-progress.ts
View File

@ -38,6 +38,7 @@ import { CoreCoursesCourseOptionsMenuComponent } from '../course-options-menu/co
})
export class CoreCoursesCourseProgressComponent implements OnInit, OnDestroy {
@Input() course: any; // The course to render.
@Input() showAll = false; // If true, will show all actions, options, star and progress.
isDownloading: boolean;
prefetchCourseData = {
@ -69,7 +70,7 @@ export class CoreCoursesCourseProgressComponent implements OnInit, OnDestroy {
}
// This field is only available from 3.6 onwards.
this.courseOptionMenuEnabled = typeof this.course.isfavourite != 'undefined';
this.courseOptionMenuEnabled = this.showAll && typeof this.course.isfavourite != 'undefined';
// Refresh the enabled flag if site is updated.
this.siteUpdatedObserver = this.eventsProvider.on(CoreEventsProvider.SITE_UPDATED, () => {

2
src/core/courses/pages/my-courses/my-courses.html
View File

@ -24,7 +24,7 @@
<ion-grid no-padding>
<ion-row no-padding>
<ion-col *ngFor="let course of filteredCourses" no-padding col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 align-self-stretch>
<core-courses-course-progress [course]="course" class="core-courseoverview"></core-courses-course-progress>
<core-courses-course-progress [course]="course" class="core-courseoverview" showAll="true"></core-courses-course-progress>
</ion-col>
</ion-row>
</ion-grid>

49
src/theme/variables.scss
View File

@ -351,6 +351,55 @@ $core-question-state-incorrect-color: $red-light !default;
}
}
@mixin horizontal_scroll_item($width, $min-width, $max-width) {
flex: 0 0 $width;
min-width: $min-width;
max-width: $max-width;
align-self: stretch;
display: block;
&.card-md, .card-md {
height: calc(100% - #{($card-md-margin-bottom + $card-md-margin-top)});
width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
}
&.card-ios, .card-ios {
height: calc(100% - #{($card-ios-margin-bottom + $card-ios-margin-top)});
width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
}
&.card-wp, .card-wp {
height: calc(100% - #{($card-wp-margin-bottom + $card-wp-margin-top)});
width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
}
&.card-md {
margin-top: $card-md-margin-top;
margin-bottom: $card-md-margin-bottom;
}
&.card-ios {
margin-top: $card-ios-margin-top;
margin-bottom: $card-ios-margin-bottom;
}
&.card-wp {
margin-top: $card-wp-margin-top;
margin-bottom: $card-wp-margin-bottom;
}
&.card, .card {
@media (max-width: 360px) {
margin-left: 6px;
margin-right: 6px;
width: calc(100% - 12px);
}
}
[text-wrap] .label {
h2, p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
// Font Awesome
$fa-font-path: $font-path;
@import "font-awesome";