From 7c0d2e0e80ddea443b847a4065b4b2eb90abadce Mon Sep 17 00:00:00 2001
From: AjXUdir <ajanth.uthaya@udir.no>
Date: Wed, 29 May 2024 12:56:50 +0200
Subject: [PATCH] DIT-124: Added tags to cards

- Updated: Card item to include filter options from course settings as tags.
- Updated: Card container to support dynamic height scalling instead of a hardcoded value, since tags could lead to unpredictable height values
---
 src/vue/components/Card.vue             | 33 ++++++++++++++++++++++++-
 src/vue/components/CardHighlighted.vue  | 32 +++++++++++++++++++++++-
 src/vue/components/CardList.vue         | 12 ++++++---
 src/vue/components/NotLoggedInIntro.vue |  8 ++----
 4 files changed, 73 insertions(+), 12 deletions(-)

diff --git a/src/vue/components/Card.vue b/src/vue/components/Card.vue
index bf508da6..9bf32d77 100644
--- a/src/vue/components/Card.vue
+++ b/src/vue/components/Card.vue
@@ -18,6 +18,13 @@
           <slot name="description"></slot>
           <slot name="moduleList"></slot>
         </p>
+
+        <ul class="card-content-tags">
+          <template  v-for="filterItem in filters" :key="filterItem.filter_id">
+            <li>{{ filterItem.filter.filter_name }}</li>
+          </template>
+        </ul>
+
         <div class="card-content-enrolled">
           <img
             v-if="hasGoToCourse"
@@ -51,6 +58,7 @@ export default {
     theme: String,
     courseIllustration: String,
     label: String,
+    filters: Array
   },
   data() {
     return {
@@ -67,13 +75,13 @@ export default {
 .card-box {
   position: relative;
   width: 24rem;
-  min-height: 28rem;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   border-radius: 0.5rem;
   box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.25);
   background-color: $card-background-color;
+  height: 100%;
 
   .card-illustration-box {
     position: relative;
@@ -136,6 +144,29 @@ export default {
     justify-content: flex-start;
   }
 
+  .card-content-tags {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    list-style-type: none;
+    padding: 0px;
+    margin: 0px;
+    margin-top: 10px;
+  }
+
+  .card-content-tags li {
+    background: #eaeaf5;
+    padding: 4px 15px;
+    margin: 0px;
+    margin-right: 8px;
+    margin-bottom: 8px;
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 21px;
+  }
+
   .card-content-button-container {
     margin-top: 1.5rem;
     margin-bottom: 1rem;
diff --git a/src/vue/components/CardHighlighted.vue b/src/vue/components/CardHighlighted.vue
index aa623328..96dc959c 100644
--- a/src/vue/components/CardHighlighted.vue
+++ b/src/vue/components/CardHighlighted.vue
@@ -18,6 +18,13 @@
                     <slot name="description"></slot>
                     <slot name="moduleList"></slot>
                 </p>
+
+                <ul class="card-highlighted-content-tags">
+                    <template  v-for="filterItem in filters" :key="filterItem.filter_id">
+                        <li>{{ filterItem.filter.filter_name }}</li>
+                    </template>
+                </ul>
+
                 <div class="card-highlighted-content-button-container">
                     <slot name="leftButton"></slot>
                     <slot name="rightButton"></slot>
@@ -36,6 +43,7 @@ export default {
         theme: String,
         courseIllustration: String,
         label: String,
+        filters: Array
     },
     data() {
         return {
@@ -52,7 +60,6 @@ export default {
 .card-highlighted-box {
     position: relative;
     width: 24rem;
-    min-height: 24rem;
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
@@ -121,6 +128,29 @@ export default {
         justify-content: flex-start;
     }
 
+    .card-highlighted-content-tags {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        list-style-type: none;
+        padding: 0px;
+        margin: 0px;
+        margin-top: 10px;
+    }
+
+    .card-highlighted-content-tags li {
+        background: #eaeaf5;
+        padding: 4px 15px;
+        margin: 0px;
+        margin-right: 8px;
+        margin-bottom: 8px;
+        border-radius: 20px;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 21px;
+    }
+
     .card-highlighted-content-button-container {
         margin-top: 1.5rem;
         margin-bottom: 1rem;
diff --git a/src/vue/components/CardList.vue b/src/vue/components/CardList.vue
index 8193a3b4..c2877a38 100644
--- a/src/vue/components/CardList.vue
+++ b/src/vue/components/CardList.vue
@@ -1,11 +1,12 @@
 
 <template>
   <div class="card-container">
-    <div v-for="course in courses" :key="course.id">
+    <div v-for="course in courses" :key="course.id" class="card-container-wrapper">
       <Card class="card-item"
         :theme="course.course_settings ? course.course_settings.course_category.category.color_code : 'theme_0'"
         :courseIllustration="course.course_settings ? course.course_settings.image.path : ''"
         :label="course.name"
+        :filters="course.course_settings ? course.course_settings.course_filter : []"
       >
         <template v-slot:new-flag>
           <NewCourseFlag v-if="newCoursesIndicator && newCourseFlag(course)"/>
@@ -185,9 +186,11 @@ export default {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  width: 140rem;
+  width: 100%;
   align-items: flex-start;
   justify-content: flex-start;
+  gap: 32px 24px;
+  margin-bottom: 40px;
 
   @media (max-width: 1025px) {
     width: 64rem;
@@ -199,8 +202,9 @@ export default {
   }
 }
 
-.card-item {
-  margin: 0.25rem 1.5rem 2rem 0;
+.card-container-wrapper {
+  position: relative;
+  align-self: stretch;
 }
 
 .course-illustration-box {
diff --git a/src/vue/components/NotLoggedInIntro.vue b/src/vue/components/NotLoggedInIntro.vue
index fbdd2a9c..a3ad8a9f 100644
--- a/src/vue/components/NotLoggedInIntro.vue
+++ b/src/vue/components/NotLoggedInIntro.vue
@@ -14,6 +14,7 @@
         :theme="newestCourse.course_settings ? newestCourse.course_settings.course_category.category.color_code : 'theme_0'"
         :courseIllustration="newestCourse.course_settings ? newestCourse.course_settings.image.path : ''"
         :label="newestCourse.name"
+        :filters="newestCourse.course_settings ? newestCourse.course_settings.course_filter : []"
       >
         <template v-slot:new-flag>
           <NewCourseFlag v-if="newCourseFlag()"></NewCourseFlag>
@@ -161,6 +162,7 @@ export default {
   box-sizing: border-box;
   padding: 0.5rem 6rem 0.5rem 9rem;
   margin-top: 1rem;
+  margin-bottom: 20px;
   display: inline-grid;
   grid-template-columns: auto auto;
   justify-content: center;
@@ -192,14 +194,8 @@ export default {
 }
 
 .card-highlighted {
-
-  max-height: 100px !important;
   box-sizing: border-box !important;
   justify-content: space-between !important;
-  .card-box {
-  min-height: 24rem;
-}
-
 }
 
 .course-illustration-box {