Card fixes

kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue

@@ -410,7 +410,7 @@
   .bottom-navigation {
     position: absolute;
     right: 0;
-    bottom: 1.5em;
+    bottom: 0;
     left: 0;
     width: 100%;
     padding: 1em;

kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue

@@ -915,7 +915,7 @@
   .bottom-navigation {
     position: absolute;
     right: 0;
-    bottom: 1.5em;
+    bottom: 0;
     left: 0;
     width: 100%;
     padding: 1em;

kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue

@@ -530,7 +530,7 @@
   .bottom-buttons-style {
     position: absolute;
     right: 0;
-    bottom: 1.5em;
+    bottom: 0;
     left: 0;
     padding: 1em;
     margin-top: 1em;

kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue

@@ -42,14 +42,9 @@
           :disabled="content.is_leaf"
           :tabindex="content.is_leaf ? -1 : 0"
           :class="{ 'with-checkbox': needCheckboxes }"
-          :title="content.title"
-          :thumbnail="content.thumbnail"
-          :description="content.description"
-          :kind="content.kind"
+          :content="content"
           :message="contentCardMessage(content)"
           :link="contentCardLink(content)"
-          :numCoachContents="content.num_coach_contents"
-          :isLeaf="content.is_leaf"
         >
           <template #notice>
             <slot

kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue

@@ -5,13 +5,6 @@
     class="content-card"
     :style="{ backgroundColor: $themeTokens.surface }"
   >
-    <CardThumbnail
-      class="thumbnail"
-      :thumbnail="thumbnail"
-      :kind="kind"
-      :isMobile="windowIsSmall"
-    />
-
     <div
       :class="windowIsSmall ? 'mobile-text' : 'text'"
       :style="{ color: $themeTokens.text }"
@@ -21,49 +14,50 @@
         :style="{ color: $themeTokens.text }"
       >
         <h3
-          v-if="!windowIsSmall"
           class="title"
           dir="auto"
         >
-          <KLabeledIcon :label="title">
-            <template #icon>
-              <ContentIcon :kind="kind" />
-            </template>
-          </KLabeledIcon>
-        </h3>
-        <h3
-          v-if="windowIsSmall"
-          dir="auto"
-        >
-          <KLabeledIcon :label="title">
-            <template #icon>
-              <ContentIcon :kind="kind" />
-            </template>
-          </KLabeledIcon>
+          <KTextTruncator
+            :text="content.title"
+            :maxLines="2"
+          />
         </h3>
-        <div
-          v-if="message"
-          class="message"
-          :style="{ color: $themeTokens.text }"
-        >
-          {{ message }}
-        </div>
       </div>
       <KTextTruncator
         v-if="!windowIsSmall"
-        :text="description"
+        :text="content.description"
         :maxLines="3"
         class="description"
+        :style="{ color: $themeTokens.annotation }"
       />
       <div>
+        <span
+          v-if="message"
+          class="message"
+          :style="{ color: $themeTokens.annotation }"
+        >
+          {{ message }}
+        </span>
         <CoachContentLabel
           class="coach-content-label"
-          :value="numCoachContents"
+          :value="content.numCoachContents"
           :isTopic="isTopic"
         />
       </div>
       <slot name="notice"></slot>
+      <LearningActivityChip
+        v-if="content.is_leaf"
+        :kind="content.learning_activities[0]"
+        class="chip"
+      />
     </div>
+    <CardThumbnail
+      v-if="!windowIsSmall"
+      :isMobile="windowIsSmall"
+      class="thumbnail"
+      :thumbnail="content.thumbnail"
+      :kind="content.kind"
+    />
   </router-link>
 
 </template>
@@ -73,16 +67,16 @@
 
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import CoachContentLabel from 'kolibri.coreVue.components.CoachContentLabel';
-  import ContentIcon from 'kolibri.coreVue.components.ContentIcon';
   import { validateLinkObject, validateContentNodeKind } from 'kolibri.utils.validators';
+  import LearningActivityChip from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue';
   import CardThumbnail from './CardThumbnail';
 
   export default {
     name: 'LessonContentCard',
     components: {
       CardThumbnail,
-      ContentIcon,
       CoachContentLabel,
+      LearningActivityChip,
     },
     setup() {
       const { windowIsSmall } = useKResponsiveWindow();
@@ -91,25 +85,8 @@
       };
     },
     props: {
-      title: {
-        type: String,
-        required: true,
-      },
-      description: {
-        type: String,
-        required: true,
-      },
-      thumbnail: {
-        type: String,
-        default: null,
-      },
-      kind: {
-        type: String,
-        required: true,
-        validator: validateContentNodeKind,
-      },
-      isLeaf: {
-        type: Boolean,
+      content: {
+        type: Object,
         required: true,
       },
       link: {
@@ -120,18 +97,14 @@
       // ContentNode.coach_content will be `0` if not a coach content leaf node,
       // or a topic without coach content. It will be a positive integer if a topic
       // with coach content, and `1` if a coach content leaf node.
-      numCoachContents: {
-        type: Number,
-        default: 0,
-      },
       message: {
         type: String,
         default: '',
       },
     },
     computed: {
       isTopic() {
-        return !this.isLeaf;
+        return !this.content.isLeaf;
       },
     },
   };
@@ -150,11 +123,11 @@
     position: relative;
     display: block;
     min-height: $thumb-height + 16;
-    padding: 16px;
+    padding: 24px;
     margin-bottom: 24px;
     text-align: left;
     text-decoration: none;
-    border-radius: 2px;
+    border-radius: 8px;
     transition: box-shadow $core-time ease;
 
     &:hover,
@@ -166,37 +139,52 @@
   .thumbnail {
     position: absolute;
     top: 0;
-    left: 0;
-    margin: 8px;
+    right: 0;
+    height: 100%;
+    border-radius: 0 8px 8px 0;
   }
 
   .text {
     flex-direction: column;
-    margin-left: $thumb-width + 8;
-  }
-
-  .mobile-text {
-    margin-left: $mobile-thumb-width + 8;
+    max-width: calc(100% - #{$thumb-width} - 8px);
   }
 
-  .title-message-wrapper {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+  .title {
+    margin-bottom: 0.5em;
   }
 
-  .title,
   .message {
-    margin-top: 0;
-    overflow: hidden;
+    margin-bottom: 1.25em;
+    font-size: 0.75em;
   }
 
-  .message {
-    text-align: right;
+  .description {
+    margin-bottom: 0.5em;
+    font-size: 0.875em;
   }
 
   .coach-content-label {
-    margin: 8px 0;
+    width: 20%;
+    margin: 0 8px;
+  }
+
+  .chip {
+    padding: 0.5em;
+    margin: 0.75em 0;
+    font-size: 0.7em;
+  }
+
+  /deep/ .icon svg {
+    width: 1.25em !important;
+    height: 1.25em !important;
+    padding-top: 1px;
+  }
+
+  /deep/ .mobile-thumbnail-wrapper {
+    position: absolute;
+    top: 0 !important;
+    right: 0 !important;
+    height: 125px;
   }
 
 </style>

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

@@ -114,9 +114,9 @@
   import TimeDuration from 'kolibri.coreVue.components.TimeDuration';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import MissingResourceAlert from 'kolibri-common/components/MissingResourceAlert';
+  import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
   import useContentNodeProgress from '../composables/useContentNodeProgress';
   import useContentLink from '../composables/useContentLink';
-  import LearningActivityIcon from './LearningActivityIcon.vue';
   import ProgressBar from './ProgressBar';
 
   export default {

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

@@ -97,13 +97,13 @@
   import { ContentNodeResource } from 'kolibri.resources';
   import client from 'kolibri.client';
   import urls from 'kolibri.urls';
+  import LearningActivityChip from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue';
   import useContentNodeProgress from '../composables/useContentNodeProgress';
   import useContentLink from '../composables/useContentLink';
   import useCoreLearn from '../composables/useCoreLearn';
   import SidePanelModal from './SidePanelModal';
   import commonLearnStrings from './commonLearnStrings';
   import LearnAppBarPage from './LearnAppBarPage';
-  import LearningActivityChip from './LearningActivityChip';
   import CardList from './CardList';
   import HybridLearningFooter from './HybridLearningContentCard/HybridLearningFooter';
 

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

@@ -243,9 +243,9 @@
   } from 'kolibri.utils.licenseTranslations';
   import LearnerNeeds from 'kolibri-constants/labels/Needs';
   import { ContentNodeResource } from 'kolibri.resources';
+  import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
   import useContentLink from '../composables/useContentLink';
   import commonLearnStrings from './commonLearnStrings';
-  import LearningActivityIcon from './LearningActivityIcon';
   import ContentNodeThumbnail from './thumbnails/ContentNodeThumbnail';
 
   export default {

kolibri/plugins/learn/assets/src/views/CompletionModal/ResourceItem/ResourceLabel.vue

@@ -39,7 +39,7 @@
 <script>
 
   import TimeDuration from 'kolibri.coreVue.components.TimeDuration';
-  import LearningActivityIcon from '../../LearningActivityIcon';
+  import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
 
   /**
    * Renders learning activity/topic icon, title,

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

@@ -191,7 +191,7 @@
   import TimeDuration from 'kolibri.coreVue.components.TimeDuration';
   import SuggestedTime from 'kolibri.coreVue.components.SuggestedTime';
   import get from 'lodash/get';
-  import LearningActivityIcon from './LearningActivityIcon.vue';
+  import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
   import commonLearnStrings from './commonLearnStrings';
   import DeviceConnectionStatus from './DeviceConnectionStatus.vue';
 

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

@@ -36,8 +36,8 @@
 
   import { computed } from 'kolibri.lib.vueCompositionApi';
   import { get } from '@vueuse/core';
+  import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
   import useLearningActivities from '../../composables/useLearningActivities';
-  import LearningActivityIcon from '../LearningActivityIcon';
   import LearningActivityDuration from '../LearningActivityDuration';
 
   /**

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

@@ -172,6 +172,7 @@
   import { mapState, mapGetters } from 'vuex';
   import MeteredConnectionNotificationModal from 'kolibri-common/components/MeteredConnectionNotificationModal.vue';
   import appCapabilities, { checkCapability } from 'kolibri.utils.appCapabilities';
+  import LearningActivityChip from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue';
   import SidePanelModal from '../SidePanelModal';
   import SearchFiltersPanel from '../SearchFiltersPanel';
   import { KolibriStudioId, PageNames } from '../../constants';
@@ -189,7 +190,6 @@
   import BrowseResourceMetadata from '../BrowseResourceMetadata';
   import commonLearnStrings from '../commonLearnStrings';
   import ChannelCardGroupGrid from '../ChannelCardGroupGrid';
-  import LearningActivityChip from '../LearningActivityChip';
   import SearchResultsGrid from '../SearchResultsGrid';
   import LearnAppBarPage from '../LearnAppBarPage';
   import PostSetupModalGroup from '../../../../../device/assets/src/views/PostSetupModalGroup.vue';

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

@@ -172,6 +172,7 @@
   import urls from 'kolibri.urls';
   import AppError from 'kolibri-common/components/AppError';
   import GlobalSnackbar from 'kolibri-common/components/GlobalSnackbar';
+  import LearningActivityChip from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue';
   import { PageNames, ClassesPageNames } from '../constants';
   import SkipNavigationLink from '../../../../../../kolibri/core/assets/src/views/SkipNavigationLink';
   import useChannels from '../composables/useChannels';
@@ -187,7 +188,6 @@
   import useDownloadRequests from '../composables/useDownloadRequests';
   import commonLearnStrings from './commonLearnStrings';
   import SidePanelModal from './SidePanelModal';
-  import LearningActivityChip from './LearningActivityChip';
   import CurrentlyViewedResourceMetadata from './CurrentlyViewedResourceMetadata';
   import ContentPage from './ContentPage';
   import LearningActivityBar from './LearningActivityBar';

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

@@ -273,6 +273,7 @@
   import samePageCheckGenerator from 'kolibri.utils.samePageCheckGenerator';
   import { ContentNodeResource } from 'kolibri.resources';
   import plugin_data from 'plugin_data';
+  import LearningActivityChip from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue';
   import SidePanelModal from '../SidePanelModal';
   import { PageNames } from '../../constants';
   import useChannels from '../../composables/useChannels';
@@ -285,7 +286,6 @@
   import LibraryAndChannelBrowserMainContent from '../LibraryAndChannelBrowserMainContent';
   import SearchFiltersPanel from '../SearchFiltersPanel';
   import BrowseResourceMetadata from '../BrowseResourceMetadata';
-  import LearningActivityChip from '../LearningActivityChip';
   import CustomContentRenderer from '../ChannelRenderer/CustomContentRenderer';
   import SearchResultsGrid from '../SearchResultsGrid';
   import DeviceConnectionStatus from '../DeviceConnectionStatus.vue';