Remote Content Browsing: Clean the library page when displaying other available libraries

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

@@ -48,14 +48,19 @@
       :value="numCoachContents"
       :isTopic="true"
     />
-
     <div
       v-if="version"
       class="version-wrapper"
       :style="versionStyle"
     >
       <p>{{ $tr('version', { version: version }) }}</p>
     </div>
+    <div
+      v-if="isPinnedDevice"
+      class="wifi-icon"
+    >
+      <KIcon icon="wifi" />
+    </div>
 
   </router-link>
 
@@ -113,6 +118,11 @@
         required: false,
         default: null,
       },
+      isPinnedDevice: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
     computed: {
       ...mapGetters(['isLearner', 'isUserLoggedIn']),
@@ -212,4 +222,11 @@
     }
   }
 
+  .wifi-icon {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    padding: 10px;
+  }
+
 </style>

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

@@ -13,8 +13,10 @@
         :tagline="getTagLine(content)"
         :numCoachContents="content.num_coach_contents"
         :link="genContentLinkBackLinkCurrentPage(content.id, false)"
+        :isRemote="isRemote"
       />
     </KGridItem>
+    <slot></slot>
 
   </KGrid>
 
@@ -42,6 +44,10 @@
         type: Array,
         required: true,
       },
+      isRemote: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       cardColumnSpan() {

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

@@ -0,0 +1,81 @@
+<template>
+
+  <router-link
+    :to="exploreLibraries"
+    class="card-main-wrapper"
+  >
+    <div class="cards" style="height:270px;">
+      <div>
+        <div class="card-title">
+          <h1>
+            {{ coreString('explore') }}
+          </h1>
+        </div>
+      </div>
+    </div>
+  </router-link>
+
+</template>
+
+
+<script>
+
+  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import { PageNames } from './../../constants';
+
+  export default {
+    name: 'ExploreCard',
+    mixins: [commonCoreStrings],
+    computed: {
+      exploreLibraries() {
+        return { name: PageNames.EXPLORE_LIBRARIES };
+      },
+    },
+    created() {},
+    methods: {},
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '~kolibri-design-system/lib/styles/definitions';
+
+  $margin: 16px;
+
+  .card-main-wrapper {
+    @extend %dropshadow-1dp;
+
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    max-height: 270px;
+    padding-bottom: $margin;
+    text-decoration: none;
+    vertical-align: top;
+    border-radius: $radius;
+    transition: box-shadow $core-time ease;
+
+    &:hover {
+      @extend %dropshadow-8dp;
+    }
+
+    &:focus {
+      outline-width: 4px;
+      outline-offset: 6px;
+    }
+  }
+
+  .cards {
+    margin: auto;
+    text-align: center;
+  }
+
+  .card-title {
+    margin: auto;
+    margin-top: 100px;
+    letter-spacing: normal;
+  }
+
+</style>

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

@@ -1,48 +1,53 @@
 <template>
 
-  <KGrid>
-    <KGridItem
-      v-for="device in devices"
-      :key="device.id"
-      :layout="{ span: cardColumnSpan, alignment: 'auto' }"
-    >
-      <UnPinnedDevices
-        :deviceName="device.device_name"
-        :channels="device.channels"
-      />
-    </KGridItem>
-  </KGrid>
+  <div>
+    <KGrid>
+      <KGridItem
+        v-for="device in devices"
+        :key="device.id"
+        :layout="{ span: cardColumnSpan, alignment: 'auto' }"
+      >
+        <UnPinnedDevices
+          :deviceName="device.device_name"
+          :channels="device.channels.length"
+          :allDevices="device"
+          :operatingSystem="device.operatingSystem"
+        />
+      </KGridItem>
+      <slot></slot>
+    </KGrid>
+  </div>
 
 </template>
 
 
 <script>
 
   import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
-  import useDevices from '../../composables/useDevices';
-  import useChannels from '../../composables/useChannels';
+  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import UnPinnedDevices from './UnPinnedDevices';
 
   export default {
     name: 'MoreNetworkDevices',
     components: {
       UnPinnedDevices,
     },
+    mixins: [commonCoreStrings],
     setup() {
-      const { windowBreakpoint } = useKResponsiveWindow();
-      const { fetchChannels } = useChannels();
-      const { baseurl, fetchDevices } = useDevices();
+      const { windowBreakpoint, windowGutter } = useKResponsiveWindow();
       return {
-        baseurl,
-        fetchDevices,
-        fetchChannels,
         windowBreakpoint,
+        windowGutter,
       };
     },
+    props: {
+      devices: {
+        type: Array,
+        required: true,
+      },
+    },
     data() {
-      return {
-        devices: [],
-      };
+      return {};
     },
     computed: {
       cardColumnSpan() {
@@ -52,16 +57,14 @@
         return 3;
       },
     },
-    created() {
-      this.fetchDevices().then(devices => {
-        const device = devices.filter(d => d.available);
-        device.forEach(element => {
-          this.fetchChannels({ baseurl: element.baseurl }).then(channel => {
-            element['channels'] = channel.length;
-          });
-          this.devices.push(element);
-        });
-      });
+    mounted() {
+      this.setNetworkDeviceChannels(this.devices, this.devices, this.devices.length);
+    },
+    methods: {
+      setNetworkDeviceChannels(device, channels, total) {
+        this.$set(device, 'channels', channels.slice(0, 4));
+        this.$set(device, 'total_channels', total);
+      },
     },
   };