Migrate all card sliders to the new implementation

Author: manuq

kolibri_explore_plugin/assets/src/components/EkIguanaList.vue

@@ -11,15 +11,18 @@
           {{ name }}
         </h5>
       </b-container>
-      <b-container class="no-container-padding">
-        <EkSlidableGrid
+      <b-container fluid class="no-container-padding">
+        <EkSlidableGridNew
           v-slot="slotProps"
           :nodes="getSlidableGridNodes(channels, contentPicks)"
           :hasWhiteBackground="true"
           :itemsPerSlide="{ lg: 3, md: 2, sm: 1 }"
         >
-          <template
-            v-for="node in slotProps.slideNodes"
+          <div
+            v-for="(node, index) in slotProps.nodes"
+            :key="node.id"
+            class="slide"
+            :index="index"
           >
             <EkChannelCard
               v-if="node !== undefined && node.kind === 'channel'"
@@ -32,8 +35,8 @@
               :key="node.id"
               :node="node"
             />
-          </template>
-        </EkSlidableGrid>
+          </div>
+        </EkSlidableGridNew>
       </b-container>
     </div>
   </div>

kolibri_explore_plugin/assets/src/views/DiscoveryPageContenPacks.vue

@@ -7,26 +7,31 @@
       <EkCardGridPlaceholder />
     </template>
     <template v-else>
-      <b-container class="mb-2 mt-4 no-container-padding">
+      <b-container fluid class="mb-2 mt-4 no-container-padding">
         <template v-if="hasNodesForSection('featured-channel')">
           <b-container>
             <h5 class="mt-2 text-muted">
               {{ $tr('channelLabel') }}
             </h5>
           </b-container>
           <!-- These classes must match EkCardGrid -->
-          <b-container class="mb-5 mt-3 no-container-padding section-container">
-            <EkSlidableGrid
+          <b-container fluid class="mb-5 mt-3 no-container-padding section-container">
+            <EkSlidableGridNew
               v-slot="slotProps"
               :nodes="sectionNodes['featured-channel']"
             >
-              <EkChannelCard
-                v-for="node in slotProps.slideNodes"
+              <div
+                v-for="(node, index) in slotProps.nodes"
                 :key="node.id"
-                :channel="node"
-                @click.native="goToChannel(node.id)"
-              />
-            </EkSlidableGrid>
+                class="slide"
+                :index="index"
+              >
+                <EkChannelCard
+                  :channel="node"
+                  @click.native="goToChannel(node.id)"
+                />
+              </div>
+            </EkSlidableGridNew>
           </b-container>
         </template>
         <template v-if="hasNodesForSection('highlight')">
@@ -37,6 +42,7 @@
           </b-container>
           <EkCardGrid
             :nodes="sectionNodes['highlight']"
+            variant="slidable-new"
           />
         </template>
         <template v-if="hasNodesForSection('skill')">
@@ -47,6 +53,7 @@
           </b-container>
           <EkCardGrid
             :nodes="sectionNodes['skill']"
+            variant="slidable-new"
           />
         </template>
         <template v-if="hasNodesForSection('career')">
@@ -57,6 +64,7 @@
           </b-container>
           <EkCardGrid
             :nodes="sectionNodes['career']"
+            variant="slidable-new"
           />
         </template>
         <template v-if="hasNodesForSection('curious')">
@@ -67,6 +75,7 @@
           </b-container>
           <EkCardGrid
             :nodes="sectionNodes['curious']"
+            variant="slidable-new"
           />
         </template>
 

packages/template-ui/src/components/EmptyResultsMessage.vue

@@ -18,6 +18,7 @@
     <EkCardGrid
       v-if="showTopics"
       :nodes="mainSections"
+      variant="slidable-new"
       :mediaQuality="mediaQuality"
       :cardColumns="cardColumns"
     >

packages/template-ui/src/views/Content.vue

@@ -34,6 +34,7 @@
       <EkCardGrid
         v-if="nextNodesInTopic.length && showNextContent"
         :nodes="nextNodesInTopic"
+        variant="slidable-new"
         :cardColumns="cardColumns"
         class="next-grid"
         @nodeUpdated="onNextNodesUpdated"

packages/template-ui/src/views/Home.vue

@@ -26,7 +26,7 @@
         <template v-if="contentNodes.nodes.length">
           <EkCardGrid
             :nodes="contentNodes.nodes"
-            :variant="hasFlatGrid ? 'collapsible' : 'slidable'"
+            :variant="hasFlatGrid ? 'collapsible' : 'slidable-new'"
             :mediaQuality="mediaQuality"
             :cardColumns="cardColumns"
             :hasMoreNodes="contentNodes.hasMoreNodes"
@@ -41,6 +41,7 @@
           <EkCardGrid
             :id="section.id"
             :nodes="sectionNodes[section.id].nodes"
+            variant="slidable-new"
             :hasMoreNodes="sectionNodes[section.id].hasMoreNodes"
             :mediaQuality="mediaQuality"
             @loadMoreNodes="onLoadMoreSectionNodes(section.id)"

packages/template-ui/src/views/ListSection.vue

@@ -19,6 +19,7 @@
           v-for="subsection in sectionNodes.nodes"
           :id="subsection.id"
           :key="subsection.id"
+          variant="slidable-new"
           :nodes="getSubsectionNodes(subsection.id).nodes"
           :mediaQuality="mediaQuality"
           :cardColumns="cardColumns"

packages/template-ui/src/views/Search.vue

@@ -32,6 +32,7 @@
     <EkCardGrid
       v-if="!resultNodes.length"
       :nodes="mainSections"
+      variant="slidable-new"
       :mediaQuality="mediaQuality"
       :cardColumns="cardColumns"
     >