Catalogue: Simplify CatalogueCourseCard usage, adjust styles, and clean up unused CSS classes #5652

Author: AngelFQC

assets/css/scss/organisms/_cards.scss

@@ -11,8 +11,10 @@
   }
 
   .p-card-header {
+    @apply relative;
+
     img {
-      @apply rounded-t-lg aspect-video;
+      @apply rounded-t-lg object-cover;
     }
   }
 
@@ -33,7 +35,7 @@
   }
 
   .p-card-footer {
-    @apply mt-auto rounded-b-lg;
+    @apply mt-auto rounded-b-lg space-y-2;
   }
 
   .p-menu {

assets/css/scss/organisms/_course_card.scss

@@ -2,15 +2,11 @@
   .course-card {
 
     &__header {
-      @apply relative aspect-video w-full overflow-hidden rounded-t-lg bg-gray-25 ;
-    }
-
-    .p-card-header {
-      @apply relative;
+      @apply aspect-video w-full overflow-hidden rounded-t-lg bg-gray-25 ;
     }
 
     &__category-list {
-      @apply absolute top-2 left-2 flex flex-wrap gap-1 z-10;
+      @apply absolute top-2 left-2 flex flex-wrap gap-1;
     }
 
     &__title {
@@ -28,7 +24,7 @@
     }
 
     &__language {
-      @apply absolute bottom-2 right-2 z-10;
+      @apply absolute bottom-2 right-2;
     }
   }
 }

assets/vue/components/course/CatalogueCourseCard.vue

@@ -314,12 +314,10 @@ onMounted(() => {
           v-if="imageLink"
           :to="imageLink"
           aria-label="Open course"
-          class="absolute inset-0 block"
         >
           <img
             :alt="localCourse.title"
             :src="localCourse.illustrationUrl"
-            class="h-full w-full object-cover"
             loading="lazy"
             referrerpolicy="no-referrer"
           />
@@ -328,7 +326,6 @@ onMounted(() => {
           v-else
           :alt="localCourse.title"
           :src="localCourse.illustrationUrl"
-          class="w-full object-cover"
         />
 
         <BaseButton
@@ -421,22 +418,22 @@ onMounted(() => {
           {{ t("Your vote") }} [{{ localVote }}]
         </span>
       </div>
+    </template>
 
+    <template #footer>
       <template
         v-for="extraField in localCourse.extra_fields"
         :key="extraField.variable"
       >
         <div
           v-if="extraField.value"
-          class="text-caption flex gap-2"
+          class="text-caption space-x-2"
         >
           <strong v-text="extraField.text" />
           <span v-text="extraField.value" />
         </div>
       </template>
-    </template>
 
-    <template #footer>
       <BaseAppLink
         v-if="localCourse.subscribed"
         :to="{ name: 'CourseHome', params: { id: localCourse.id } }"

assets/vue/components/course/CourseCard.vue

@@ -1,25 +1,22 @@
 <template>
   <Card class="course-card">
     <template #header>
-      <div class="relative aspect-video w-full overflow-hidden rounded-t-2xl bg-gray-100">
+      <div class="course-card__header">
         <img
           v-if="isLocked"
           :alt="course.title || 'Course illustration'"
           :src="imageUrl"
-          class="absolute inset-0 h-full w-full object-cover"
           loading="lazy"
           referrerpolicy="no-referrer"
         />
         <BaseAppLink
           v-else
           :to="{ name: 'CourseHome', params: { id: course._id }, query: { sid: sessionId } }"
           aria-label="Open course"
-          class="absolute inset-0 block"
         >
           <img
             :alt="course.title || 'Course illustration'"
             :src="imageUrl"
-            class="h-full w-full object-cover"
             loading="lazy"
             referrerpolicy="no-referrer"
           />

assets/vue/views/course/CatalogueCourses.vue

@@ -69,19 +69,16 @@
     </div>
 
     <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-      <div
+      <CatalogueCourseCard
         v-for="course in visibleCoursesBase"
         :key="course.id"
-      >
-        <CatalogueCourseCard
-          :card-extra-fields="cardExtraFields"
-          :course="course"
-          :current-user-id="currentUserId"
-          :show-title="showCourseTitle"
-          @rate="onRatingChange"
-          @subscribed="onUserSubscribed"
-        />
-      </div>
+        :card-extra-fields="cardExtraFields"
+        :course="course"
+        :current-user-id="currentUserId"
+        :show-title="showCourseTitle"
+        @rate="onRatingChange"
+        @subscribed="onUserSubscribed"
+      />
     </div>
 
     <div ref="sentinel">