Fix display of cards and channels and add transition.

kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/LibraryItem.vue

@@ -54,7 +54,7 @@
     </div>
     <div class="library-channels">
       <KGridItem
-        v-for="channel in channels"
+        v-for="channel in channels.slice(0, cardsPerRow)"
         :key="channel.id"
         :layout="{ span: layoutSpan }"
       >
@@ -123,11 +123,6 @@
         required: true,
         default: null,
       },
-      totalChannels: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
       showDescription: {
         type: Boolean,
         required: false,
@@ -140,6 +135,18 @@
       },
     },
     computed: {
+      cardsPerRow() {
+        if (this.windowIsSmall) {
+          return 1;
+        }
+        if (this.windowBreakpoint < 4) {
+          return 2;
+        }
+        if (this.windowBreakpoint < 6) {
+          return 3;
+        }
+        return 4;
+      },
       layoutSpan() {
         /**
          * The breakpoints below represent the window widths
@@ -156,13 +163,16 @@
          * For example, if the total number of columns is 12, and
          * column span for each cards is 4, then X is 3.
          */
-        let span = 3;
-        if ([0, 1, 2, 6].includes(this.windowBreakpoint)) {
-          span = 4;
-        } else if ([3, 4, 5].includes(this.windowBreakpoint)) {
-          span = 6;
+        if (this.windowBreakpoint < 2) {
+          return 4 / this.cardsPerRow;
         }
-        return span;
+        if (this.windowBreakpoint === 2) {
+          return 8 / this.cardsPerRow;
+        }
+        return 12 / this.cardsPerRow;
+      },
+      totalChannels() {
+        return this.channels.length;
       },
     },
     $trs: {

kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue

@@ -21,21 +21,20 @@
     <div v-if="loading">
       <KCircularLoader />
     </div>
-    <div v-else>
+    <FadeInTransitionGroup v-else>
       <LibraryItem
         v-for="device in pinnedDevices"
         :key="device['instance_id']"
         :deviceId="device['instance_id']"
         :deviceName="device['device_name']"
         :deviceIcon="getDeviceIcon(device)"
         :channels="deviceChannelsMap[device['instance_id']]"
-        :totalChannels="device['total_count']"
         :pinIcon="getPinIcon(true)"
         :showDescription="device['instance_id'] === studioId"
         :disablePinDevice="device['instance_id'] === studioId"
         @togglePin="handlePinToggle"
       />
-      <div v-if="areMoreDevicesAvailable">
+      <div v-if="areMoreDevicesAvailable" key="moreDevices">
         <div
           v-if="pinnedDevicesExist"
           data-test="more-libraries"
@@ -49,17 +48,18 @@
             @click="loadMoreDevices"
           />
         </div>
-        <LibraryItem
-          v-for="(device, index) in unpinnedDevices.slice(0, moreDevices)"
-          :key="index"
-          :deviceId="device['instance_id']"
-          :deviceName="device['device_name']"
-          :deviceIcon="getDeviceIcon(device)"
-          :channels="deviceChannelsMap[device['instance_id']]"
-          :totalChannels="device['total_count']"
-          :pinIcon="getPinIcon(false)"
-          @togglePin="handlePinToggle"
-        />
+        <FadeInTransitionGroup>
+          <LibraryItem
+            v-for="device in unpinnedDevices.slice(0, moreDevices)"
+            :key="device['instance_id']"
+            :deviceId="device['instance_id']"
+            :deviceName="device['device_name']"
+            :deviceIcon="getDeviceIcon(device)"
+            :channels="deviceChannelsMap[device['instance_id']]"
+            :pinIcon="getPinIcon(false)"
+            @togglePin="handlePinToggle"
+          />
+        </FadeInTransitionGroup>
         <KButton
           v-if="displayShowMoreButton"
           data-test="show-more-button"
@@ -68,7 +68,7 @@
           @click="loadMoreDevices"
         />
       </div>
-    </div>
+    </FadeInTransitionGroup>
   </ImmersivePage>
 
 </template>
@@ -80,6 +80,7 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { crossComponentTranslator } from 'kolibri.utils.i18n';
   import commonLearnStrings from '../commonLearnStrings';
+  import FadeInTransitionGroup from '../FadeInTransitionGroup';
   import useContentLink from '../../composables/useContentLink';
   import useDevices from '../../composables/useDevices';
   import usePinnedDevices from '../../composables/usePinnedDevices';
@@ -91,6 +92,7 @@
   export default {
     name: 'ExploreLibrariesPage',
     components: {
+      FadeInTransitionGroup,
       ImmersivePage,
       LibraryItem,
     },

kolibri/plugins/learn/assets/src/views/FadeInTransitionGroup.vue

@@ -0,0 +1,30 @@
+<template>
+
+  <transition-group name="channel-list" tag="div">
+    <slot>
+    </slot>
+  </transition-group>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'FadeInTransitionGroup',
+  };
+
+</script>
+
+
+<style scoped>
+
+  .channel-list-enter-active, .channel-list-leave-active, .channel-list-move {
+    transition: opacity 0.25s ease;
+  }
+
+  .channel-list-enter, .channel-list-leave-to {
+    opacity: 0;
+  }
+
+</style>

kolibri/plugins/learn/assets/src/views/LibraryPage/MoreNetworkDevices.vue

@@ -9,6 +9,7 @@
       >
         <UnPinnedDevices
           :device="device"
+          :channelCount="deviceChannelsMap[device.id].length"
           :routeTo="genLibraryPageBackLink(device.id, false)"
         />
       </KGridItem>
@@ -53,6 +54,13 @@
         type: Array,
         required: true,
       },
+      deviceChannelsMap: {
+        type: Object,
+        required: true,
+        default() {
+          return {};
+        },
+      },
     },
     computed: {
       layoutSpan() {

kolibri/plugins/learn/assets/src/views/LibraryPage/PinnedNetworkResources.vue

@@ -3,34 +3,36 @@
   <!-- eslint-disable vue/html-indent -->
 
   <KGrid v-if="devices !== null">
-    <KGridItem
-      v-for="device in devices"
-      :key="device.id"
-    >
-      <KGridItem>
-        <h2>
-          <KIcon :icon="getDeviceIcon(device)" />
-          <span class="device-name">{{ device.device_name }}</span>
-        </h2>
-      </KGridItem>
-      <ChannelCardGroupGrid
-        data-test="channel-cards"
-        :deviceId="device.id"
-        :contents="device.channels"
-        :isRemote="true"
+    <FadeInTransitionGroup>
+      <KGridItem
+        v-for="device in devices"
+        :key="device.id"
       >
-        <KGridItem :layout="{ span: layoutSpan }">
-          <ChannelCard
-            :key="exploreString.toLowerCase()"
-            :isMobile="windowIsSmall"
-            :title="exploreString"
-            :link="genLibraryPageBackLink(device.id, false)"
-            :explore="true"
-          />
+        <KGridItem>
+          <h2>
+            <KIcon :icon="getDeviceIcon(device)" />
+            <span class="device-name">{{ device.device_name }}</span>
+          </h2>
         </KGridItem>
-      </ChannelCardGroupGrid>
+        <ChannelCardGroupGrid
+          data-test="channel-cards"
+          :deviceId="device.id"
+          :contents="deviceChannelsMap[device.instance_id].slice(0, channelsToDisplay)"
+          :isRemote="true"
+        >
+          <KGridItem :layout="{ span: layoutSpan }">
+            <ChannelCard
+              :key="exploreString.toLowerCase()"
+              :isMobile="windowIsSmall"
+              :title="exploreString"
+              :link="genLibraryPageBackLink(device.id, false)"
+              :explore="true"
+            />
+          </KGridItem>
+        </ChannelCardGroupGrid>
 
-    </KGridItem>
+      </KGridItem>
+    </FadeInTransitionGroup>
   </KGrid>
 
 </template>
@@ -41,6 +43,7 @@
   import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import useContentLink from '../../composables/useContentLink';
+  import FadeInTransitionGroup from '../FadeInTransitionGroup';
   import ChannelCard from '../ChannelCard';
   import ChannelCardGroupGrid from './../ChannelCardGroupGrid';
 
@@ -49,6 +52,7 @@
     components: {
       ChannelCard,
       ChannelCardGroupGrid,
+      FadeInTransitionGroup,
     },
     mixins: [commonCoreStrings],
     setup() {
@@ -67,6 +71,17 @@
           return [];
         },
       },
+      deviceChannelsMap: {
+        type: Object,
+        required: true,
+        default() {
+          return {};
+        },
+      },
+      channelsToDisplay: {
+        type: Number,
+        required: true,
+      },
     },
     computed: {
       layoutSpan() {

kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue

@@ -71,6 +71,10 @@
         type: Object,
         required: true,
       },
+      channelCount: {
+        type: Number,
+        default: 0,
+      },
       routeTo: {
         type: Object,
         required: true,
@@ -90,9 +94,6 @@
           textAlign: 'center',
         };
       },
-      channelCount() {
-        return this.device['total_count'] || 0;
-      },
       deviceName() {
         return this.device.nickname || this.device.device_name;
       },

kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue

@@ -143,6 +143,8 @@
             v-if="pinnedDevicesExist"
             data-test="pinned-resources"
             :devices="pinnedDevices"
+            :deviceChannelsMap="deviceChannelsMap"
+            :channelsToDisplay="cardsPerRow * 2 - 1"
           />
 
           <!-- More  -->
@@ -156,6 +158,7 @@
             v-if="unpinnedDevicesExist"
             data-test="more-devices"
             :devices="unpinnedDevices"
+            :deviceChannelsMap="deviceChannelsMap"
           />
         </div>
 
@@ -520,6 +523,18 @@
           ? { marginRight: `${this.sidePanelWidth + 24}px`, marginTop }
           : { marginLeft: `${this.sidePanelWidth + 24}px`, marginTop };
       },
+      cardsPerRow() {
+        if (this.windowIsSmall) {
+          return 1;
+        }
+        if (this.windowBreakpoint < 5) {
+          return 2;
+        }
+        if (this.windowBreakpoint < 6) {
+          return 3;
+        }
+        return 4;
+      },
       layoutSpan() {
         /**
          * The breakpoints below represent the window widths
@@ -530,19 +545,20 @@
          * 4: < 1280px | Large screen  | 12 columns
          * 5: < 1440px | Large screen  | 12 columns
          * 6: < 1600px | Large screen  | 12 columns
+         * 7: > 1600px | Large screen  | 12 columns
          *
          * On resize, display X cards per row where:
          * X = total columns in grid / column span for each card.
          * For example, if the total number of columns is 12, and
          * column span for each cards is 4, then X is 3.
          */
-        let span = 3;
-        if ([0, 1, 2, 6].includes(this.windowBreakpoint)) {
-          span = 4;
-        } else if ([3, 4, 5].includes(this.windowBreakpoint)) {
-          span = 4;
+        if (this.windowBreakpoint < 2) {
+          return 4 / this.cardsPerRow;
+        }
+        if (this.windowBreakpoint === 2) {
+          return 8 / this.cardsPerRow;
         }
-        return span;
+        return 12 / this.cardsPerRow;
       },
       pinnedDevices() {
         return this.networkDevicesWithChannels.filter(device => {