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

MOBILE-2773 courses: Add horizontal scroll on dashboard

main
Pau Ferrer Ocaña 2018-12-03 13:18:33 +01:00
parent b78ca51bb1
commit b03b67e393
5 changed files with 68 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
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>

10
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>
<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>
</ion-col>
</ion-row>
</ion-grid>
</ng-container>
</div>
</div>
</core-loading>

10
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>
<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>
</ion-col>
</ion-row>
</ion-grid>
</ng-container>
</div>
</div>
</core-loading>

7
src/app/app.scss
View File

@ -990,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;

44
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}"] {
@ -20,6 +21,8 @@ ion-app.app-root core-courses-course-progress {
cursor: pointer;
pointer-events: auto;
position: relative;
background-position: center;
background-size: cover;
&.core-course-color-img {
background: white;
@ -51,7 +54,7 @@ ion-app.app-root core-courses-course-progress {
margins: 6px 0;
flex-grow: 1;
ion-icon {
h2 ion-icon {
margin-right: 4px;
color: $core-star-color;
}
@ -88,6 +91,45 @@ ion-app.app-root core-courses-course-progress {
}
}
ion-app.app-root .core-horizontal-scroll core-courses-course-progress {
min-width: 300px;
align-self: stretch;
.card-md {
height: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
}
.card-ios {
height: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)});
}
.card-wp {
height: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)});
}
}
@media (min-width: 576px) {
ion-app.app-root .core-horizontal-scroll core-courses-course-progress {
width: calc(50% - 0.5rem);
}
}
@media (min-width: 840px) {
ion-app.app-root .core-horizontal-scroll core-courses-course-progress {
width: calc(33.33% - 0.5rem);
}
}
@media (min-width: 1100px) {
ion-app.app-root .core-horizontal-scroll core-courses-course-progress {
width: calc(25% - 0.5rem);
}
}
@media (min-width: 1360px) {
ion-app.app-root .core-horizontal-scroll core-courses-course-progress {
width: calc(20% - 0.5rem);
}
}
body.version-3-1 .core-course-thumb{
display: none;
}