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

MOBILE-2773 dashboard: Add horizontal scroll to recent items

main
Pau Ferrer Ocaña 2018-12-07 11:44:32 +01:00
parent b03b67e393
commit 4782e35fc2
4 changed files with 45 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>

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

@ -0,0 +1,11 @@
ion-app.app-root addon-block-recentlyaccesseditems .core-horizontal-scroll .card {
@include horizontal_scroll_item(80%, 250px, 300px);
[text-wrap] .label {
h2, p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}

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

@ -93,41 +93,7 @@ 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);
}
@include horizontal_scroll_item(40%, 150px, 300px);
}
body.version-3-1 .core-course-thumb{

22
src/theme/variables.scss
View File

@ -351,6 +351,28 @@ $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-end + $card-md-margin-start)});
}
&.card-ios, .card-ios {
height: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)});
}
&.card-wp, .card-wp {
height: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)});
}
&.card {
margin-top: $card-md-margin-start;
margin-bottom: $card-md-margin-end;
}
}
// Font Awesome
$fa-font-path: $font-path;
@import "font-awesome";