DIT-223: Cardsizes

- Fixed sizes of cards to be equal in size according to largest on row
matematikk-mooc · Jun 27, 2024 · d733246 · d733246
1 parent b07227c
commit d733246
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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;
   }