Implement recommendations display

contentcuration/contentcuration/dev_settings.py

@@ -5,4 +5,4 @@
 
 ROOT_URLCONF = "contentcuration.dev_urls"
 
-INSTALLED_APPS += ("drf_yasg", "automation")
+INSTALLED_APPS += ("drf_yasg",)

contentcuration/contentcuration/frontend/RecommendedResourceCard/components/RecommendedResourceCard.vue

@@ -1,40 +1,46 @@
 <template>
 
   <KCard
-    class="recommended-resource-card"
-    :to="to"
-    :title="title"
-    orientation="horizontal"
-    :headingLevel="headingLevel"
+    :title="node.title"
+    :headingLevel="2"
     thumbnailScaleType="contain"
     thumbnailDisplay="small"
     thumbnailAlign="right"
-    :thumbnailSrc="thumbnailSrc"
-    :style="{ margin: '16px 0 16px 0' }"
+    :thumbnailSrc="node.thumbnail_src"
+    @click="onClick"
   >
-    <template #aboveTitle>
-      <div>
-        <KIcon
-          icon="practiceSolid"
-        />
-        <span>Practice</span>
-      </div>
+    <template #select>
+      <Checkbox
+        :key="`checkbox-${node.id}`"
+        :inputValue="isSelected(node)"
+        @input="toggleSelected(node)"
+      >
+        <span class="visuallyhidden">{{ $tr('selectCard', { title: node.title }) }}</span>
+      </Checkbox>
     </template>
-    <template #title>
+    <template #aboveTitle>
+      <ContentNodeLearningActivityIcon
+        :learningActivities="learningActivities"
+        showEachActivityIcon
+        includeText
+        small
+      />
     </template>
     <template #belowTitle>
-      <div class="bellow-title-style">
-        <p>
-          below title slot section for the KCard component:
-          below title slot section for the KCard component
-        </p>
+      <div>
+        <KTextTruncator
+          :text="channelName"
+          :maxLines="2"
+        />
       </div>
     </template>
     <template #footer>
-      <div class="align-right-style">
-        <KIconButton icon="openNewTab" class="card-icon-size" />
-        <KIconButton icon="thumbDown" class="card-icon-size" />
-      </div>
+      <KFixedGrid :numCols="2">
+        <KFixedGridItem alignment="right">
+          <KIconButton icon="openNewTab" />
+          <KIconButton icon="thumbDown" />
+        </KFixedGridItem>
+      </KFixedGrid>
     </template>
   </KCard>
 
@@ -43,37 +49,68 @@
 
 <script>
 
+  import find from 'lodash/find';
+  import LearningActivities from 'kolibri-constants/labels/LearningActivities';
+  import { ContentKindLearningActivityDefaults } from 'shared/leUtils/ContentKinds';
+  import Checkbox from 'shared/views/form/Checkbox';
+  import ContentNodeLearningActivityIcon from 'shared/views/ContentNodeLearningActivityIcon';
+
   export default {
     name: 'RecommendedResourceCard',
+    components: {
+      Checkbox,
+      ContentNodeLearningActivityIcon,
+    },
     props: {
-      to: {
+      node: {
         type: Object,
         required: true,
       },
-      title: {
-        type: String,
-        default: null,
-      },
-      headingLevel: {
-        type: Number,
+      selected: {
+        type: Array,
         required: true,
       },
-      thumbnailSrc: {
-        type: String,
-        default: null,
+    },
+    computed: {
+      channelName() {
+        return this.node.channel?.name || '';
+      },
+      learningActivities() {
+        return {
+          [ContentKindLearningActivityDefaults[this.node.kind] || LearningActivities.EXPLORE]: true,
+        };
+      },
+      isSelected() {
+        return function(node) {
+          return Boolean(find(this.selected, { id: node.id }));
+        };
       },
     },
+    methods: {
+      toggleSelected(node) {
+        this.$emit('change_selected', { nodes: [node], isSelected: !this.isSelected(node) });
+      },
+      onClick() {
+        this.$emit('preview', this.node);
+      },
+    },
+    $trs: {
+      selectCard: 'Select { title }',
+    },
   };
 
 </script>
 
 
 <style>
-  .align-right-style{
-      display: flex;
-      justify-content: flex-end;
-  }
-  .recommended-resource-card {
-    max-width:400px
+  .visuallyhidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    border: 0;
   }
 </style>

contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ChannelList.vue

@@ -6,10 +6,10 @@
       <DropdownWrapper
         component="VFlex"
         sm6
-        md5
-        lg4
-        xl3
-        class="pr-4"
+        md6
+        lg6
+        xl6
+        class="pr-3"
       >
         <template #default="{ attach, menuProps }">
           <VSelect
@@ -23,7 +23,7 @@
           />
         </template>
       </DropdownWrapper>
-      <VFlex sm6 md5 lg4 xl3 class="pr-5">
+      <VFlex sm6 md6 lg6 xl6>
         <LanguageDropdown v-model="languageFilter" />
       </VFlex>
     </VLayout>

contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ImportFromChannelsModal.vue

@@ -277,7 +277,10 @@
 <style lang="less" scoped>
 
   .modal-container.fluid {
-    max-width: 1200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
   }
 
 </style>

contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchFilters.vue

@@ -3,7 +3,7 @@
   <VNavigationDrawer
     permanent
     floating
-    class="import-search-filters px-2"
+    class="import-search-filters"
   >
     <!-- Channel -->
     <p class="font-weight-bold grey--text mb-1">