diff --git a/kolibri/plugins/learn/assets/src/views/HybridLearningCardGrid.vue b/kolibri/plugins/learn/assets/src/views/HybridLearningCardGrid.vue
index ac7c245b0d9..9b7b11b211b 100644
--- a/kolibri/plugins/learn/assets/src/views/HybridLearningCardGrid.vue
+++ b/kolibri/plugins/learn/assets/src/views/HybridLearningCardGrid.vue
@@ -25,6 +25,7 @@
:channelThumbnail="content.channel_thumbnail"
:channelTitle="content.channel_title"
@openCopiesModal="openCopiesModal"
+ @toggleInfoPanel="$emit('toggleInfoPanel', content)"
/>
@@ -84,6 +85,7 @@
:footerIcons="footerIcons"
:createdDate="content.bookmark ? content.bookmark.created : null"
@openCopiesModal="openCopiesModal"
+ @toggleInfoPanel="$emit('toggleInfoPanel', content)"
@removeFromBookmarks="removeFromBookmarks(content, contents)"
/>
@@ -113,6 +114,7 @@
:cardViewStyle="currentViewStyle"
:genContentLink="genContentLink"
:contents="results"
+ @toggleInfoPanel="toggleInfoPanel"
/>
+
+
+
+
@@ -217,10 +226,11 @@
import { ContentNodeProgressResource, ContentNodeResource } from 'kolibri.resources';
import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
import { AllCategories, NoCategories } from 'kolibri.coreVue.vuex.constants';
+ import FullScreenSidePanel from 'kolibri.coreVue.components.FullScreenSidePanel';
import genContentLink from '../utils/genContentLink';
- import FullScreenSidePanel from '../../../../../core/assets/src/views/FullScreenSidePanel';
import { PageNames } from '../constants';
import { normalizeContentNode } from '../modules/coreLearn/utils';
+ import BrowseResourceMetadata from './BrowseResourceMetadata';
import commonLearnStrings from './commonLearnStrings';
import ChannelCardGroupGrid from './ChannelCardGroupGrid';
import HybridLearningCardGrid from './HybridLearningCardGrid';
@@ -253,6 +263,7 @@
EmbeddedSidePanel,
FullScreenSidePanel,
CategorySearchModal,
+ BrowseResourceMetadata,
},
mixins: [commonLearnStrings, commonCoreStrings, responsiveWindowMixin],
data: function() {
@@ -266,6 +277,7 @@
labels: null,
showSearchModal: false,
sidePanelIsOpen: false,
+ sidePanelContent: null,
};
},
computed: {
@@ -389,6 +401,9 @@
toggleSidePanelVisibility() {
this.sidePanelIsOpen = !this.sidePanelIsOpen;
},
+ toggleInfoPanel(content) {
+ this.sidePanelContent = content;
+ },
closeCategoryModal() {
this.currentCategory = null;
},
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage.vue
index c742f4c20f3..88d68935a5c 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage.vue
@@ -157,6 +157,7 @@
:genContentLink="genContentLink"
:channelThumbnail="channel_thumbnail"
cardViewStyle="card"
+ @toggleInfoPanel="toggleInfoPanel"
/>
@@ -167,6 +168,7 @@
:genContentLink="genContentLink"
:channelThumbnail="channel_thumbnail"
cardViewStyle="card"
+ @toggleInfoPanel="toggleInfoPanel"
/>
@@ -212,6 +214,7 @@
:cardViewStyle="currentViewStyle"
:genContentLink="genContentLink"
:contents="results"
+ @toggleInfoPanel="toggleInfoPanel"
/>
{
- console.log(data);
this.results = data.results.map(normalizeContentNode);
this.more = data.more;
this.labels = data.labels;
@@ -640,6 +645,9 @@
toggleSidebarView(value) {
this.activeTab = value;
},
+ toggleInfoPanel(content) {
+ this.sidePanelContent = content;
+ },
stickyCalculation() {
let header = document.getElementsByClassName('header')[0];
if (header) {