Merge pull request #1899 from DXCanas/mobile-cards-carousel

Mobile cards carousel

Author: rtibbles

kolibri/core/assets/src/mixins/responsive-window.js

@@ -160,7 +160,7 @@ function addWindowListener(cb) {
 }
 
 function removeWindowListener(cb) {
-  windowListeners.pop(cb);
+  windowListeners.splice(windowListeners.indexOf(cb), 1);
 }
 
 /* setup */

kolibri/plugins/learn/assets/src/views/content-card-carousel/index.vue

@@ -82,8 +82,8 @@
   const gutterWidth = 20;
 
   export default {
-    mixins: [responsiveElement],
     name: 'contentCardCarousel',
+    mixins: [responsiveElement],
     $trs: { viewAllButtonLabel: 'View all' },
     props: {
       contents: {

kolibri/plugins/learn/assets/src/views/content-card/index.vue

@@ -1,8 +1,8 @@
 <template>
 
-  <router-link :to="link" class="card" :style="cardHeight">
+  <router-link :to="link" class="card">
 
-    <div class="card-thumbnail" :style="backgroundImg">
+    <div class="card-thumbnail" :style="cardThumbnail">
       <content-icon v-if="!thumbnail" :kind="kind" :style="iconSize" class="card-thumbnail-backup"/>
       <div v-show="progress > 0" class="card-progress-icon-wrapper">
         <progress-icon :progress="progress"/>
@@ -85,28 +85,26 @@
       mastered() {
         return this.progress === 1;
       },
-      cardHeight() {
-        // set here so that parent component can set width and have height dynamically calculated
-        return {
-          height: `${this.elSize.width}px`,
-        };
+      thumbnailHeight() {
+        return this.elSize.width * (9 / 16);
       },
       iconSize() {
-        const cardHeight = this.elSize.width; // can use height or width because it's a square
         // maintain the thumbnail 16:9 ratio
-        const thumbnailHeight = this.elSize.width * (9 / 16);
         return {
-          'font-size': `${thumbnailHeight / 2}px`,
+          'font-size': `${this.thumbnailHeight / 2}px`,
         };
       },
       inProgress() {
         return this.progress > 0 && this.progress < 1;
       },
-      backgroundImg() {
+      cardThumbnail() {
+        const thumbnailStyles = {
+          height: `${this.thumbnailHeight}px`,
+        };
         if (this.thumbnail) {
-          return { backgroundImage: `url('${this.thumbnail}')` };
+          thumbnailStyles.backgroundImage = `url('${this.thumbnail}')`;
         }
-        return {};
+        return thumbnailStyles;
       },
       backgroundClass() {
         if (this.kind === 'exercise') {
@@ -138,8 +136,7 @@
 
   $card-width = 210px
   $card-thumbnail-ratio = (9 / 16)
-  $card-thumbnail-height = 100% * $card-thumbnail-ratio
-  $card-text-height = $card-width - $card-thumbnail-height
+  $card-text-height = $card-width - ($card-width * $card-thumbnail-ratio)
   $card-text-padding = ($card-width / (320 / 24))
   $card-elevation-resting = 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12)
   $card-elevation-raised = 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2)
@@ -161,7 +158,6 @@
   .card-thumbnail
     position: relative
     width: 100%
-    height: $card-thumbnail-height
     background-size: cover
     background-position: center
     background-color: $core-grey

kolibri/plugins/learn/assets/src/views/learn-page/index.vue

@@ -4,30 +4,38 @@
     <page-header :title="$tr('pageHeader')">
       <mat-svg slot="icon" category="action" name="home"/>
     </page-header>
-    <content-card-carousel
-      v-if="recommendations.resume.length"
+    <component
+      v-if="trimmedResume.length"
+      :is="recommendationDisplay"
       :gen-link="genLink"
-      :contents="recommendations.resume"
+      :contents="trimmedResume"
       :header="$tr('resumeSectionHeader')"
-      :subheader="$tr('resumeSectionSubHeader', {numOfItems: recommendations.resume.length})"/>
-    <content-card-carousel
-      v-if="recommendations.nextSteps.length"
+      :filter="false"
+      :subheader="$tr('resumeSectionSubHeader', {numOfItems: trimmedResume.length})"/>
+    <component
+      v-if="trimmedNextSteps.length"
+      :is="recommendationDisplay"
       :gen-link="genLink"
-      :contents="recommendations.nextSteps"
+      :contents="trimmedNextSteps"
       :header="$tr('suggestedNextStepsSectionHeader')"
-      :subheader="$tr('suggestedNextStepsSectionSubHeader', {numOfItems: recommendations.nextSteps.length})"/>
-    <content-card-carousel
-      v-if="recommendations.popular.length"
+      :filter="false"
+      :subheader="$tr('suggestedNextStepsSectionSubHeader', {numOfItems: trimmedNextSteps.length})"/>
+    <component
+      v-if="trimmedPopular.length"
+      :is="recommendationDisplay"
       :gen-link="genLink"
-      :contents="recommendations.popular"
+      :contents="trimmedPopular"
       :header="$tr('popularSectionHeader')"
-      :subheader="$tr('popularSectionSubHeader', {numOfItems: recommendations.popular.length})"/>
-    <content-card-carousel
-      v-if="all.content.length"
+      :filter="false"
+      :subheader="$tr('popularSectionSubHeader', {numOfItems: trimmedPopular.length})"/>
+    <component
+      v-if="trimmedOverview.length"
+      :is="recommendationDisplay"
       :showViewAll="true"
       :gen-link="genLink"
       :header="$tr('overviewSectionHeader')"
-      :contents="all.content" />
+      :filter="false"
+      :contents="trimmedOverview" />
   </div>
 
 </template>
@@ -39,8 +47,13 @@
   import { getCurrentChannelObject } from 'kolibri.coreVue.vuex.getters';
   import pageHeader from '../page-header';
   import contentCardCarousel from '../content-card-carousel';
+  import contentCardGrid from '../content-card-grid';
+  import responsiveWindow from 'kolibri.coreVue.mixins.responsiveWindow';
+
+  const mobileCardNumber = 3;
+
   export default {
-    $trNameSpace: 'learnPageIndex',
+    name: 'recommendedPage',
     $trs: {
       pageHeader: 'Recommended',
       popularSectionHeader: 'Most popular',
@@ -51,9 +64,46 @@
       resumeSectionSubHeader: '{numOfItems, number} items to be resumed',
       overviewSectionHeader: 'Overview',
     },
+    mixins: [responsiveWindow],
     components: {
       pageHeader,
       contentCardCarousel,
+      contentCardGrid,
+    },
+    computed: {
+      isMobile() {
+        return this.windowSize.breakpoint <= 2;
+      },
+      recommendationDisplay() {
+        if (this.isMobile) {
+          return contentCardGrid;
+        }
+        return contentCardCarousel;
+      },
+      trimmedResume() {
+        if (this.isMobile) {
+          return this.recommendations.resume.slice(0, mobileCardNumber);
+        }
+        return this.recommendations.resume;
+      },
+      trimmedNextSteps() {
+        if (this.isMobile) {
+          return this.recommendations.nextSteps.slice(0, mobileCardNumber);
+        }
+        return this.recommendations.nextSteps;
+      },
+      trimmedPopular() {
+        if (this.isMobile) {
+          return this.recommendations.popular.slice(0, mobileCardNumber);
+        }
+        return this.recommendations.popular;
+      },
+      trimmedOverview() {
+        if (this.isMobile) {
+          return this.all.content.slice(0, mobileCardNumber);
+        }
+        return this.all.content;
+      },
     },
     methods: {
       genLink(id, kind) {