diff --git a/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html b/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html index 1932ed057..39dc99008 100644 --- a/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html +++ b/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html @@ -7,6 +7,14 @@

{{ 'addon.block_myoverview.pluginname' | translate }}

+ +
@@ -28,14 +36,6 @@ {{ 'addon.block_myoverview.lastaccessed' | translate }} - -
@@ -47,7 +47,7 @@ - + diff --git a/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html b/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html index 04b90057e..8012cf048 100644 --- a/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html +++ b/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html @@ -12,12 +12,10 @@
- - - - - - - +
+ + + +
diff --git a/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html b/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html index 5b514dc86..b61015674 100644 --- a/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html +++ b/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html @@ -2,13 +2,17 @@

{{ 'addon.block_recentlyaccesseditems.pluginname' | translate }}

- - - -

-

- - +
+ + + + +

+

+ + + +
diff --git a/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss b/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss new file mode 100644 index 000000000..0ae7043f0 --- /dev/null +++ b/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss @@ -0,0 +1,3 @@ +ion-app.app-root addon-block-recentlyaccesseditems .core-horizontal-scroll .card { + @include horizontal_scroll_item(80%, 250px, 300px); +} \ No newline at end of file diff --git a/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html b/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html index 19c6fea67..194a1d6fe 100644 --- a/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html +++ b/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html @@ -12,12 +12,10 @@
- - - - - - - +
+ + + +
diff --git a/src/app/app.scss b/src/app/app.scss index 0c420d698..86daf6c4f 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -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; diff --git a/src/core/block/components/block/block.scss b/src/core/block/components/block/block.scss index 5a4b20515..28a9914d4 100644 --- a/src/core/block/components/block/block.scss +++ b/src/core/block/components/block/block.scss @@ -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; + } } \ No newline at end of file diff --git a/src/core/courses/components/course-progress/core-courses-course-progress.html b/src/core/courses/components/course-progress/core-courses-course-progress.html index 4dab77489..c59de59e4 100644 --- a/src/core/courses/components/course-progress/core-courses-course-progress.html +++ b/src/core/courses/components/course-progress/core-courses-course-progress.html @@ -2,11 +2,14 @@
- -

- - -

+ +
+

+

+ + +

+
- -

-

- - -

- - + diff --git a/src/core/courses/components/course-progress/course-progress.scss b/src/core/courses/components/course-progress/course-progress.scss index 4f2c29f5d..cf0b3bc4c 100644 --- a/src/core/courses/components/course-progress/course-progress.scss +++ b/src/core/courses/components/course-progress/course-progress.scss @@ -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; } diff --git a/src/core/courses/components/course-progress/course-progress.ts b/src/core/courses/components/course-progress/course-progress.ts index 294c73dd8..75a8c6fab 100644 --- a/src/core/courses/components/course-progress/course-progress.ts +++ b/src/core/courses/components/course-progress/course-progress.ts @@ -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, () => { diff --git a/src/core/courses/pages/my-courses/my-courses.html b/src/core/courses/pages/my-courses/my-courses.html index bfecbf856..2129adec0 100644 --- a/src/core/courses/pages/my-courses/my-courses.html +++ b/src/core/courses/pages/my-courses/my-courses.html @@ -24,7 +24,7 @@ - + diff --git a/src/theme/variables.scss b/src/theme/variables.scss index 974cc1380..07ead78b8 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -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";