Merge pull request #1898 from DXCanas/mobile-cards

Mobile Content Cards

Author: rtibbles

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

@@ -83,7 +83,7 @@
 
   export default {
     mixins: [responsiveElement],
-    $trNameSpace: 'contentCardCarousel',
+    name: 'contentCardCarousel',
     $trs: { viewAllButtonLabel: 'View all' },
     props: {
       contents: {

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

@@ -14,25 +14,19 @@
       class="filter"
     />
 
-    <span
-      v-for="content in contents" class="content-card"
+    <template
+      v-for="content in contents"
       v-show="selectedFilter.value === 'all' || selectedFilter.value === content.kind">
-      <slot
+
+      <content-card
         :title="content.title"
         :thumbnail="content.thumbnail"
+        :class="{'grid-item': true, 'mobile': isMobile}"
         :kind="content.kind"
         :progress="content.progress"
-        :id="content.id">
-
-        <content-card
-          :title="content.title"
-          :thumbnail="content.thumbnail"
-          :kind="content.kind"
-          :progress="content.progress"
-          :link="genLink(content.id, content.kind)"/>
+        :link="genLink(content.id, content.kind)"/>
 
-      </slot>
-    </span>
+    </template>
 
   </div>
 
@@ -47,9 +41,11 @@
   import forEach from 'lodash/forEach';
   import uiSelect from 'keen-ui/src/UiSelect';
   import contentCard from '../content-card';
+  import responsiveWindow from 'kolibri.coreVue.mixins.responsiveWindow';
 
   export default {
-    $trNameSpace: 'contentCardGrid',
+    mixins: [responsiveWindow],
+    name: 'contentCardGrid',
     $trs: {
       display: 'Display',
       all: 'All content ({ num, number })',
@@ -92,6 +88,9 @@
     },
     data: () => ({ selectedFilter: '' }),
     computed: {
+      isMobile() {
+        return this.windowSize.breakpoint <= 1;
+      },
       topics() {
         return this.contents.filter(content => content.kind === ContentNodeKinds.TOPIC);
       },
@@ -154,9 +153,13 @@
 
   @require '~kolibri.styles.definitions'
 
-  .content-card
-    display: inline-block
-    margin: 10px
+  $gutters = 16px
+
+  .grid-item
+    margin-right: $gutters
+    margin-bottom: $gutters
+    &.mobile
+      width: 100%
 
   .filter
     width: 200px

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

@@ -1,9 +1,9 @@
 <template>
 
-  <router-link :to="link" class="card">
+  <router-link :to="link" class="card" :style="cardHeight">
 
     <div class="card-thumbnail" :style="backgroundImg">
-      <content-icon v-if="!thumbnail" :kind="kind" class="card-thumbnail-backup"/>
+      <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"/>
       </div>
@@ -34,13 +34,15 @@
 
 <script>
 
-  import * as CoreConstants from 'kolibri.coreVue.vuex.constants';
+  import responsiveElement from 'kolibri.coreVue.mixins.responsiveElement';
+  import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
   import values from 'lodash/values';
   import validateLinkObject from 'kolibri.utils.validateLinkObject';
-  import responsiveWindow from 'kolibri.coreVue.mixins.responsiveWindow';
   import contentIcon from 'kolibri.coreVue.components.contentIcon';
   import progressIcon from 'kolibri.coreVue.components.progressIcon';
+
   export default {
+    mixins: [responsiveElement],
     props: {
       title: {
         type: String,
@@ -58,7 +60,7 @@
         type: String,
         required: true,
         validator(value) {
-          return values(CoreConstants.ContentNodeKinds).includes(value);
+          return values(ContentNodeKinds).includes(value);
         },
       },
       progress: {
@@ -83,6 +85,20 @@
       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`,
+        };
+      },
+      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`,
+        };
+      },
       inProgress() {
         return this.progress > 0 && this.progress < 1;
       },
@@ -121,10 +137,9 @@
   @require '~kolibri.styles.definitions'
 
   $card-width = 210px
-  $card-height = $card-width
   $card-thumbnail-ratio = (9 / 16)
-  $card-thumbnail-height = $card-width * $card-thumbnail-ratio
-  $card-text-height = $card-height - $card-thumbnail-height
+  $card-thumbnail-height = 100% * $card-thumbnail-ratio
+  $card-text-height = $card-width - $card-thumbnail-height
   $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)
@@ -136,7 +151,6 @@
   .card
     display: inline-block
     width: $card-width
-    height: $card-height
     border-radius: 2px
     background-color: $core-bg-light
     box-shadow: $card-elevation-resting
@@ -146,7 +160,7 @@
 
   .card-thumbnail
     position: relative
-    width: $card-width
+    width: 100%
     height: $card-thumbnail-height
     background-size: cover
     background-position: center
@@ -158,7 +172,6 @@
     left: 50%
     transform: translate(-50%, -50%)
     color: $core-text-annotation
-    font-size: ($card-thumbnail-height / 2)
 
   .card-progress-icon-wrapper
     position: absolute

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

@@ -13,19 +13,7 @@
       {{ topic.description }}
     </p>
 
-    <content-card-grid :contents="contents" v-if="contents.length">
-
-      <template scope="content">
-        <content-card
-          :key="content.id"
-          :title="content.title"
-          :thumbnail="content.thumbnail"
-          :kind="content.kind"
-          :progress="content.progress"
-          :link="genLink(content)"/>
-      </template>
-
-    </content-card-grid>
+    <content-card-grid :contents="contents" :gen-link="genLink" v-if="contents.length" />
 
   </div>
 
@@ -59,16 +47,16 @@
       },
     },
     methods: {
-      genLink(node) {
-        if (node.kind === ContentNodeKinds.TOPIC) {
+      genLink(id, kind) {
+        if (kind === ContentNodeKinds.TOPIC) {
           return {
             name: PageNames.EXPLORE_TOPIC,
-            params: { channel_id: this.channelId, id: node.id },
+            params: { channel_id: this.channelId, id },
           };
         }
         return {
           name: PageNames.EXPLORE_CONTENT,
-          params: { channel_id: this.channelId, id: node.id },
+          params: { channel_id: this.channelId, id },
         };
       },
     },

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

@@ -14,18 +14,7 @@
 
       <p v-if="contents.length === 0">{{ $tr('noResultsMsg', { searchTerm }) }}</p>
 
-      <content-card-grid v-else :contents="contents">
-        <template scope="content">
-          <content-card
-            :key="content.id"
-            :title="content.title"
-            :thumbnail="content.thumbnail"
-            :progress="content.progress"
-            :kind="content.kind"
-            :link="genLink(content)"
-          />
-        </template>
-      </content-card-grid>
+      <content-card-grid v-else :gen-link="genLink" :contents="contents" />
 
     </template>
 
@@ -56,21 +45,21 @@
       searchBox,
     },
     methods: {
-      genLink(content) {
-        if (content.kind === ContentNodeKinds.TOPIC) {
+      genLink(id, kind) {
+        if (kind === ContentNodeKinds.TOPIC) {
           return {
             name: PageNames.EXPLORE_TOPIC,
             params: {
+              id,
               channel_id: this.channelId,
-              id: content.id,
             },
           };
         }
         return {
           name: PageNames.EXPLORE_CONTENT,
           params: {
+            id,
             channel_id: this.channelId,
-            id: content.id,
           },
         };
       },