Merge pull request #540 from matematikk-mooc/marius/DIT-223v2

Marius/dit 223v2
matematikk-mooc · Jul 2, 2024 · aee8434 · aee8434
2 parents 4a45e05 + e4d2a8d
commit aee8434
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/src/vue/components/Card.vue b/src/vue/components/Card.vue
@@ -23,10 +23,8 @@
       <section class="card-content-description">
         <div class="card-content-enrolled" v-if="hasGoToCourse">
           <CircularProgressBar :percentage="percentageValue" :size="50" />
-
           <div class="card-content-enrolled-text">
             <p class="card-content-enrolled-count">{{ requirementsCompleted }} av {{ requirementsTotal }} fullført</p>
-
             <p class="card-content-enrolled-description">{{ allRequirementsCompleted ? "Du har fullført kompetansepakken!" : "Fortsett for å fullføre kompetansepakken!" }}</p>
           </div>
         </div>

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 : ''"
@@ -206,6 +206,11 @@ export default {
   gap: 32px 24px;
   margin-bottom: 40px;
 
+  .card-container-wrapper {
+    position:relative;
+    align-self: stretch;
+  }
+
   @media (max-width: 1025px) {
     width: 64rem;
   }