From d733246df42ff8167b8551b3cf9203109fb96ff0 Mon Sep 17 00:00:00 2001
From: Marius Johan Holm Johansen <marius.jh.johansen@gmail.com>
Date: Thu, 27 Jun 2024 16:21:58 +0200
Subject: [PATCH] DIT-223: Cardsizes

- Fixed sizes of cards to be equal in size according to largest on row
---
 src/vue/components/Card.vue            | 8 +++-----
 src/vue/components/CardHighlighted.vue | 3 +--
 src/vue/components/CardList.vue        | 7 ++++++-
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/vue/components/Card.vue b/src/vue/components/Card.vue
index 9bf32d77..6ed609a1 100644
--- a/src/vue/components/Card.vue
+++ b/src/vue/components/Card.vue
@@ -12,19 +12,18 @@
     <div class="card-content-container">
       <header class="card-box-title">
         <h2><slot name="title"></slot></h2>
-      </header>
-      <section class="card-content-description">
         <p :class="{ description_text: true }">
           <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>
-
+      </header>
+      <section class="card-content-description">
         <div class="card-content-enrolled">
           <img
             v-if="hasGoToCourse"
@@ -187,7 +186,6 @@ export default {
   }
 
   .card-content-enrolled {
-    margin-top: 1rem;
     display: flex;
     flex-direction: row;
     align-items: center;
diff --git a/src/vue/components/CardHighlighted.vue b/src/vue/components/CardHighlighted.vue
index 96dc959c..aca220af 100644
--- a/src/vue/components/CardHighlighted.vue
+++ b/src/vue/components/CardHighlighted.vue
@@ -154,8 +154,7 @@ export default {
     .card-highlighted-content-button-container {
         margin-top: 1.5rem;
         margin-bottom: 1rem;
-        display: inline-grid;
-        grid-template-columns: auto auto;
+        display: flex;
         gap: 0.5rem;
     }
 
diff --git a/src/vue/components/CardList.vue b/src/vue/components/CardList.vue
index 2c12b58a..bf60b074 100644
--- a/src/vue/components/CardList.vue
+++ b/src/vue/components/CardList.vue
@@ -1,7 +1,7 @@
 
 <template>
   <div class="card-container">
-    <div class="card-instance"  v-for="course in courses" :key="course.id">
+    <div class="card-instance card-container-wrapper"  v-for="course in courses" :key="course.id">
       <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 : ''"
@@ -203,6 +203,11 @@ export default {
   gap: 32px 24px;
   margin-bottom: 40px;
 
+  .card-container-wrapper {
+    position:relative;
+    align-self: stretch;
+  }
+
   @media (max-width: 1025px) {
     width: 64rem;
   }